Why Color Contrast Matters
Insufficient contrast between text and background makes your content unreadable for low-vision users, older readers and anyone on a bright screen. The web accessibility standard WCAG ties this contrast to a measurable ratio. This tool computes the contrast ratio of your two colors and shows whether it passes WCAG 2.1's AA and AAA thresholds for normal and large text.
WCAG Thresholds
- AA — normal text: at least 4.5:1. The baseline web content should meet.
- AA — large text: at least 3:1 (18.66px bold or 24px regular and above).
- AAA — normal text: at least 7:1. The highest accessibility level.
- AAA — large text: at least 4.5:1.
How It Is Calculated
The contrast ratio is derived from the relative luminance of the two colors and ranges from 1:1 (no contrast) to 21:1 (black on white). This tool uses WCAG's official relative-luminance formula, so the result is directly comparable to the standard. When building your color scheme, use our Color Palette Generator. For accessible, fast, modern interfaces, see our web design service.