Design Tools
Contrast Checker
Pick a foreground and background colour and instantly see the WCAG 2.1 contrast ratio plus pass/fail badges for AA (normal and large text) and AAA (normal and large text). Swap colours with one click and copy the verdict.
Your input is processed locally in your browser. It is not uploaded to Dueneo.
Loading Contrast Checker…
How to use
- 1
Pick a foreground colour
Use the colour square or type a HEX value. This is the text colour you want to test.
- 2
Pick a background colour
Use the second colour square or HEX field. This is the surface the text sits on.
- 3
Read the ratio and verdicts
The right panel shows the live contrast ratio and four pass/fail badges: AA normal, AA large, AAA normal and AAA large.
- 4
Swap or copy
Use Swap to flip foreground and background (handy when iterating on a palette). Use Copy to copy a text summary of the verdict.
Common use cases
- Verify that body text meets AA (4.5:1) against a coloured background before shipping.
- Check whether large display headings meet AAA (7:1) on a hero section.
- Audit a brand colour palette for accessible text pairings.
- Test button text against hover-state backgrounds to avoid losing contrast on interaction.
Limitations
- Only solid HEX colours are supported. Semi-transparent foregrounds and backgrounds are not evaluated.
- WCAG large-text thresholds assume 18pt regular or 14pt bold. The tool does not measure font size — it only reports whether the ratio meets the threshold.
- The ratio uses the WCAG 2.1 sRGB formula. HDR or wide-gamut displays are not accounted for.
- This tool checks text contrast only — non-text contrast (icons, borders) has separate WCAG 1.4.11 thresholds that are not evaluated here.