Use enough contrast for text

The text colour should have enough contrast with its background. This way, the text is easily readable for all visitors. Text must have a minimum contrast ratio of:

  • 4.5:1 for the text smaller than 24px or 19px bold.
  • 3:1 for the text larger than 24px or 19px bold.

These contrast requirements also apply to text on images.

Note: These contrast ratios should not be rounded up. The contrast ratio between the hexadecimal colour codes #777777 (gray) and #FFFFFF (white) is 4.47:1. So this is not enough.

A contrast checker can be used to calculate a contrast ratio. For example, the contrast checker on the website of WebAIM or the Colour Contrast Analyser (software) of The Paciello Group.

There are a few exceptions for text contrast such as logos, decorative text, and elements that are inactive.