Ensure text has sufficient contrast

(In development)

Ensure that the contrast ratio between the element foreground text color and background color is at least 4,5:1. For bold and large text, a ratio of 3:1 is sufficient By maintaining this ratio, visually impaired and color blind users can usually read the text well.

Impact

If text has insufficient contrast, visually impaired people might not be able to read it. Sufficient text contrast makes an app easier for everyone to use for everyone. For example, outside in the sun.

Solutions

Elements

Testing

Automated testing

This issue can be detected automatically with the Abra Test Engine.

Manual testing

Determine if the text style is large or bold. Large text has a font size of 18 points or greater. Bold text needs to have a font size of 14 points or greater. Otherwise, the text style is considered normal.

Make a screenshot and pick the text color and background color. Use a contrast checker to calculate the contrast ratio.

  • Normal text: passes if the contrast is at least 4,5:1.
  • Large or bold text: passes if the contrast is at least 3:1.

Note: When making a screenshot, the colors are compressed, resulting in a deviation of 1 to 10%. Therefore, contrast ratios between 2,7:1 and 3,3:1 might not sufficient.

Exceptions

Text has no requirement if:

  • Contained in logos
  • Contained in inactive user interace components
  • Used for decoration

Relevant sources

Always check the official guidelines.