WCAG Color Contrast Checker
Your data never leaves your browserCheck WCAG 2.1 contrast ratios for AA and AAA, normal and large text. Live preview plus accessible color suggestions.
The quick brown fox jumps over the lazy dog
Small text sample (14px regular)
Contrast Ratio
21.00:1
Accessible tint/shade palette (based on foreground hue)
Share this tool
Found it useful? Help a fellow developer discover it.
Color contrast and accessibility
Low contrast between text and its background is one of the most common accessibility failures on the web. Users with low vision, color blindness, or anyone reading in bright sunlight or on a low-quality display all benefit from sufficient contrast. WCAG 2.1 defines three levels: A, AA, and AAA. The AA level requires a 4.5:1 ratio for normal text and 3:1 for large text. It is the legally enforceable minimum under the ADA, Section 508, and the European EN 301 549 standard. The AAA level is stricter at 7:1 and 4.5:1, and is recommended where possible. This tool computes the contrast ratio using the WCAG relative luminance formula and instantly shows pass or fail badges for every threshold. The accessible palette below the result uses the same hue as your foreground color. It generates nine tints and shades, so you can pick a passing alternative without starting over.
WCAG 2.1 contrast thresholds
| Level | Normal text | Large text | UI components |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | N/A |
Large text: 18pt (24px) regular, or 14pt (18.66px) bold.
Frequently Asked Questions
What is a good contrast ratio?
WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Aim for AA as a minimum baseline, and push for AAA where design allows.
What counts as large text?
Large text is defined as 18pt (approximately 24px) at normal weight, or 14pt (approximately 18.66px) at bold weight. Below those sizes the stricter AA and AAA normal-text thresholds apply.
Does this send my colors anywhere?
No. All contrast calculation happens locally in your browser using the WCAG relative luminance formula. No data is transmitted.
Why does my color pass AA but not AAA?
AAA is a stricter standard, requiring 7:1 instead of 4.5:1. To bridge the gap, darken the foreground color or lighten the background. The palette section below the checker suggests shades that reach AA on a white background.
Does this cover WCAG 3.0 or APCA?
This checker uses WCAG 2.1 contrast ratios, which are the current legal and enforcement standard. WCAG 3.0 introduces the APCA algorithm but is still a working draft. WCAG 2.1 AA is the safe target for production work today.
Related Tools
HEX / RGB / HSL Color Converter
Convert colors between HEX, RGB, and HSL formats instantly.
CSS Formatter
Format, beautify, and minify CSS code online. Shows byte reduction percentage on minify.
CSS Gradient & Box-Shadow Generator
Generate linear, radial, and conic CSS gradients and layered box-shadows with a live preview. Copy ready-to-use CSS.
SVG Optimizer
Optimize and minify SVG in your browser. Strip metadata, round precision, and export as SVG, data URI, or Base64. See bytes saved.