Contrast Ratio Checker
Check the contrast ratio between two colours and see instantly whether they pass WCAG AA and AAA.
Contrast ratio
1.00:1
—
- AA · normal textneeds 4.5:1 Fail
- AA · large textneeds 3:1 Fail
- AAA · normal textneeds 7:1 Fail
- AAA · large textneeds 4.5:1 Fail
- UI & graphicsneeds 3:1 Fail
Large text — 24px bold heading
Normal body text at 16px. The quick brown fox jumps over the lazy dog.
Button / UI componentNearest accessible text colour
#000000 How it works
Enter any two CSS colours — hex, rgb(), hsl() or a named colour like
rebeccapurple — and the contrast ratio between them is calculated instantly using
the official WCAG 2.1 relative-luminance formula. The ratio runs from 1:1 (identical colours)
to 21:1 (pure black on pure white). WCAG level AA needs at least 4.5:1 for normal text and 3:1
for large text (24px, or 18.66px when bold) and for user-interface components such as button
borders and icons; level AAA raises that to 7:1 and 4.5:1.
The live preview shows your pair as real text and as a UI element, and when the pair fails AA the checker suggests the closest accessible colour by nudging only the lightness — so your hue and saturation stay intact. Semi-transparent colours are blended over the background before the ratio is computed, exactly as a browser would paint them. Everything runs in your browser with plain JavaScript: no uploads, no accounts, no ads.
Frequently asked questions
What is a good contrast ratio for accessibility?
WCAG level AA requires at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px when bold). The same 3:1 minimum applies to user-interface components and meaningful graphics such as button borders and icons. Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Ratios run from 1:1 (two identical colours) up to 21:1 for pure black on pure white, so aiming for 7:1 or better gives you comfortable headroom.
How do I check the color contrast between two colors for WCAG AA?
Paste your text colour and your background colour into the two fields above — hex, rgb(), hsl() and named colours all work — and the ratio updates as you type. The badges show at a glance whether the pair passes AA and AAA for normal text, large text and UI components, and the preview panel renders real heading text, body text and a button in your colours so you can judge readability yourself.
What should I do if my brand colors fail the contrast check?
When a pair fails AA, this checker suggests the nearest accessible text colour by adjusting only the lightness, keeping the original hue and saturation so the colour still reads as your brand. Click "Use this colour" to apply it. Other options are to reserve the low-contrast colour for large headings or decorative elements, which only need 3:1, or to darken the background instead of the text.