January 25, 2018
  |   UX / CX

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.

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?

Good Contrast Bad Contrast
#757575 12 point font
white background
(4.61:1 contrast ratio)
#8A8A8A 12 point font
white background
(3.45:1 contrast ratio)
#949494 14 point BOLD font
white background
(3.03:1 contrast ratio)
#BFBFBF 14 point BOLD font
white background
(1.84:1 contrast ratio)
#949494 18 point font
white background
(3.03:1 contrast ratio)
#BFBFBF 18 point font
white background
(1.84:1 contrast ratio)
#4D4D4D 12 point font
#BFBFBF background
(4.60:1 contrast ratio)
#707070 12 point font
#BFBFBF background
(2.69:1 contrast ratio)

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

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)

Let us know how we can help make your website ADA compliant.

Contact Us Today

Josh Woods
Josh Woods is a Digital Solutions Manager at Blue Acorn iCi. He works with clients from strategic planning through their entire AEM journey to deployment and support, working closely with the business, dev and QA teams to ensure delivery of a quality solution. He has over 10 years of experience in development and analysis for websites including project management experience, front-end development experience, UX/UI design experience and a marketing focused MBA. He's a hockey and football fan and enjoys traveling, movies, and podcasts in his free time.
View All Posts By This Author

Subscribe to Our Newsletter

Get the latest insights from Blue Acorn iCi

Let's build something together.