accessible color contrast

Proper color contrast is important so text and and other content in color such as graphics is visible to those with color vision deficiency and low vision even when those colors are not visible to the user as intended.

Large text and logos including large text should have a contrast ratio with the background of no less than 4.5-to-1.

Examples:

This green text has a contrast ratio of 4.55-to-1 against a white background.

This blue text has a contrast ratio of 8.59-to-1 against a white background.

Small or regular sized text should have contrast ratio of 7-to-1 against the background.

Example: This black text against the white background has 21-to-1 contrast ratio.

For graphics and other elements, your contrast ration should be no less than 3-to-1 between each part of the element, including text, and the background.

Example:

In the above sample pie chart, here’s how our colors stack up for color ratio:

• Blue to green: 4.33 to 1
• Blue to white: 6.68 to 1
• Green to white: 1.54 to 1

The green to white contrast fails.

To ensure that there’s a better contrast between the green and white segments, we added a 3 point black. Here’s how our colors stack up to black:

• Blue to black: 3.14 to 1
• Green to black: 13.63 to 1
• White to black: 21 to 1

When picking colors, attempt to pick the best colors in contrast with each other, but also consider using outlines to help produce better contrast when many colors are used and there is a contrast failure, such as with the green in our example. Check color ratios using a color contrast checker.

← Return to Accessibility