Color Contrast Effects Users

Published on 4 Nov 2014 at 11:23 pm.
Filed under Web Design.

Black on gray works for Batman. For the rest of us design with good color contrast so that people can read your site.

Color Contrast: Accessibility

It should come as no surprise that everyone sees the world differently. Some people have great eyesight, others have poor vision. Some people are color blind. Color blindness comes in many forms. Some do not see the world in color (Monochromacy). They view the world like an old black and white television. Some see certain colors differently (Anomalous Trichromacy). Others completely lack certain colors (Dichromacy). There are three major types of color blindness in the latter category.

1. Protanopia – people who cannot see the color red. This condition affects 1-1.3% of men and 0.02% of women.
2. Deuteranopia – people who cannot see the color green. This condition affects 1-1.2% of men and 0.01% of women.
3. Tritanopia – people who cannot see the color blue. This condition affects 0.001% of men and 0.03% of women.

When designing your site you must remember these people. Check the color contrast of your text and images. Is there enough contrast between colors that these users can use your site like you intended?

Consider the following image from our Mobile Solutions page.

In this specific case the Protanopia version looks very similar to the Deuteranopia version. The major difference between the two is in the shading on the hill. For us this image has enough color contrast. It did not change the meaning of the image. That made it acceptable for our site.

Color Contrast: Usability

That brings us to usability and the point that some people just see things poorly. There is no way we can accurately alter content to see things exactly like them. This makes it hard to test exactly. Luckily researches have developed algorithms for testing color contrast in certain situations. For text at size 18pt (or 14pt when bold) you need a 3:1 ratio to know with confidence that a user can distinguish between the two colors. For text smaller than 18pt the ratio is 4.5:1. I recommend you use WebAIM’s Color Contrast Checker to calculate the color contrast between elements in your design.

Another way to test your site’s usability is to convert it to grayscale. This is a great technique since it easily highlights where errors may crop up.

• It highlights content that is hard to distinguish for people with eyesight problems.
• It emphasizes potential area of confusion.

This second point is one that is hard for designers. A growing trend among designers is to remove the underline from links thinking that it’s dated and that color alone is enough. It’s not. This is form over function. It will look prettier but it will stop users from clicking on pages in your site. Do something with links to make them stand out besides changing the color so that users know to click on them. When you do this you will improve usability for your site and make it easier for you to grow your brand.

Thank you and keep building your brand.

This post was originally published as Color Contrast Effects Users for Brand Builder Websites.