DEVELOPER TOOL
Color Contrast Checker
Check whether a text and background color pair meets WCAG contrast rules.
Sample text on this background
Contrast ratio
—
About this tool
Check whether a foreground (text) and background color pair meets the WCAG accessibility contrast guidelines. Enough contrast makes text readable for people with low vision or color blindness — and is required for many accessibility compliance standards.
Frequently asked questions
- What's the difference between AA and AAA?
- AA is the standard WCAG conformance level, requiring a 4.5:1 ratio for normal text (3:1 for large text). AAA is a stricter, enhanced level requiring 7:1 for normal text (4.5:1 for large text).
- What counts as "large text"?
- WCAG defines large text as 18pt (24px) or larger, or 14pt (18.66px) bold or larger — large text gets a lower contrast requirement since it's easier to read at low contrast.
- How is the ratio calculated?
- Using the WCAG relative luminance formula for each color, then comparing the lighter and darker luminance values — the result ranges from 1:1 (no contrast) to 21:1 (black on white).