A color contrast checker compares two colors and reports the contrast ratio — a number that determines whether text is legible against its background according to the WCAG accessibility guidelines. The tool above computes the ratio in your browser; nothing leaves your machine.
How the ratio is computed
The contrast ratio is defined as:
(L₁ + 0.05) / (L₂ + 0.05)
where L₁ is the relative luminance of the lighter color and L₂ is the luminance of the darker color. Ratios run from 1:1 (identical colors) to 21:1 (pure white on pure black). Higher is better contrast.
Relative luminance is a perceptually-weighted brightness derived from sRGB:
- For each of R, G, B (each 0–255), normalize to 0–1.
- Apply the sRGB → linear-RGB transform (a piecewise function — gamma-corrected for most values, linear for the very dark range).
- Combine with the perceptual weights:
L = 0.2126·R + 0.7152·G + 0.0722·B. Green gets the most weight because the human eye is most sensitive to green; blue gets the least.
The full formula is in the WCAG specification.
The thresholds that matter
| Standard | Body text | Large text | UI components |
|---|---|---|---|
| WCAG AA (legal floor in most jurisdictions) | 4.5:1 | 3:1 | 3:1 |
| WCAG AAA (best practice) | 7:1 | 4.5:1 | 3:1 |
“Large text” means 18pt+ (24px) regular weight, or 14pt+ (18.66px) bold. Body text — the regular paragraph type on a page — is held to the higher 4.5:1 bar because smaller letterforms have less area to convey contrast.
UI components (form-field borders, focus indicators, icon buttons that aren’t text) need 3:1 against adjacent colors under WCAG 2.1 SC 1.4.11. This is often the failing criterion on otherwise-accessible designs — a placeholder text gray that meets 4.5:1 against the input background can fail 3:1 against the surrounding page.
Common color pairs and their ratios
| Foreground | Background | Ratio | Passes |
|---|---|---|---|
#000000 | #ffffff | 21:1 | Everything |
#333333 | #ffffff | 12.6:1 | Everything |
#666666 | #ffffff | 5.7:1 | AA body, AAA large |
#777777 | #ffffff | 4.5:1 | AA body (just) |
#888888 | #ffffff | 3.5:1 | AA large only |
#999999 | #ffffff | 2.8:1 | Nothing |
#0066cc | #ffffff | 5.4:1 | AA body, AAA large |
#0066cc | #f0f0f0 | 4.9:1 | AA body, AAA large |
The “lightest gray that still passes AA on white” is around #767676 (4.54:1) — useful as a guideline for muted text.
What contrast doesn’t guarantee
- Color blindness. Two colors with high contrast can still be indistinguishable to a viewer with red-green color blindness if the contrast comes mostly from hue rather than luminance. Test with a simulator (or remove color and check the grayscale image).
- Glare / outdoor viewing. A 4.5:1 contrast that’s fine on a calibrated monitor in an office is much harder to read on a phone in direct sunlight. Designs that target outdoor use should aim higher.
- Anti-aliasing. Sub-pixel rendering and font hinting affect perceived contrast at the edges of glyphs. The contrast formula assumes uniform color regions.
- Surrounding context. A bright element next to dark elements appears even brighter (simultaneous contrast). The formula doesn’t account for this.
APCA — the next thing
The current WCAG contrast formula has known limitations: it doesn’t model font size and weight, and it’s badly behaved for very dark color pairs. APCA (Accessible Perceptual Contrast Algorithm) is the proposed replacement, accepted as the basis for WCAG 3.0. APCA returns a different metric (Lc) that takes font size and weight into account.
WCAG 3.0 is still in working draft as of 2026; the legal-compliance bar for accessibility is still WCAG 2.1 (AA). Designs should currently be evaluated by both. The tool above reports the WCAG 2.1 ratio.
Common pitfalls
- Testing with sample text only. A button label might pass; the disabled-state text might fail. The placeholder text might fail. The error message in red against a pink background might fail. Audit every text/background pair, not just the obvious one.
- Ignoring focus states. Keyboard focus indicators must have 3:1 contrast against the background. Browser default outlines often fail on custom-colored components.
- Light-on-dark with brand colors. Dark theme adoption sometimes ships with under-contrasted accent text. The same brand blue that works on white may fail on dark gray.
- Checking only the main palette. Hover states, active states, and visited link colors all need to pass.
For converting between color notations to find a passing variant of a color, see color converter.