Color Contrast Checker

Color contrast is the difference in perceived luminance between foreground (text) and background colors. High contrast makes text readable for all users — including those with low vision, color blindness, or who view screens in bright sunlight. Poor contrast is one of the most common accessibility failures on the web. WCAG 2.1 defines minimum contrast ratios that websites and apps must meet to be considered accessible.

WCAG 2.1 defines four pass thresholds: Normal text AA — 4.5:1 minimum (the standard requirement for most websites). Normal text AAA — 7:1 (enhanced, highest readability). Large text AA — 3:1 (easier threshold for big type). Large text AAA — 4.5:1. AA compliance is the standard legal and industry requirement; AAA is recommended for maximum accessibility.

WCAG defines large text as 18pt (24px) or larger for regular (normal) weight, and 14pt (approximately 18.67px) or larger for bold text. Large text has a lower contrast threshold because the increased size makes characters more legible even at reduced contrast. When in doubt, target the normal text ratio for safety.

Adjust the lightness of your colors rather than the hue. Darken your text color or lighten your background (or vice versa) until the ratio hits 4.5:1 for AA compliance. Working in HSL color space lets you increase contrast without shifting brand hues. You can also increase font size or weight so the content qualifies as large text, which only requires a 3:1 ratio for AA.

Color contrast is not a direct Google ranking factor, but it is flagged in Lighthouse accessibility audits, which are part of the Core Web Vitals tooling used in PageSpeed Insights. Beyond that, poor contrast increases bounce rates and lowers time-on-site — behavioral signals that do indirectly influence rankings. Accessible, readable design also has legal implications under the ADA, EN 301 549, and similar regulations in many countries.