Color Contrast Checker
Check WCAG AA and AAA contrast ratios for any foreground and background color combination. Covers normal text, large text, and UI components.
How the contrast check works
The checker works out the relative luminance of both colors with the sRGB formula from WCAG, then divides the lighter value plus 0.05 by the darker value plus 0.05. The result runs from 1:1 when both colors are the same to 21:1 for black on white.
Normal text passes AA at 4.5:1 and AAA at 7:1. Large text, which WCAG defines as at least 18 point or 14 point bold, passes AA at 3:1 and AAA at 4.5:1. User interface components get the 3:1 check from WCAG 2.1, which covers borders, icons and focus indicators against the colors next to them.
When a pair fails AA for normal text, the checker keeps the hue and saturation of the text color and tries darker and lighter versions until one reaches 4.5:1. That color appears as a suggestion you can click to apply.
Frequently asked questions
What's the difference between AA and AAA?
AA is the minimum contrast level in WCAG: 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level, with 7:1 for normal text and 4.5:1 for large text.
Does 'large text' mean a big font size?
WCAG counts text as large from 18 point, or from 14 point when it is bold. In CSS pixels that is 24px, or about 18.7px bold. Anything smaller has to reach the normal text ratio.
Why does a pair shown as 4.50:1 fail?
WCAG treats 4.5:1 as an exact threshold, so 4.499:1 does not pass. The checker rounds the ratio to two decimals on screen but tests the exact value, so a pair that rounds up to 4.50:1 can still fail.
Do logos and disabled buttons need enough contrast?
No. WCAG makes an exception for text in logos, for text on inactive controls such as a disabled button, and for incidental text like a street sign in a photo.