Remember when the web design fad was to use two colors, sky blue and lime green? Today the new color is gray, and many of you can’t see it.
Recently I audited a web site that failed color contrasts above the usual one or two that I usually find. The site’s owner went with whatever his hired web designer chose, not understanding what he was paying for was a website most people would struggle to see and use. A bit frustrated with me, he asked why he needed to change the colors to one’s I tested and recommended for him. I explained that for his target user base, which is people of all ages and whose first language may not be English, his web site had to take the needed steps to readable. How can a visitor sign up for something they struggle to see? Why make it difficult to read your content?
Why Do We Need Colors That Contrast?
Accessibility testing has what’s called “Success Criterion”. Compliance standards create a much better user experience and not just for special needs users. Take this example from the WCAG Guidelines:
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
“The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology). For people without color deficiencies, hue and saturation have minimal or no effect on legibility as assessed by reading performance (Knoblauch et al., 1991). Color deficiencies can affect luminance contrast somewhat. Therefore, in the recommendation, the contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text and the background.”
Some of my tests result in a “partial fail”. In these instances, the colors can stay as long as the font size is increased. Again, from the WCAG:
“Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirement for larger text is therefore lower. This allows authors to use a wider range of color choices for large text, which is helpful for design of pages, particularly titles. 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio.”
Examples of Failed Color Contrasts
The examples below are the most common color choices I find on web sites. Every one of them fails the color contrast test. What’s interesting is that we often see call to action buttons that use green, blue or orange against white background. I typically let these slide with a suggestion that the button be a minimum of 175 pixels, contain an 16 to 18 pixel font size and have a strong beveled edge.
Examples of Acceptable Color Contrasts
Sometimes color contrasts that pass surprise me, as in the cases below.
This one is very close to blue and white color combos that fail. This is why it’s important to test.
Recommendations to Follow
2. Avoid colored text against colored background unless it passes contrast tests.
3. Test color choices by using your favorite color picker, (I use a Chrome plug-in or
Photoshop), and the Free Color Contrast Comparison Tool.
Web designers cringe at the idea of limitations to their creativity, especially when asked to sacrifice a cool trick for the sake of improving the user experience or conversions. Their challenge is build a web site experience and since they know humans respond to color, they like to play with it to create a mood or send sub-conscious prompts to relax, go, stop, caution, or dwell in dark gloom and doom.
It’s fun to paint the sky. Choose your palette wisely.