Insufficient Color Contrast

Insufficient color contrast occurs when the difference in luminance between text and its background is too low for comfortable reading. WCAG Success Criterion 1.4.3 (Level AA) requires a minimum contrast ratio of 4.5:1 for normal-sized text (below 18pt or 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). These thresholds are based on vision research and ensure readability for users with moderately low vision.

Light gray text on a white background is the most common example -- a color like #999 on #fff produces a contrast ratio of only 2.85:1, far below the 4.5:1 minimum. But the problem extends to every color combination on a site: link colors, placeholder text in form fields, button labels, navigation items, error messages, and text overlaid on images or gradient backgrounds.

This is not an edge case that only affects a small group. According to the WHO, approximately 2.2 billion people worldwide have a vision impairment, and over 300 million experience color vision deficiency. Even users with perfect vision struggle with low-contrast text under common real-world conditions: bright sunlight, low-quality displays, or nighttime reading with reduced screen brightness.

For users with low vision, text with insufficient contrast is literally unreadable without assistive tools. They may need to zoom in, change browser colors, or use a screen magnifier -- adding friction and fatigue to every page visit. For users with color blindness (affecting 8% of men and 0.5% of women), certain color combinations that appear contrasted to typical vision become nearly identical.

Older users are disproportionately affected as well. After age 60, the eye's lens yellows and contrast sensitivity naturally decreases. A site with low-contrast text effectively excludes seniors, an increasingly large segment of internet users.

Beyond disability, poor contrast hurts all users. Outdoors on a sunny day, even someone with perfect vision cannot read light gray text on a white background. Low contrast directly impacts engagement, conversion rates, and time on site -- it is both an accessibility issue and a business problem.

Scrutia evaluates the contrast ratio of every text element on your pages by computing the effective foreground and background colors from the full CSS cascade. It accounts for opacity, background images, gradients, and overlapping elements. Each contrast failure is reported with the exact ratio, the WCAG threshold it violates, and a suggested color adjustment that meets the requirement while staying close to your original design.