WCAG Contrast Checker
Check the WCAG 2.x contrast ratio between a text (foreground) color and a background color. Accepts hex colors (#RGB, #RRGGBB, with or without #) and reports the exact ratio plus pass/fail for WCAG AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large).
Input
Hex color of the text. Accepts #RGB, #RRGGBB, with or without the #.
Hex color behind the text. Accepts #RGB, #RRGGBB, with or without the #.
Output
| Metric | Value |
|---|---|
| No data yet | |
Guides
The WCAG Contrast Checker measures the color contrast between text and its background and tells you, instantly, whether that pairing meets the Web Content Accessibility Guidelines (WCAG 2.x). Low-contrast text is one of the most common accessibility failures on the web — it's hard to read for people with low vision, color-blindness, or simply anyone squinting at a phone in bright sunlight. This tool gives you the exact contrast ratio and a clear pass/fail verdict for every WCAG level, so you can fix problems before they ship.
How to use it
- Enter your foreground (text) color as a hex value. You can type
#RRGGBB, the three-digit shorthand#RGB, and the#is optional —#1a1a2e,1a1a2e, and#333are all accepted. - Enter your background color the same way.
- Read the results. The tool shows the contrast ratio (from
1:1for identical colors up to21:1for pure black on pure white) and marks each WCAG threshold as Pass or Fail.
Results update as you type. You can copy the summary or download the full compliance table as a CSV.
What the ratios mean
WCAG defines two conformance levels and two text sizes. "Large text" means roughly 18pt (24px) regular or 14pt (18.66px) bold and above:
- AA — Normal text: at least 4.5:1. This is the baseline most sites should meet.
- AA — Large text: at least 3:1.
- AAA — Normal text: at least 7:1. The enhanced level, recommended for body text where possible.
- AAA — Large text: at least 4.5:1.
How the ratio is calculated
The tool uses the official WCAG 2.x math, not an approximation. Each sRGB channel is converted to linear light with the piecewise gamma formula, combined into a relative luminance (L = 0.2126·R + 0.7152·G + 0.0722·B), and the ratio is (L_lighter + 0.05) / (L_darker + 0.05). Black on white therefore comes out to exactly 21:1, the theoretical maximum.
Does this cover WCAG 3.0 / APCA?
No. This checker implements the current, widely-adopted WCAG 2.x contrast model, which is what accessibility audits and legal standards reference today. The newer APCA algorithm proposed for WCAG 3.0 is still a draft and uses a completely different scale.
Is my data sent anywhere?
No. All calculations run locally in your browser — the colors you enter never leave your device.