Use of Color & Contrast

There are many types of color blindness and low-vision conditions that may  make it difficult for people to distinguish color or contrast.

As many as 8 percent of men and 0.5 percent of women, of Northern European descent, experience red-green color blindness. There are several other types of color blindness including blue-yellow and total color blindness. Additionally, there are numerous conditions which cause contrast that is too subtle to be difficult to see.

The best strategy is to not rely on color alone to convey information on your website.

A color contrast ratio of 7:1 is recommended for normal sized text and 4.5:1 for large text.

Automated tools are available for you to test your colors before going live. When you’re picking out colors to use on your website make sure that the contrast is high enough for most people. WebAIM has a color contrast checker and a link color contrast checker.

Link Style

See details on the Importance of Appearance for Links.

Underlining links is a practical application that will benefit low vision and color blind visitors. The guidelines for the law state two additional requirements for body text links that are not underlined by default:

1. The link text must have a 3:1 contrast ratio from the surrounding non-link text and
2. The link must present a “non-color designator” (typically the introduction of the underline) on both mouse hover and keyboard focus.

For more info, check out: http://webaim.org/techniques/hypertext/link_text#appearance

Text Overlay on Images

Complying with color contrast requirements is very difficult if the text is over an image. We recommend avoiding this design pattern but if you do, pay special attention to the following:

1. Zoom in to review the content. If the text is added to the image file (i.e. it is inserted into the image with PhotoShop or other image editor) it may not be accessible to visitors with low vision who have their browser resize text or zoom into page content with an assistive technology if the image becomes blurry or pixelated. It also removes the capability for some visitors who adjust the color of text and background in their browser to make the text easier to read.
2. If the text is added to the image file the text must be included in the alternate text because a screen reader cannot read text in the image.
3. Text added to the page that is then placed over the image with CSS styling, can be zoomed without distortion and pixelation but may overflow the background and overlap other content in an undesirable way.
4. Review the content on a small device. If the text shrinks it may become illegible. If the text doesn’t shrink, it may overflow the background and overlap other content in an undesirable way.
5. Use a very dark image with very light text or vice versa.
6. Add a color overlay to darken or lighten the image to increase contrast with the text. Try out this “Optimal Overlay Finder” available on CodePen, where you can upload an image, choose the text color and the overlay color, and it will tell you what the optimal opacity should be for the overlay color.

Learn More

If you’re still insistent on text overlay on an image, please read Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1) and  (Part 2). Everything you ever wanted to know about color and contrast can be found on the Color and Contrast website.

Read about tools and techniques for achieving 4:5:1 contrast ratio for text and background behind text.

Read about vision disabilities on WebAIM’s website.