#What is Color Contrast?
##Color Theory
Colors from different segments of the color wheel are contrasting colors. In color theory, complementary colors (or "opposite" colors) that are directly across from one another on a basic color wheel provide maximum contrast. This means they stand out from one another the strongest compaired to being paired with other colors. Complementary colors are two colors that cancel one another out and produce a white/gray-scale color.
Oftentimes companies implement complementary colors to provide the most contrast in their brand. Examples in the wild are the Laker's logo that uses purple and yellow or the Knick's logo that uses blue and orange. Purple and yellow are on opposite sides of the color wheel from each other. So are orange and blue. You may also see complementary colors during the end of the year holidays - as red and green are also complementary to one another.
##What does this mean for web accessibility?
On the web, color contrast is about finding colors that not only provide maximum contrast, but provide enough contrast between content and the background for anyone with low vision impairments and color dificiencies. This doesn't mean you have to limit your colors to complementary colors as we just talked about - but the contrast should be kept in mind all the same. The text and non-decorative images need to be clearly legible for everyone regardless of whether they have moderately low vision or color deficiencies. We can check colors for contrast by using one of many contrast tools online. There are more you can find, but here's a list to get you started:
Color Contrast Tools
- Tanaguru Contrast Finder
- Contrast Ratio by Lea Verou
- Colour Contrast Analyzer by Paciello Group
- Color Contrast Checker by WebAIM
What these tools do once you provide colors for testing is check them against a contrast ratio. A contrast ratio of 3:1 is the minimum standard for text and vision. For those with visual impairments however, the contrast ratio standard is 4.5:1. The standard ratios differ depending on the vision loss or color deficiency. There's a link to W3C's article at the end of this called "The Contrast Minimum" that explains how these ratios are calculated. The gist of it is that our colors need to fall into these ratios. These ratios have "grades" or what are known as "levels of conformance". Levels of conformance are the requirements you've satisfied. So the more requirements you've met, in our case with contrast, the higher our "grade" or level of conformance will be. The higher, the better. The highest we can reach is AAA. The contrast ratio to reach that level is 7:1.
W3C states that it's not always possible to reach the AAA level of conformance across entire sites. So the goal is to get the highest level you can where it counts.
##What else can we do?
Aside from using color contrast tools to determine your site's colors, there are some other ways you can keep your site's contrast in mind:
- The larger the font and wider the stroke, the more legible it will be with lower contrast. Therefore the contrast requirement for larger font is lower. W3C recommends starting at 18pt regular weight or 14pt bold text.
- Provide tools for users to adjust the foreground and background colors of your site on the front-end. This is especially helpful for users that need to either switch to a low contrast or a high contrast mode. This gives them more control over the contrast ratio and covers everyone using your site regardless of what kind of vision loss or color dificiency they have.
- Steer clear of text based images and use text wherever possible. If not, consider using a high resolution for text images. Speaking of text images, don't forget to fill out the alt text.
- Ensure that your placeholders in forms also have valid color contrast.
##Further Reading:
- Constrasting Colors by http: about.com (2014)
- The Contrast Minimum by W3C
- Understanding Conformance by W3C
- Basic Color Theory by colormatters.com
- Color Contrast Tips & Tools by Smashing Magazine
- Providing A Style Switcher To Switch To High Contrast by W3C
- Techniques for High Contrast Icons by YDN