Color Contrast and Web Accessibility
WCAG (Web Content Accessibility Guidelines) requires a minimum contrast ratio between text and its background to ensure readability for users with low vision. WCAG 2.1 AA (the legal standard in many jurisdictions) requires 4.5:1 for normal text and 3:1 for large text (18px+ regular or 14px+ bold). AAA requires 7:1 and 4.5:1 respectively.
Our contrast checker calculates the relative luminance of any two colors (entered as HEX, RGB, or HSL) and shows the contrast ratio, plus a clear pass/fail indicator for both AA and AAA thresholds. It shows the color pair in context so you can verify it visually, not just numerically.
Contrast failures are among the most common accessibility violations and are legally actionable under ADA (USA), EN 301 549 (EU), and similar regulations. Check all text-on-background color combinations in your design system before launch — especially light gray text on white backgrounds, which often fails even though it looks fine to most viewers.
Tips
- Light gray on white is the most common contrast failure in modern design. Check
#767676on#ffffff— it just barely passes AA at 4.54:1. - Large text (18px+) has a lower threshold — 3:1 for AA. This gives more design freedom for headings.
- Use a color with contrast > 7:1 for body text — it covers AAA and provides good readability for low-vision users.
- Don't rely only on color to convey information — users with color blindness need additional cues (icons, patterns, text labels).