WCAG Color Contrast Checker
Enter a foreground (text) and background color and get the exact WCAG 2.1 contrast ratio, with pass/fail results for AA and AAA, normal and large text, plus a live preview.
The quick brown fox jumps over the lazy dog
Normal-size body text sample, for comparison.
常见问题
How is the contrast ratio calculated?
Using the real WCAG 2.1 relative luminance formula on each color's sRGB channels, then comparing the lighter and darker luminance as (L1 + 0.05) / (L2 + 0.05). The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).
What's the difference between AA and AAA?
AA is the standard WCAG conformance level most accessibility requirements (including many legal standards) are based on: 4.5:1 for normal text, 3:1 for large text. AAA is a stricter, optional level: 7:1 for normal text, 4.5:1 for large text.
What counts as "large text"?
WCAG defines large text as 18pt (24px) regular weight or larger, or 14pt (about 18.66px) bold or larger. Large text gets a lower contrast requirement because bigger, bolder strokes stay legible at lower contrast.
Can I enter colors as RGB instead of hex?
Yes, both the foreground and background fields accept hex (#3b82f6) or rgb(59, 130, 246) formats, or you can use the color picker next to each field.