WCAG Contrast Checker

Approximately 300 million people worldwide have some form of color vision deficiency. Low contrast between text and background makes content difficult or impossible to read for these users—and for anyone viewing a screen in bright sunlight, at an angle, or on a low-quality display.

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by as many people as possible. Meeting these standards is not just good practice—it is often a legal requirement for government, education, and enterprise websites.

A contrast ratio of at least 4.5:1 is required for normal text (WCAG AA), while large text (18pt or 14pt bold) needs at least 3:1. For enhanced accessibility (WCAG AAA), normal text requires 7:1 and large text requires 4.5:1.

Start with black on white. The highest possible contrast is black (#000000) on white (#ffffff)—a ratio of 21:1. From there, soften as needed for your design while staying above the minimum thresholds.

Dark mode is not automatically accessible. Light text on dark backgrounds can have just as poor contrast as dark text on light backgrounds. Always check both modes.

Never rely on color alone. Even with perfect contrast, color should never be the only way to convey information. Use icons, labels, and patterns alongside color.

Test with real content. A color pair may pass the ratio check but still look wrong with your actual font size, weight, and line height. Always test with real content in context.

Level AA is the minimum standard for most websites and apps. It ensures text is readable for the majority of users, including those with moderate vision loss. This is the level required by most accessibility laws and regulations.

Level AAA is the enhanced standard. It ensures text is readable for users with severe vision loss. While not always legally required, it demonstrates a commitment to inclusive design and makes your content accessible to the widest possible audience.