WCAG Color Contrast Checker
Compare two opaque sRGB HEX colors against WCAG 2.2 text contrast thresholds.
Choose two colors
Use #RGB or #RRGGBB. Alpha, names, RGB functions and gradients are not supported.
Color preview
Pair contrast ratio
-
Display uses three decimals; threshold decisions use the unrounded value.
4.5:1
3:1
7:1
4.5:1
Large text means at least 18 pt (24 CSS px), or 14 pt bold (about 18.67 CSS px). The preview uses 24 px bold and 16 px normal. Check the actual font and context on the page.
A passing pair does not establish whole-page WCAG compliance. This tool does not inspect your site, opacity, layered backgrounds, images, hover/focus states, font rendering or non-text component requirements.
Threshold example and sources
Synthetic pair #777777 on #ffffff is about 4.478:1: below AA normal text, above AA large text. Rounding to 4.5 would conceal this difference.
Compare candidate brand colors, then inspect the actual rendered page and interaction states.
Review your web design scope
Include color choices, interaction states and release checks in the design brief.
ContactTOOL GUIDE
Why is color contrast more than a design question?
This tool calculates the contrast ratio from the relative luminance of two opaque sRGB HEX colors and compares it with the WCAG 2.2 text contrast thresholds. It does not decide whole-site accessibility conformance or conversion impact.
It accepts #RGB and #RRGGBB; it does not resolve alpha or layered backgrounds. The ratio is displayed with three decimals, but the threshold decision uses the unrounded value. The full report includes the normalized colors, luminance values, and all four threshold results.
How to use it
- Enter #RGB or #RRGGBB values for the foreground and background. Invalid input clears the previous result.
- Review the AA and AAA rows for normal and large text; check the real font size and weight separately.
- For failing combinations, try darker or lighter variations before abandoning the brand color entirely.
When to use it
- Check accessibility for CTA buttons, form fields, and small body text.
- Balance aesthetics and legibility in social media creatives.
- See which combinations in a corporate color palette cause problems on the web.
This tool processes supplied data in your browser. Text and inputs are analyzed on your device without being sent to a server.
Frequently asked questions
What is the difference between AA and AAA?
The result here covers text contrast only: normal text is compared against 4.5:1 for AA and 7:1 for AAA; large text against 3:1 for AA and 4.5:1 for AAA. Other WCAG criteria are not reviewed.
Is lower contrast acceptable for large text?
Large text is at least 18 pt, or 14 pt bold. Making small text bold is not enough on its own to use the large text threshold. Review the font and the real page context separately.
Should I replace my brand color if it fails?
Usually not. Darker or lighter shades of the same color, or different background combinations, can often reach an accessible result.