Color Contrast Checker
Enter foreground and background colours and the checker returns the WCAG contrast ratio (1:1 to 21:1) plus pass/fail verdicts against WCAG 2.1 AA and AAA thresholds for normal text, large text and non-text elements. Under the hood it uses the WCAG luminance formula, simple math, but critical for accessibility. Fix failures by nudging lightness until the ratio clears the threshold you need.
How the contrast ratio is calculated
-
1
Enter two colours
Hex, 3 or 6 digits, for both colours. Colour pickers available for each.
-
2
Relative luminance computed for each
L = 0.2126·R + 0.7152·G + 0.0722·B where each channel is linearised from sRGB.
-
3
Contrast ratio
(L_lighter + 0.05) / (L_darker + 0.05). Ratios between 1:1 and 21:1.
-
4
Pass / fail badges
AA (4.5:1 for normal, 3:1 for large/UI), AAA (7:1 for normal, 4.5:1 for large). Large text = ≥18pt regular or ≥14pt bold.
WCAG contrast thresholds
| Content type | AA threshold | AAA threshold |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (≥18pt regular or ≥14pt bold) | 3:1 | 4.5:1 |
| Non-text (UI components, focus rings) | 3:1 | - |
| Incidental text (decorative, disabled, logos) | exempt | exempt |
“Large text” means 18pt+ regular weight (~24px in CSS) or 14pt+ bold (~19px bold).
Example contrasts
| Pair | Ratio | AA normal | AA large | AAA normal |
|---|---|---|---|---|
| Black on white | 21:1 | Pass | Pass | Pass |
| #333 on white | 12.6:1 | Pass | Pass | Pass |
| #666 on white | 5.7:1 | Pass | Pass | Fail |
| #888 on white | 3.5:1 | Fail | Pass | Fail |
| #AAA on white | 2.3:1 | Fail | Fail | Fail |
| White on #1976D2 (Material blue 700) | 4.6:1 | Fail | Pass | Fail |
| White on #2196F3 (Material blue 500) | 3.1:1 | Fail (normal) | Pass | Fail |
Common accessibility pitfalls
- Grey-on-white body text at #999 or lighter, fails AA. Use #767676 or darker for body text on white.
- Blue link on grey: often fails because both colours are mid-luminance.
- White text on brand colour: pass on darker shades (≥ 4.5:1), fail on mid-tone brand colours. Use larger text or darker brand.
- Placeholder text is often low contrast for “hinting”, WCAG still applies if users need to read the placeholder.
- Disabled state: WCAG 2.2 requires 3:1 for disabled text against the control’s background unless the state itself is communicated by another means.
What WCAG doesn’t tell you
- WCAG 2.x uses a formula from 1988. Modern APCA (advanced perceptual contrast algorithm) better reflects perceived readability, but isn’t yet the legal baseline. Bump numbers slightly past WCAG minima to handle APCA and edge cases.
- Contrast isn’t the only accessibility dimension. A 21:1 ratio means nothing if the font is 9px, the line height is cramped, or the colour of meaning is red-green.
Improving a failing pair
- Lighter foreground on dark background, or darker foreground on light.
- Increase font size or weight, large-text threshold is lower.
- Add a background behind text over imagery (overlay, gradient).
- Never fix contrast by fading to a grey that still fails, push until you hit AA.
Re-check after each adjustment, the tool recalculates the ratio live, and a small lightness change can flip a verdict quickly.
Frequently Asked Questions
AA is the legal baseline in most jurisdictions (Section 508 US, EN 301 549 EU) and what most audit tools flag. AAA is aspirational, required only for specific accessibility contexts (educational content for users with low vision). Aim for AA and treat AAA as a bonus.
No, it accepts opaque hex colours only, 3 or 6 digits. Convert RGB or HSL to hex first, or use the colour picker, which always outputs hex.
WCAG 2.1 SC 1.4.11 requires 3:1 contrast for non-text UI components and graphical objects. This applies to focus indicators, input borders, icon-only buttons, and states (hover, active). Check both default and focus states.
Test each mode separately, contrast ratios in light and dark themes are independent. Many light-mode-pass palettes fail in dark mode at the same relative lightness.
Related Tools
HEX Color Picker
Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.
ASCII Table Reference
Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.
Color Palette Generator
Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.
FPS Counter
Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.
JSON Formatter
Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.
Phone Validator
Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.