WCAG Color Contrast Ratios: The Numbers Developers Need to Know

Question

Color contrast is one of the most common accessibility failures. The fix is simple once you know the thresholds.

The Thresholds

| Use Case | Level AA | Level AAA |

|---|---|---|

| Normal body text | 4.5:1 | 7:1 |

| Large text (18px+ or 14px+ bold) | 3:1 | 4.5:1 |

| UI components (borders, icons) | 3:1 | — |

| Decorative elements | Exempt | Exempt |

Level AA is legally required in most jurisdictions (ADA, EN 301 549, Equality Act). AAA is best practice.

Common Failures

• Light grey #999 on white #fff → 2.85:1 → Fails (very common mistake)
• Fix: darken to #767676 for 4.54:1 (AA pass)
• White on medium blue #4285f4 → 3.07:1 → Fails for body text
• Fix: use darker blue #1558d6 → 5.37:1

Testing Tools

• Figma: Select text layer → right panel shows contrast ratio
• Chrome DevTools: Accessibility panel → contrast indicator
• Browser tools: axe DevTools, WAVE extensions

For checking any specific hex or RGB pair against WCAG standards, a free contrast checker gives the exact ratio and AA/AAA pass/fail verdict instantly.

Key Rule

Always test dark mode separately — a colour combination that passes in light mode can fail in dark mode. Design to AA as a baseline, aim for AAA on body text.

Originally published at https://snappytools.app/color-contrast-checker/