How to Get Color Contrast Accessibility Right

What is Color Contrast?

Color contrast is defined as the object’s difference in luminance or color relative to the background luminance or color.

Huh?

Yeah, this is not a lecture about color theory. In a nutshell, the term color contrast is referred to as the perception of how well a foreground (like text) stands from the background. This determines the readability for most people. Color contrast is measured in contrast ratio.

Defining Contrast Ratio

Contrast ratio is a numerical value, which determines the difference in light between the foreground and background.

WCAG definition of contrast ratio is used to evaluate the contrast ratio in web accessibility. The definition rates the minimum contrast to 1:1 and maximum contrast to 21:1 on black to white (or white to black). The contrast ratio of 1 means that the same color is used for both, leading to no contrast.

Why is Color Contrast Important for Accessibility?

Users should be able to distinguish text or visual components on a web page and interact with it the way it was intended. Poor color contrast will make the experience suboptimal regardless of the user’s visual capabilities. Providing a good and sufficient color contrast will benefit all users. Especially users with color blindness or similar conditions, who have difficulties differentiating between similar colors.

The W3C provides perspective videos of the impacts and the benefits of accessibility. One of these perspectives is about color contrast. The video will shed light on the difficulties, I highly recommend watching it.

https://www.youtube.com/watch?v=Hui87z2Vx8o&ab\_channel=W3CWebAccessibilityInitiative%28WAI%29

Having color contrast limitations does not mean that the web page should be dull. It just means that you must consider as broad a user audience as possible. This will be beneficial to the business, as there are an estimated 300 million people with color vision deficiency. If you were asked if you would like to open the business for an additional 300 million people, I think everyone would take it

Anyhow, this is not the case. Over 80 percent of the web pages had low contrast text. The findings are insane as the report does not contain every web page in the world. This report was concluded of the top one million home pages. Maybe they were not asked the question.

Color Contrast in WCAG 2.2

Like in everything related to accessibility. The WCAG provides very informative and useful criteria and different conformance levels for color contrast. In the very first blog post, we identified the four principles of WCAG.

The perceivable principle defines the following four success criteria for color contrast.

• 1.4.1 Use of Color – Level A (). Emphasizing the importance of employing additional visual elements, such as shape or text, alongside color to convey information, prompt actions, or distinguish visual elements. The intention is to guarantee that all sighted users can comprehend information conveyed through color differences, as color-blind users or those with limited color perception may miss such cues. Acknowledging the significance of color in web content design but highlights the need for alternative visual indicators to accommodate users with partial sight, older individuals with reduced color perception, or those resorting to limited-color displays.

• 1.4.3 Contrast (Minimum) – Level AA . Ensuring a minimum contrast ratio of 4.5:1 for the visual presentation of text and images of text. Aiming to improve readability for individuals with moderately low vision or impaired contrast perception. Exceptions include applying a lower ratio of 3:1 for large-scale text and exempting inactive user interface components, purely decorative text, and logotypes from contrast requirements. Emphasizing the independence of contrast calculation from color (hue) to accommodate diverse visual impairments, the criteria provide considerations for font sizes and address the application of contrast requirements to images of text. The rationale for contrast ratios is based on compensating for contrast sensitivity loss in users with specific vision levels. The overarching goal is to enhance text visibility and legibility for a broad audience.

• 1.4.6 Contrast (Enhanced) – Level AAA. Ensuring more strict contrast ratios of 7:1 for the visual presentation of text and images of text and a lower ratio of 4.5:1 for large-scale text compared to the criteria 1.4.3.

• 1.4.11 Non-text Contrast – Level AA . Ensuring crucial visual information, such as user interface components and graphical objects, maintains a minimum contrast ratio of 3:1 against adjacent colors. Applying to active user interface components and graphical objects vital for content understanding, the criteria focus on making these elements distinguishable for individuals with moderately low vision. Exempting inactive user interface components, emphasizing the importance of focusing indicators, and addressing graphical objects’ contrast requirements for content comprehension, the criteria aim to enhance accessibility for people with visual impairments by ensuring sufficient contrast in key visual elements.

For more detailed idea and practical examples, I suggest checking out the WebAIM’s contrast article.

Strategies for Achieving Proper Color Contrast

As we found out, low-contrast text is a very common issue on web pages. So how do we dodge these nasty issues?

Color Contrast Requirements Depends on Font Size

Normal text, which is defined as smaller than 18pt/24px OR 14pt/18.67px when bolded, should have the minimum contrast ratio of 4.5:1 (AA). Large text which is defined as larger than 18pt/24px OR 14pt/18.67px when bolded, should have the minimum contrast ratio of 3:1 (AA). Note that these are the minimum requirements, and they might still cause issues for certain users. I would suggest aiming higher when possible.

Enhance Contrast with Text Effects

Text effects such as borders and outlines might help to achieve a certain contrast level. The color of a text outline or border can be used when measuring contrast.

Keep in mind that text interaction effects are also subject to the requirements. Test the contrast ratio of all interaction indications, such as hover, focus, and active separately.

Correctly Identify Links

It is advisory to keep the visual underline effects for inline links where body text and link text appear. Omitting the link underline in such places, the following must be met besides the 1.4.3 text contrast requirement of 4.5:1.

• 3:1 contrast ratio between the body text and the link text.

• Mouse hovers and keyboard focus effects that will illustrate that the user is interacting with a link. This could be achieved by underlining the link text on hover and focus.

Some elements, like header and navigational elements, are exempted from this.

The issues only deepen in you are going for AAA level of conformance. If you are going to omit the underline effect from links, I suggest reading WebAIM’s WCAG 2.0 and Link Colors blog post.

Images of Text Need Proper Contrast

Images of text are also subject to the contrast ratio requirements. Decorative images with text are not subject to the requirements. Decorative image could be a picture of books for example.

Assure Proper Contrast for Gradients and Other Effects

WCAG 2.2 does not directly mention how to calculate the contrast ratio of text over gradient, semi-transparent colors, or background images. They are still subject to the contrast requirements. It is advisory to calculate the contrast from the lowest point.

Contrast Ratio Does Not Round Up

If you have a contrast ratio of 6.99:1, it does not mean it is close enough to satisfy the requirement of a contrast of 7:1.

How To Check Color Contrast for Accessibility

You can check contrast ratios online with multiple different tools. I have created a contrast checker tool for you to use freely.

ColorZilla is also great tool to extract the colors from any website element. ColorZilla provides browser plugins for Chrome and Firefox.

WebAIM’s Wave can also be used to analyze contrast ratios for page text elements.

Conclusion

Color contrast means how well a foreground stands out from the background. This determines the readability for most people. Color contrast is measured in contrast ratio.

WCAG rates the minimum contrast to 1:1 on same color in foreground and background, and maximum contrast to 21:1 on black to white (or white to black). These are used to evaluate the contrast ratio of web pages.

Providing a good and sufficient color contrast will benefit all users, but especially users with color blindness or similar conditions, who have difficulties differentiating between similar colors.

WCAG provides requirements or success criteria for accessible text, non-text content, and links that omit the underlining. When working on providing an accessible experience for the users it is crucial to use the correct text sizes, correctly identify links, providing other visual cues such as icons, keeping gradients and other effects to the minimum and remembering that the contrast ratio does not round up.