23 Jul 2013

Prevent Barriers to Conversions By Choosing The Right Color Contrasts

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.

Failed colors one
Failed colors 2
Failed colors 3
Failed colors 4


Examples of Acceptable Color Contrasts

Sometimes color contrasts that pass surprise me, as in the cases below.

Passed color 1
Pass color 2

This one is very close to blue and white color combos that fail. This is why it’s important to test.

Passed color 3


Recommendations to Follow

Sailboat
1. Use dark colored text against a white background for paragraphs of text. This is especially important for product descriptions and text that contains value propositions and user instructions.

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.

Comments

  1. Leila Hodgkins July 24, 2013 at 4:43 AM

    I totally agree with this! I /am/ a web designer but firmly believe that sites are meant for people and usability should never be sacrificed for the sake of a design feature.

  2. Singapore Interior Design August 15, 2013 at 5:00 AM

    One more important point to note is that some color contrast do not go well with people who are Color Blind or partially so. Designers need to be aware that the color combination they chose might not be suitable for some of their color blind readers. If you are designing using Photoshop, a good way to keep design usability in check is to go View ->Proof Setup -> Color Blindness.

Leave a Reply