Web Accessibility Best Practices For Content Authors: Color Contrast

Note: the guidelines we base this blog on are from W3.

As an author, most of the contrast work should be already taken care of when there is a well-designed, consistent style guide or pattern library in place that is followed strictly by the site designers and implemented well by the site developers. In other words, designers should be handling the contrast issues before they ever get into the system and the developers should make them integrated into the system. However, authors add a significant amount of content to websites and have the ability through the content management system’s interface to author the content in a compliant way or in a way that will cause failures of the WCAG 2.0 success criteria.

What does color contrast mean?

Color contrast is the ratio of the color of one piece of content in relation to the color of the background it sits on (ie a foreground and a background color). Typically we’re looking at the color of a piece of text versus the background color. However, it can also apply to the contrast within an image if there is meaning being conveyed there.

Contrast in text and images must meet minimum accessibility standards to assist those with low vision or color blindness of one kind or another.

We dive into ADA web compliance for digital commerce with ADA experts on Blue Acorn iCi’s The Funnel: An Experience Driven Commerce Podcast. Listen here.

What are the current standards?

Our Double A (AA) guideline for this requirement says that the visual presentation of text (whether plain text or text in images) must meet a contrast ratio of 4.5:1, except in these cases:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; bold text that is at least 14 pixels/points and normal weight text that is at least 18 pixels/points is considered “large text” for this guideline.
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

(source: www.w3.org/WAI/WCAG20/quickref/)
Based on the AA guidelines, what does appropriate contrast look like?

There are many web resources to help validate color contrast on your site or in your designs. A few are listed below:

 [Webaim.org’s contrast checker](https://webaim.org/resources/contrastchecker/)
 [Contrastchecker.com](https://contrastchecker.com/)
 [Tanguru contrast finder](http://contrast-finder.tanaguru.com/)
 [Chrome extension search for “color contrast”](https://chrome.google.com/webstore/search/color%20contrast?hl=en&_category=extensions)

There isn’t that much nuance to the color contrast guidelines, but one additional thing to watch out for is where text is overlaid onto a background image. All parts of the text need to have appropriate contrast against the background image.

Example:

If we need to create a button or a link inside of the content we are working on, we need to take contrast into account. Based on the few examples provided above we know that we can make a button with a #bfbfbf background color and a #4d4d4d font color and it will pass the WCAG 2.0 AA guideline for color contrast. Our button would look something like the below:

Category

Basic Do’s and Don’ts:

• DO use contrast ratios over 4.5:1 when your font is less than 14 points
• DO use contrast ratios over 4.5:1 when your font is not bold and less than 18 points
• DO use contrast ratios over 3:1 when your font is bold and at least 14 points
• DO use contrast ratios over 3:1 when your font is not bold and at least 18 points
• DON’T forget to check contrast ratios before publishing content
• DON’T ignore contrast rules with text overlaid on images

User Experience Considerations:

When designing experiences for users, a high contrast ratio between the text color and the background color is going to result in a much more usable experience for all sighted users, not just low vision color-blind users.
Site content authors should be strictly following the style guide provided by the designers. By doing so, the implementation of elements throughout the site will have a consistent and predictable experience. “Consistent and predictable” is a great thing for accessibility and for usability in general.

Easy Fails:

(with links to more information)

• Specifying foreground without specifying background colors (or the reverse)
• Text overlaid on background images without sufficient contrast.

For more information about web accessibility, read the other article in this series, Web Accessibility Best Practices For Content Authors: Alt Text

Does your site need an ADA audit? We can help. Contact us today to get started.