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.
Key statistics
Low contrast text was found on 83.6% of the top one million website home pages in 2024.
Source: WebAIM Million
Approximately 300 million people worldwide have color vision deficiency.
Source: Colour Blind Awareness
How to fix it
-
1
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.
-
2
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.
-
3
Avoid conveying information through color alone — pair color cues with icons, underlines, or text labels so color-blind users can still understand the content.
-
4
Update your CSS variables or design tokens at the theme level so fixes propagate site-wide rather than patching individual elements.
-
5
Re-run an accessibility scan after making changes to confirm all contrast issues are resolved.
Code example
<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
Related topics
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 displays when an image fails to load and is used by search engines to understand image content. Every non-decorative image on a page must have meaningful alt text that conveys the image's purpose or information.
Focus Management
Focus management controls which element on the page currently receives keyboard input, indicated by a visible focus ring or outline. Proper focus management means interactive elements show a clear visual indicator when focused, focus moves logically through the page, and focus is programmatically moved to the right place when content changes (e.g., opening a modal should move focus into it).
Title 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 in search engine results pages (SERPs). It is widely considered the single most important on-page SEO element because it directly tells search engines and users what the page is about.
Scan your site for accessibility issues
eiSEO automatically detects and helps you fix issues like this across your entire site.