Code Fix Guide

How to Fix Low Color Contrast in CSS

Low color contrast is the most widespread accessibility violation, found on over 80% of all websites. Light gray text on white backgrounds, thin fonts, and poor color choices make content unreadable for millions of users with low vision.

Common Errors and How to Fix Them

Gray text on white — only 2.85:1 ratio (needs 4.5:1)
Problem
color: #999999;
background-color: #ffffff;
Fix
color: #595959;
background-color: #ffffff;
/* Ratio: 7.0:1 — passes AA and AAA */
White text on green button — only 2.3:1 ratio
Problem
color: #ffffff;
background-color: #5cb85c;
Fix
color: #ffffff;
background-color: #2d6b2d;
/* Ratio: 7.1:1 — passes AA */
Light gray on light gray — only 1.6:1 ratio
Problem
color: #b0b0b0;
background-color: #f5f5f5;
Fix
color: #555555;
background-color: #f5f5f5;
/* Ratio: 5.9:1 — passes AA */

Why This Matters

Low contrast violates WCAG 1.4.3 (Contrast Minimum). Normal text needs at least 4.5:1 contrast ratio, and large text (18pt+ or 14pt bold+) needs 3:1. This affects approximately 300 million people with color vision deficiencies and billions more with situational impairments (bright sunlight, old monitors).

Related WCAG Criteria

1.4.3Contrast (Minimum)

Level AA — Perceivable

1.4.11Non-text Contrast

Level AA — Perceivable

Find All Your Accessibility Issues Automatically

ADA CodeFix scans your website for WCAG 2.1 AA violations and generates AI-powered code fixes — not vague descriptions, actual code you can copy-paste.

Scan Your Site Free
No credit card required AI-generated code fixes

More Code Fix Guides

How to Fix Missing Alt Text on Images

Missing alt text is the #1 accessibility violation. Learn how to add proper alt attributes to images with code examples and an automated scanner.

How to Fix Missing Form Input Labels

Form fields without labels are inaccessible to screen reader users. Learn how to properly label inputs with HTML label elements and ARIA attributes.

How to Fix Empty Links and Buttons

Empty links and buttons with no accessible text are a top accessibility violation. Learn how to add descriptive text and ARIA labels with code examples.

How to Fix HTML Heading Structure

Skipped heading levels and missing H1 tags hurt both SEO and accessibility. Learn how to create a proper H1-H6 hierarchy with code examples.

How to Fix Keyboard Navigation and Focus Issues

If your website can't be navigated with a keyboard, it's inaccessible. Learn how to fix tab order, focus styles, keyboard traps, and custom components.

How to Fix ARIA Attribute Errors

Incorrect ARIA attributes can make accessibility worse, not better. Learn the most common ARIA mistakes and how to fix them with proper code examples.