WCAG Color Contrast Checker
Enter foreground and background HEX colors to calculate relative luminance and contrast locally. This checker follows WCAG 2.2 Success Criteria 1.4.3 and 1.4.6.
Use opaque sRGB #RGB or #RRGGBB values. Alpha and transparency are not included.
- Contrast ratio
- Foreground relative luminance
- Background relative luminance
Normal text
AA
AAA
Large text
AA
AAA
A single color pair cannot prove that an entire page conforms to WCAG or legal accessibility requirements.
A QUICK WALKTHROUGH
How to use this tool
- Enter a foreground and background color as #RGB or #RRGGBB.
- Review the live swatch, relative luminance, and contrast ratio.
- Use the normal-text and large-text AA/AAA results as a focused design check.
WCAG 2.2 thresholds
Normal text passes AA at 4.5:1 and AAA at 7:1. Large text passes AA at 3:1 and AAA at 4.5:1.
Opaque sRGB colors only
The checker accepts #RGB and #RRGGBB colors. It does not support alpha, transparency, gradients, images, or compositing.
A focused check, not a conformance claim
One color pair cannot prove that an entire page conforms to WCAG or satisfies legal accessibility requirements. Review every relevant state, component, text size, font weight, focus indicator, and context.
GOOD TO KNOW
Common questions
Which HEX formats are accepted?
Use three-digit #RGB or six-digit #RRGGBB sRGB HEX values. Alpha and eight-digit HEX are not accepted.
What does relative luminance mean?
It is the WCAG linear-light luminance value computed after decoding each sRGB channel, using the WCAG coefficients for red, green, and blue.
Does a passing result prove accessibility?
No. It checks one opaque foreground/background pair against text contrast thresholds. A complete WCAG or legal review needs the whole page and all relevant states.