WCAG Color Contrast Checker
Check if your foreground and background colors meet WCAG 2.1 accessibility standards. Shows AA and AAA pass/fail for normal and large text.
Runs in your browser. No data leaves your device.
Frequently Asked Questions
How does the Color Contrast Checker work?
The tool converts both colors to their relative luminance using the WCAG 2.1 formula: linearize each sRGB channel (apply gamma correction), then compute L = 0.2126*R + 0.7152*G + 0.0722*B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. This ratio is then compared against WCAG AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) thresholds.
What contrast ratio do I need for WCAG compliance?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). WCAG AAA is stricter at 7:1 for normal text and 4.5:1 for large text.
What is the difference between AA and AAA?
AA is the standard compliance level required by most accessibility laws. AAA is the enhanced level for maximum readability. Most organizations target AA as the minimum, with AAA as a best practice.
How do I fix a failing contrast ratio?
Make the text color darker or the background lighter (or vice versa). Small adjustments often bring a failing combination into compliance. The tool shows the exact ratio so you can see how close you are.