Home › Design Tools › Colour Contrast Checker

Colour Contrast Checker

Check text and background colours against the WCAG contrast levels.

Text colour

Background colour

The quick brown fox jumps over the lazy dog.

Contrast ratio-

Results

AA, normal text (4.5:1)-

AA, large text (3:1)-

AAA, normal text (7:1)-

AAA, large text (4.5:1)-

Large text means 24px or more, or 18.66px or more when bold. The thresholds are from WCAG 2.2 success criteria 1.4.3 (Contrast, minimum) and 1.4.6 (Contrast, enhanced). Non-text elements such as icons and form borders need 3:1 under criterion 1.4.11.

How it works

Each colour's relative luminance is calculated from its red, green and blue values, linearised as WCAG defines it. The contrast ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05). Everything runs in your browser.