Does everything required to understand the content have a contrast ratio of at least 3:1 against their background?

Goal

Ensure that people can visually identify the content.

Why this matters

If the contrast isn’t high enough for all the users to be able to read a chart or infographic, then the chart or infographic fails to achieve its purpose.

How to implement

Designer

Read Using color, specifically the section on charts and infographics.

Developer

Ensure you implement the colors provided by the Designer.

How to test

If either the element being tested or the background color is using opacity, you’ll need a way to figure out what the actual hex codes are with the opacity in effect. Sampling with a third-party application is usually faster than finding two or three calculators to string together for valid results.

1. Inspect the element being tested using the browser’s developer tools.
2. Inspect the background behind the element using the browser’s developer tools.
3. Compare the hex color of the element being tested to the hex color of the background using one of the contrast checkers on List of Contrast Checkers. The contrast ratio should be 3:1 or higher.