Color Contrast Accessibility Checker

WCAG 1.4.3 (Contrast Minimum, Level AA) requires that text and images of text have a contrast ratio of at least 4.5:1 against their background. Large text (18pt or 14pt bold and above) has a reduced requirement of 3:1. WCAG 1.4.6 (Contrast Enhanced, Level AAA) raises the bar to 7:1 for normal text and 4.5:1 for large text. These criteria exist because approximately 300 million people worldwide have color vision deficiency, and millions more have low vision conditions that make low-contrast text difficult or impossible to read. The WebAIM Million study consistently finds contrast failures on over 83% of home pages, making it the single most prevalent accessibility violation on the web.

Insufficient contrast affects far more users than just those with diagnosed visual disabilities:

• Low vision: Over 246 million people worldwide have moderate to severe vision impairment. Low-contrast text may be completely invisible to them
• Color vision deficiency: 8% of men and 0.5% of women have some form of color blindness. Color combinations like red/green or blue/yellow can be indistinguishable
• Aging: Contrast sensitivity declines naturally with age. By age 80, most people need 3x more contrast than a 20-year-old
• Environmental factors: Bright sunlight, glare on screens, and dim lighting all reduce effective contrast for every user

Beyond accessibility, contrast directly impacts readability and conversion rates. Studies show that improving text contrast can increase reading speed by up to 20% for all users, not just those with disabilities.

The most frequent contrast failures include:

• Light gray text on white: <p style="color: #999999"> on a white background gives only a 2.85:1 ratio — fix with color: #595959 (7.0:1) or at minimum color: #767676 (4.54:1)
• Placeholder text: <input placeholder="Enter email" style="color: #aaa"> — placeholders often fail contrast. Use ::placeholder { color: #666; }
• Disabled states: While WCAG exempts "inactive" UI components, many implementations incorrectly apply this exemption to elements that are still informational
• Text over images: <div style="background-image: url(...)"><h1>Title</h1></div> — use a semi-transparent overlay: background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(...)
• Brand colors: Many brand palettes were designed without accessibility in mind. A common fix is creating an "accessible palette" with adjusted lightness values

CompliScan uses axe-core's contrast analysis engine to evaluate every text element on your page against its computed background color. The scanner handles complex scenarios including CSS gradients, background images, opacity, and overlapping elements. Each violation reports the exact contrast ratio, the foreground and background colors detected, and the minimum color adjustment needed to meet AA or AAA requirements. Our AI engine generates specific CSS fixes — for example, suggesting the nearest accessible color that preserves your brand identity. CompliScan tests against both WCAG 1.4.3 (AA) and 1.4.6 (AAA), so you can choose your target level. Note that automated tools catch most contrast issues but may miss text rendered on complex backgrounds or dynamically colored elements — supplement with manual spot checks. Try a free scan to see how many contrast issues your site has.