Color contrast checker

What is a Color Contrast Checker?

Text that does not stand out from its background is hard to read for everyone and impossible for many people with low vision. The Web Content Accessibility Guidelines (WCAG) define a contrast ratio between foreground and background colours, from 1:1 (identical) to 21:1 (black on white). This checker calculates that ratio and tells you which WCAG levels it meets.

How to use it

  1. Enter the text colour and the background colour as hex, RGB or HSL.
  2. Read the contrast ratio.
  3. Check the pass or fail results for AA and AAA, for normal and large text.
  4. Adjust the colours until they pass the level you need.

WCAG 2.x requirements

  • AA normal text: at least 4.5:1.
  • AA large text (24 px regular or 18.66 px bold and above): at least 3:1.
  • AAA normal text: at least 7:1.
  • AAA large text: at least 4.5:1.
  • UI components and graphics (borders, icons, focus indicators): at least 3:1.

How the ratio is calculated

Each colour's relative luminance L is computed from its linearised RGB values: L = 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (L1 + 0.05) / (L2 + 0.05), with L1 the lighter colour.

Examples

  • Grey #767676 on white: 4.54:1, the lightest grey that passes AA for body text.
  • Grey #999999 on white: 2.85:1, fails AA even for large text.
  • White on brand blue #2563EB: 5.17:1, passes AA.

Frequently Asked Questions

What contrast ratio do I need for WCAG AA?

4.5 to 1 for normal text and 3 to 1 for large text and user interface components.

What counts as large text?

Text of at least 18 point (24 CSS pixels) regular weight, or 14 point (about 18.66 CSS pixels) bold.

Does contrast apply to placeholder text and disabled buttons?

Placeholder text should meet contrast requirements. Disabled controls are exempt, but should still be recognisable.

Why does yellow on white fail even though it is bright?

Contrast depends on the difference in luminance. Yellow and white are both very light, so their ratio is low.

You May Also Need