Skip to content

Color Contrast Checker

Check text and background colors against WCAG 2.2 AA and AAA contrast requirements.

Large heading text
Normal body text should be easy to read for everyone.

WCAG contrast requirements

The Web Content Accessibility Guidelines define contrast as a ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). Sufficient contrast helps people with low vision, color-vision deficiencies, or anyone reading a screen in bright sunlight.

LevelNormal textLarge text*
AA (minimum)4.5:13:1
AAA (enhanced)7:14.5:1

*Large text is at least 24px regular or about 18.66px bold. Non-text elements such as icons, input borders and focus indicators need 3:1 against adjacent colors (WCAG 2.2 success criterion 1.4.11).

Tips

  • Light grey placeholder text often fails, so check it too.
  • Test hover, focus and disabled states, not just the default state.
  • Text over images needs an overlay or shadow to guarantee contrast.
  • Many countries reference WCAG in accessibility law, for example the European Accessibility Act, which applies from June 2025.