Color Tools
Pick, convert and manipulate colors.
Pick two colors
The quick brown fox jumps over the lazy dog
Contrast ratio
14.68:1
AA — normal text (4.5:1)
AA — large text (3:1)
AAA — normal text (7:1)
AAA — large text (4.5:1)
Check WCAG color contrast online
Dev Color Tools calculates the exact WCAG contrast ratio between any two colors, and tells you which accessibility levels (AA/AAA) they pass — so your text stays readable for everyone.
Why use this tool
Accurate WCAG math
Uses the official W3C relative luminance and contrast ratio formulas — the same math accessibility auditors use.
AA & AAA pass/fail
Instantly see whether your color pair passes each WCAG 2.1 level, for both normal and large text.
Live preview
See your actual text and background colors rendered together, not just the numbers.
No upload required
Contrast is calculated entirely in your browser.
How it works
- 1Pick or type a text color and a background color.
- 2Read the contrast ratio and see which WCAG levels it passes.
- 3Adjust colors until you hit at least AA for your use case.
Frequently asked questions
Good to know
- WCAG AA requires 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold).
- WCAG AAA requires 7:1 for normal text, 4.5:1 for large text.
- Runs fully in your browser — nothing is uploaded.