DocomintWCAG Contrast Checker
Check the WCAG contrast ratio between a text color and background color for accessibility compliance.
WCAG 2.1's contrast-ratio formula (relative luminance of the lighter color plus 0.05, divided by the darker color plus 0.05) is exact and testable, but nobody computes it by eye — a combination that looks readable can still fail the 4.5:1 minimum for normal text. This computes the real ratio and checks it against all four WCAG thresholds (AA/AAA × normal/large text) at once, with a live text-on-background preview so you can see, not just read, the result.
Example: Dark slate text (#111827) on a white background hits roughly 17.7:1 — comfortably clearing even the strictest AAA threshold — while the same text at 60% opacity gray (#9ca3af) drops to around 2.5:1, failing every WCAG level.
How it works
- Pick a foreground (text) color and a background color
- The WCAG relative-luminance contrast ratio is computed on your device
- See pass/fail against AA and AAA, for both normal and large text
Frequently asked questions
What contrast ratio do I need to pass WCAG?
4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold) to meet WCAG AA — the level most accessibility audits and legal requirements target. AAA raises those to 7:1 and 4.5:1 respectively.
What's the difference between WCAG AA and AAA?
AA is the standard, widely-required compliance level (4.5:1 normal text, 3:1 large text). AAA is a stricter, optional enhanced level (7:1 normal text, 4.5:1 large text) — most sites target AA; AAA is common for government or accessibility-focused products.
Is my color values uploaded anywhere?
No — WCAG Contrast Checker runs entirely in your browser using JavaScript/WebAssembly. Your color values is never sent to a server.