Color Contrast
What is color contrast and why does it matter?
What is color contrast?
Color contrast is the difference in luminance between foreground text and its background. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). Insufficient contrast makes content difficult or impossible to read for users with low vision, color blindness, or those viewing screens in bright sunlight.
Color contrast is the measurable difference in luminance between foreground text and its background, required by WCAG 2.1 to meet a minimum ratio of 4.5:1 for normal text and 3:1 for large text, ensuring readability for users with low vision or color blindness.
Why does color contrast matter?
Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low-contrast text forces all users to strain their eyes, increasing bounce rates and reducing time on page. Search engines increasingly factor user experience signals into rankings, so poor contrast indirectly harms your SEO performance.
Low contrast text was found on 83.6% of the top one million website home pages in 2024.
Approximately 300 million people worldwide have color vision deficiency.
How to fix it
- Use a contrast checker tool (such as the WebAIM Contrast Checker or the browser DevTools accessibility panel) to audit every text-and-background combination on your site.
- Ensure body text meets at least a 4.5:1 contrast ratio against its background, and large text (18px bold / 24px regular) meets at least 3:1.
- Avoid conveying information through color alone — pair color cues with icons, underlines, or text labels so color-blind users can still understand the content.
- Update your CSS variables or design tokens at the theme level so fixes propagate site-wide rather than patching individual elements.
- Re-run an accessibility scan after making changes to confirm all contrast issues are resolved.
Bad seed, good seed.
<div style="background: #ffffff; color: #d3d3d3;">This light-gray text on a white background has a contrast ratio of only 1.6:1, failing WCAG AA.</div><div style="background: #ffffff; color: #595959;">This dark-gray text on a white background has a contrast ratio of 7:1, passing WCAG AA and AAA.</div>Frequently asked questions
What is the minimum contrast ratio required by WCAG?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text (18px bold or 24px regular and above).
Does color contrast affect SEO rankings?
Not directly, but poor contrast increases bounce rates and decreases engagement, which are user-experience signals that search engines use when evaluating page quality.
How do I check my site's color contrast quickly?
Open Chrome DevTools, go to the Elements panel, select a text element, and look at the contrast ratio in the Styles pane. You can also use browser extensions like axe DevTools or the WAVE toolbar.
Related guides
Image Alt Text
Alt text (the HTML alt attribute) is a short text description of an image that screen readers announce to visually impaired users. It also d...
Read more → AccessibilityFocus Management
Focus management controls which element on the page currently receives keyboard input, indicated by a visible focus ring or outline. Proper...
Read more → SEOTitle Tags
The title tag is the HTML <title> element that defines the page's title in the browser tab and, most importantly, as the clickable headline...
Read more →Scan your site for accessibility issues
Find and fix these issues automatically with eiSEO.
50 pages free · No credit card · Results in under 2 minutes