Color Contrast Checker
Check that text stays readable on its background according to the WCAG 2.2 accessibility rules. If the contrast is too low, the tool suggests the closest colour that passes.
Your colours
Accepted formats: #hex, rgb(), hsl() or a CSS colour name. A transparent text colour (#RRGGBBAA) is blended with the background.
Large text: 24 px
Normal 16 px text. The quick brown fox jumps over the lazy dog.
Small 13 px text, like a caption or a footnote.
ButtonWCAG 2.2 compliance
- AA · normal text4.5:1 minimum—
- AA · large text3:1 minimum · 24 px, or 18.66 px bold—
- AAA · normal text7:1 minimum—
- AAA · large text4.5:1 minimum—
- UI components and graphics3:1 minimum · input borders, icons (criterion 1.4.11)—
About colour contrast
The contrast ratio compares the luminance of two colours, from 1:1 (identical) to 21:1 (black on white). The WCAG, used by accessibility laws such as the ADA, Section 508 and EN 301 549, set minimums so that text remains readable for people with low vision, on a screen in sunlight or on an old monitor.
Features
- Contrast ratio computed with the WCAG formula
- Five criteria: AA and AAA for normal and large text, UI components (1.4.11)
- Live preview in large text, normal text, small text and a button
- Suggested fix: the closest text colour reaching AA or AAA, keeping the hue
- All formats: #hex, rgb(), hsl(), CSS names, transparency
WCAG thresholds
- AA, normal text: 4.5:1, the level required in most cases
- AA, large text: 3:1, from 24 px, or 18.66 px bold
- AAA: 7:1 for normal text, 4.5:1 for large text
- UI components: 3:1 for input borders, icons and graphics
How to use
- Step 1: choose the text colour and the background colour (picker or code)
- Step 2: read the ratio and the criteria that pass
- Step 3: if needed, click “Use” to apply the fixed colour
Tips
- Light grey on white is the most common failure: aim for at least #767676 on #FFFFFF
- Check dark mode too: contrasts change completely
- Logos and purely decorative text are exempt
- The ratio is truncated, not rounded: 4.49:1 does not reach 4.5:1
Privacy
All calculations run in your browser: the values you enter are never sent anywhere and we never have access to them.