TooldenTOOLDENDEVELOPERON-DEVICE
Color Contrast Checker
Check whether a foreground and background color meet the WCAG contrast guidelines, for normal and large text, at AA and AAA level.
HOW TO USE
- 1Enter a foreground (text) color and a background color, in hex (#rrggbb, #rgb) or rgb(r, g, b) form. Alpha values in rgba() are ignored.
- 2The contrast ratio is computed per the WCAG formula, from 1:1 (identical colors) up to 21:1 (black on white).
- 3The table shows whether the pair passes WCAG AA and AAA, for normal and large text.
- 4Large text means at least 18pt (about 24px) regular or 14pt (about 18.66px) bold.
EXAMPLE
INPUT
Foreground #767676 on background #ffffff
OUTPUT
Contrast 4.54:1 — passes AA for normal text, fails AAA
FAQ
How is the contrast ratio calculated?
Each color is converted to a relative luminance value per the WCAG formula (0.2126R + 0.7152G + 0.0722B on gamma-corrected channels). The ratio is (L₁ + 0.05) / (L₂ + 0.05), where L₁ is the lighter of the two.
What are the WCAG requirements?
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text — 18pt regular or 14pt bold — needs 3:1 for AA and 4.5:1 for AAA.
What do AA and AAA mean?
They are the two conformance levels of the WCAG guidelines: AA is the common target for websites, and AAA is the stricter level that maximizes accessibility.
Does the checker support transparency?
No — alpha values are ignored. The ratio is only well-defined for solid colors. To check a semi-transparent color, blend it against its background first.
Is my data sent anywhere?
No. All calculations run entirely in your browser — your colors never leave your device.