WCAG Contrast Checker — AA/AAA Ratio Online
Pick foreground and background colors to see the WCAG contrast ratio and AA/AAA pass/fail for normal and large text. Steps: choose or type HEX, click Check, read the ratio and badges, swap or try suggestions. Example: #767676 on #ffffff ≈ 4.54:1 — passes AA for normal text, fails AAA for normal text. Colors stay in your browser.
How it works
Pick a foreground and background with the color picker or type a HEX code. The page converts sRGB to relative luminance, computes the contrast ratio, and shows Pass/Fail badges for AA and AAA (normal and large text). Swap to reverse the pair, copy a text summary, or apply a suggested tweak when contrast is too low.
Rules you should expect
WCAG contrast is based on relative luminance — not hue alone. Use this checklist when a ratio looks surprising.
- Relative luminance L comes from sRGB channels after the WCAG linearization curve. Contrast ratio = (Llighter + 0.05) / (Ldarker + 0.05).
- Thresholds: AA normal text 4.5:1, AA large text 3:1, AAA normal text 7:1, AAA large text 4.5:1. One ratio drives all four badges on this page.
- Only opaque sRGB HEX (#RGB or #RRGGBB) is supported here. Invalid HEX shows an error; identical foreground and background give 1:1 and fail every level.
- Privacy: color values are processed locally in this tab — nothing is sent to a server.
Example
Load the sample: foreground #767676 on background #ffffff gives about 4.54:1. AA normal text passes (needs 4.5:1), AA large text passes (needs 3:1), AAA normal text fails (needs 7:1), AAA large text passes (needs 4.5:1). Swap colors to see how the ratio flips.
Good fits
- UI design: verify body copy and labels against a brand background before handoff.
- Buttons and chips: check white-on-color or color-on-white pairs for AA normal or large text.
- Dark mode: swap light/dark surfaces and confirm secondary text still clears 4.5:1 or 3:1 for large type.
Frequently asked questions
What are the WCAG contrast thresholds?
AA normal text needs at least 4.5:1. AA large text (18 pt regular or 14 pt bold and up) needs 3:1. AAA normal text needs 7:1; AAA large text needs 4.5:1. This page shows all four badges from one ratio.
What counts as large text?
Large text is easier to read at lower contrast. WCAG treats text as large when it is at least 18 pt (24 px) regular, or 14 pt (18.66 px) bold. The preview shows both a large and a normal line so you can judge both thresholds.
Do my colors leave the browser?
No. Contrast math runs entirely in your browser. Check the Network panel — your color values are not uploaded.
How should I use the color suggestions?
When the pair falls below 4.5:1, the tool may suggest a darker or lighter foreground or background that reaches AA for normal text. Suggestions mix toward black or white on the side that failed — starting points, not brand-perfect palettes.
How does this relate to brand color tokens?
Use this page to validate any foreground/background pair. For a full brand palette with semantic tokens, open the brand color token pack tool; you can also sample colors from a photo with the color-from-image tool first.
Related tools
Questions or feedback
Something unclear, broken, or missing? Draft a message below — we read every note about these tools.