Contrast Checker
Check colour contrast against WCAG AA and AAA. See a live sample, then copy the pair.
Presets
Normal text
The quick brown fox jumps over the lazy dog.
Aa — 16px body copy on this pair.
Large text
The quick brown fox
Aa — 24px bold, treated as large.
UIButtonIcons and controls need 3:1.
Contrast
18.58:1
WCAG AA
Meets WCAG AA
Normal text, 4.5:1
WCAG AA large
Meets WCAG AA large
Large text, 3:1
WCAG AAA
Meets WCAG AAA
Normal text, 7:1
UI 3:1
Meets UI 3:1
Non-text contrast
Worked example
Black text on white is 21:1 and passes AA and AAA. White on #767676 is about 4.6:1, which passes AA for normal text and fails AAA.
FAQ
- What ratios are the pass marks?
- AA normal text is 4.5:1, AA large text is 3:1, AAA normal text is 7:1, and UI / non-text is 3:1. These follow WCAG 2.
- What counts as large text?
- WCAG treats 18pt regular, or 14pt bold, as large. This page shows a 16px sample and a 24px bold sample.
- Will you change my colours for me?
- Only if you choose “Use … for AA”. That darkens or lightens the text colour until it meets 4.5:1.