Checking contrast...
Pick your foreground and background colors above, then click Check Contrast.
What Is a Color Contrast Ratio?
A contrast ratio is a number that describes how different two colors appear from each other in terms of brightness. It is calculated by comparing the relative luminance of the lighter color against the darker one. The ratio ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast).
The Web Content Accessibility Guidelines (WCAG) 2.1 set minimum contrast thresholds that websites must meet to be accessible to users with low vision or color deficiencies. These guidelines are referenced in legal frameworks including the Americans with Disabilities Act (ADA), the European Accessibility Act (EN 301 549), and Section 508 in the US federal sector.
Failing to meet contrast requirements is one of the most common accessibility violations. The WebAIM Million report consistently finds that over 80% of home pages have at least one contrast failure. This tool lets you check any color pair in seconds.
WCAG 2.1 Contrast Requirements
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA | 4.5:1 | 3.0:1 | 3.0:1 |
| AAA | 7.0:1 | 4.5:1 | No requirement |
Large text means at least 18pt (24px) at normal weight, or at least 14pt (18.67px) at bold weight. Text in logos and decorative images is exempt. WCAG 2.2 (October 2023) did not change these contrast thresholds — they remain the same as WCAG 2.1.
How Relative Luminance Is Calculated
Relative luminance is a perceptual measure of how bright a color appears to the human eye. The WCAG formula accounts for the non-linear way our eyes perceive brightness (gamma encoding) by first linearizing each RGB channel:
Step 1 — linearize each channel (R, G, B in range 0 to 1):
if channel ≤ 0.04045: linear = channel / 12.92
else: linear = ((channel + 0.055) / 1.055) ^ 2.4
Step 2 — weighted sum using human eye sensitivity:
L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear
The green channel carries the most weight (0.7152) because human eyes are most sensitive to green light. Blue carries the least (0.0722). Once you have the relative luminance (L) of both colors, the contrast ratio is:
ratio = (L_lighter + 0.05) / (L_darker + 0.05)
The +0.05 offset prevents division by zero and represents the luminance contribution of the display surround. This formula is defined in WCAG 2.1 Success Criterion 1.4.3.
Common Contrast Failures and How to Fix Them
Light gray on white
#9ca3af on #ffffff → 2.85:1 (Fail)
Fix: darken to #6b7280 (4.63:1 AA) or use #4b5563 (7.53:1 AAA)
Placeholder text
Browsers default to gray placeholders that often fail
Fix: override with a color that passes 4.5:1 against the input background
Teal or brand color on white
Many brand teals are too light: #14b8a6 on #ffffff → 2.44:1 (Fail)
Fix: use #0f766e (4.55:1 AA pass) or darken further for AAA
Disabled button states
Disabled controls are exempt from contrast rules, but tooltips explaining why a button is disabled are not
Fix: ensure any explanatory text meets AA even if the button itself is exempt