All tools · 🎨 Design
🎨 Color Contrast Checker
Pick a foreground and background color. We compute the WCAG contrast ratio and tell you if it passes AA (4.5:1) and AAA (7:1) for normal text, plus AA Large (3:1) for large text.
Examples
#000 on #fffRatio 21:1 · AAA pass#9ca3af on #fffRatio 2.84:1 · Fails AA — too light#1e3a8a on #fef3c7Ratio ~10:1 · AAA passFrequently asked questions
What are WCAG AA and AAA?
Web Content Accessibility Guidelines. AA (4.5:1 normal text, 3:1 large) is the standard most sites and laws target. AAA (7:1 / 4.5:1) is stricter, sometimes required for government / healthcare.
What counts as "large text"?
Roughly 18pt+ regular or 14pt+ bold (24px / 18.66px). Large text has a relaxed contrast requirement because it is easier to read.
Does this apply to icons?
WCAG 2.1+ requires 3:1 contrast for "non-text" UI elements (icons, focus indicators, form borders) against their background.
Why is contrast different from "looks good"?
Designers often choose subtle text colors that pass eyeball tests but fail people with low vision or older eyes. WCAG is a numerical floor, not a ceiling.
About this tool
Color Contrast Checker runs entirely in your browser using standard Web APIs. No data is sent to any server. The source for this tool is in our public GitHub repository.
Related tools
- 🎨 Color Converter — Convert between HEX, RGB, HSL, and HSV color formats. Includes a color picker.
- 🌈 CSS Gradient Generator — Build linear and radial CSS gradients with live preview. Copy the CSS.
- 🎨 CSS Box Shadow Generator — Visual box-shadow editor with live preview. Copy CSS instantly.
Why this tool
vs typical free web-tool sites
| 1vw | Typical free site | |
|---|---|---|
| Price | Free | Free |
| Signup required | No | Often (for premium features) |
| Ads inside the tool | No | Yes (banner + video) |
| Data sent to server | No (browser-only) | Yes (inputs analyzed for ads) |
| Total tools | 96 | Often <20 or scattered across sites |
| Bookmarkable URL per tool | Yes | Mixed |
| Loads in under 1s | Yes (static) | Often slow (ad tracking) |
| Multilingual | EN / ES / PT / FR / DE | Usually EN only |
| Open source | Yes | No |