WCAG Contrast Checker
Pattern ToolsCheck color contrast ratios for WCAG AA and AAA accessibility compliance
Sample text — large (18px+ bold)
Normal body text (14px). The quick brown fox jumps over the lazy dog.
Small text (12px). Hard to read at low contrast.
Contrast Ratio
17.40:1
| Level | Normal text | Large text (18px+ / 14px+ bold) | Required ratio |
|---|---|---|---|
| WCAG AA | PASS | PASS | 4.5:1 / 3:1 |
| WCAG AAA | PASS | PASS | 7:1 / 4.5:1 |
About WCAG Contrast Checker
Calculates the WCAG 2.1 contrast ratio between a foreground and background color and reports pass/fail for both AA and AAA compliance levels. Input colors via hex codes or the native color picker. The contrast ratio and compliance status update live as you adjust either color. WCAG defines two compliance levels. AA (the legal minimum in most countries) requires 4.5:1 for normal text and 3:1 for large text (18pt+ regular or 14pt+ bold). AAA requires 7:1 for normal text and 4.5:1 for large text — this level is the target for maximum accessibility but is not required by most regulations. The tool shows a live preview of both normal and large text in your chosen color combination so you can see the actual readability rather than just a number. Contrast ratio is calculated using the WCAG relative luminance formula: each channel's sRGB value is linearized, combined with perceptual weighting (0.2126R + 0.7152G + 0.0722B), and then the ratio is (lighter luminance + 0.05) / (darker luminance + 0.05). White on black is the maximum at 21:1. When a combination fails AA, the tool suggests the nearest adjusted foreground shade that passes, saving you from manually iterating through color values.
How to Use WCAG Contrast Checker Online
- Paste your data into the input field above
- The result appears instantly in the output area
- Click "Copy" to copy the result to your clipboard
Check color contrast ratios for WCAG AA and AAA accessibility compliance. Runs 100% client-side — no data is sent to any server.