Color Contrast Checker
Pick foreground and background colors to compute the WCAG contrast ratio from relative luminance. See pass/fail badges for AA and AAA at normal and large text sizes, plus a live preview swatch with sample text.
Examples
#1a1a1a on #ffffff
≈ 17.4:1 — passes AA and AAA
How it works
The ratio follows the WCAG 2 formula. Each colour’s red, green and blue values are converted to linear light, weighted (red 0.2126, green 0.7152, blue 0.0722) and added up to give its relative luminance. The ratio is then (lighter + 0.05) ÷ (darker + 0.05), which runs from 1:1 for identical colours to 21:1 for black on white.
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
WCAG counts text as large from 24px regular or about 18.66px bold. Swapping foreground and background gives the same ratio. Colours are entered as 3- or 6-digit hex with no transparency, so a semi-transparent colour has to be flattened onto its background before you test it.
How to use Color Contrast Checker
Why use this tool
Frequently asked questions
It uses the WCAG formula based on relative luminance of the two colors.
AA requires 4.5:1 for normal and 3:1 for large text; AAA requires 7:1 for normal and 4.5:1 for large text.
Found a bug or have an idea?
ToolOrbit is actively developed — feedback directly shapes what gets built next.
Send feedback