Color Contrast - Accessible Color Standards

Cormac Chisholm(opens in a new Tab)

Jun 6th, 2022

·

3 min read

Here we go again. It’s time for our next lesson!

Recently, after evaluating the home pages of the top one million websites, the WebAim Million report identified the top six most common WCAG (Web Content Accessibility Guidelines) compliance failures. Today’s lesson is going to cover the most common failure: Color Contrast; specifically “Low Contrast Text”.

Around 70% of individualsThis link opens in a new tab that have a diagnosed disability, experience blurred vision. But addressing low contrast text doesn’t just help individuals with visual impairments and disorders, it provides a better experience for everybody.

But before we jump into that, I need to give you a brief introduction to WCAG’s priority levels.

WCAG has three priority levels: A, AA, and AAA. Each level has its own list of guidelines, and depending on what type of product you’re building or which industry you’re operating in, you will need to comply with different levels. It breaks down to essential compliance, acceptable compliance, and optimal compliance.

In WCAG, the contrast is the measure of the difference in brightness or “luminance” between two colors. The difference in the colors is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g. black on white).

For compliance with WCAG level AA, the minimum required color contrast ratio for “the visual presentation of text and images” is 4.5:1. There are 3 exceptions to this rule.

• Large Text: Large text or images of large text only have a minimum required contrast ratio of 3:1. Large text is defined as text that is 18pt (which is typically 24px) or larger, and 14pt (typically 18.66px) or larger if the text is bold.
• Incidental:
  • Inactive: An inactive element, like a disabled button, can be identified by its low contrast state.
  • Purely Decorative: Decorative text that is not meant to be read.
  • Not visible: Text that is meant to be hidden.
  • Part of a picture that contains significant other visual content: Text that is not an important part of the information in the image, for instance, the brand of a shirt that somebody is wearing in a group picture.
• Logos: Text that is part of a logo or brand name has no contrast requirement.

For compliance with WCAG level AAA, the contrast requirements are more stringent. The minimum required contrast is 7:1 for normal text and 4.5:1 for large text.

If you’re looking for a tool to check these contrast ratios, WebAimThis link opens in a new tab has a great tool that you can use.

Hopefully, now you have an understanding of how to meet WCAG color contrast standards and why these standards are both important and beneficial.

See you again next lesson where we will be learning all about accessible images.