Why contrast matters

Text that is hard to read excludes people with low vision or colour-vision differences, and it also fails anyone using a phone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) define contrast ratios so you can measure readability instead of guessing.

The numbers to remember

  • Normal text: at least 4.5 to 1 for level AA, 7 to 1 for level AAA.
  • Large text (about 24 px regular or 18.66 px bold and above): at least 3 to 1 for AA, 4.5 to 1 for AAA.
  • User-interface parts such as input borders, icons and focus rings: at least 3 to 1 against neighbouring colours (WCAG 2.1).

How to check a colour pair

  1. Open the Color Contrast Checker.
  2. Enter the text colour and background colour as HEX values.
  3. Read the ratio and the AA and AAA results for normal and large text.
  4. If a pair fails, darken the text or lighten the background and test again.

Practical fixes

  • Grey text on white is the most common failure. Move light greys such as #999 to about #767676 or darker to pass AA.
  • Do not rely on colour alone to show meaning. Add an icon, underline or label for errors and links.
  • Check hover, focus, disabled and placeholder states, not only the default look.
  • Check text placed over images and gradients at the lowest-contrast point.

Good to know

Passing the ratio is the minimum, not a guarantee of comfort. Font size, weight and spacing also affect readability, so test on a real screen too.