What the Contrast Ratio Measures
The contrast ratio between two colors measures how distinguishable they are. It's calculated from the relative luminance of the foreground and background colors:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the lighter luminance and L2 is the darker.This formula (from WCAG 2.1) produces a value from 1.0 (identical colors, e.g., white on white) to 21.0 (pure black on pure white). Higher is better.
WCAG Contrast Requirements
- AA — Normal text: 4.5:1 minimum. This is the legal minimum for body text in most accessibility regulations.
- AA — Large text: 3:1 minimum. Large text = 18pt+ or 14pt+ bold. Large text is inherently easier to read, so the threshold is lower.
- AAA — Normal text: 7:1 minimum. Enhanced contrast for maximum readability. Required by few regulations but best practice for accessibility-first design.
- AAA — Large text: 4.5:1 minimum.
UI components and graphical objects (icons, chart elements, focus indicators) need 3:1 minimum against adjacent colors per WCAG 2.1's Non-text Contrast criterion.
Common Contrast Failures
- Gray text on white: #999 on #FFF = 2.85:1 — fails AA. Designers love light gray text but it's unreadable for low-vision users.
- White text on bright colors: White on orange or yellow almost always fails. Light backgrounds need dark text.
- Placeholder text: Often styled too light. Placeholder text in form fields should meet AA contrast or be replaced with visible labels.
- Disabled state text: Grayed-out text that falls below 3:1. Consider using opacity or strikethrough instead of low contrast for disabled states.
How to Fix Failing Colors
If a color combination fails: (1) Darken the darker color — just a few percent darker often crosses the threshold. (2) Lighten the lighter color. (3) Increase font size to qualify for the lower large-text threshold. (4) Increase font weight (bold text is easier to read). (5) Invert the design — dark backgrounds with light text can hit high contrast more easily than light gray on white.
Check Contrast Instantly
Use ToolsVito's Contrast Ratio Checker to test any two colors against WCAG 2.1 AA and AAA standards. See pass/fail results for normal text, large text, and UI components. All checked in your browser with live color pickers.