What this tool does
The Color Contrast Checker calculates the WCAG 2.1 contrast ratio between two colors and tells you which accessibility targets the pair clears. Type or paste two hex values, see the ratio (e.g. 4.83:1), and read the five pass/fail pills, AA normal, AA large, AAA normal, AAA large, and AA non-text/UI.
It's the same math any browser devtools accessibility checker uses. The point of a separate tool is fast iteration when you're picking a palette, not after-the-fact auditing.
The contrast formula
WCAG defines contrast as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's relative luminance and L2 is the darker color's. Relative luminance is computed per channel:
1. Convert sRGB 0–255 to 0–1. 2. Linearize: if the channel ≤ 0.03928 use c / 12.92, else use ((c + 0.055) / 1.055) ^ 2.4. 3. Combine: L = 0.2126 R + 0.7152 G + 0.0722 B.
The ratio always falls between 1:1 (identical colors) and 21:1 (pure black on pure white). The tool shows the ratio rounded to two decimals; the pass/fail check uses the unrounded value so a 4.499 doesn't mistakenly clear 4.5.
The five WCAG targets
| Target | Min ratio | What it covers |
|---|---|---|
| AA normal | 4.5:1 | Body text under 18pt (or 14pt bold) |
| AA large | 3.0:1 | Headings 18pt+ (or 14pt+ bold) |
| AAA normal | 7.0:1 | The strict bar for body text |
| AAA large | 4.5:1 | The strict bar for headings |
| AA UI | 3.0:1 | Icons, focus rings, form-control borders, button outlines |
AA normal (4.5:1) is the floor that most production work targets. AAA is desirable but rarely achievable for full color systems. The UI/non-text target (3:1) was added in WCAG 2.1, if your focus rings or icons fail that, you're probably failing in the wild.
How to use it
1. Type two hex values in the foreground and background fields. Three-, six-, and eight-digit hex are all accepted (e.g. #abc, #a1b2c3, #a1b2c3ff). 2. Or pick from screen with the EyeDropper button (Chromium browsers only, the button hides itself in browsers that don't support the API). 3. Read the ratio strip and the five pass-pills. Failures are flagged in red, passes in green. 4. Hit Swap to flip foreground and background, useful when you've drafted a dark-on-light pair and want to see the inverse. 5. Apply suggested fix when the pair fails AA-normal. The tool nudges the foreground toward black or white in HSL space until it crosses 4.5:1, then offers the new hex. The shift is minimal, you keep the hue.
Common gotchas
- Anti-aliased text effectively reduces contrast. WCAG measures the pure colors. In practice, text on a busy gradient or an image background can fail even when the spec colors pass. Use the live preview as a sanity check.
- Opacity is not contrast. A 50%-opacity black on white is a different effective color than
#808080. Use the actual rendered color, or compute the alpha-blended result before pasting. - Wide-gamut colors (P3, Rec 2020) aren't supported by WCAG 2.1. The formula assumes sRGB. P3 colors are flattened to sRGB before the math runs, close enough for most cases, but not formally accurate.
- Brand colors that fail at 4.5:1 are often ok at 3:1 for headlines. If you're stuck, check whether the text is "large" by WCAG's definition (18pt+ regular or 14pt+ bold).
Privacy
The hex values, the computed ratio, and the saved color pairs all stay in your browser. The "recent" list is in localStorage and can be cleared from your browser settings. Nothing is uploaded, logged, or persisted on a server.