Fix low colour contrast (WCAG 1.4.3)

Text must have a contrast ratio of at least 4.5:1 against its background (3:1 for large text, 18.66px bold or 24px regular and up).

Why it matters

Roughly 1 in 12 men and 1 in 200 women have some form of colour-vision deficiency, and low-vision users of all kinds struggle with faint text. Insufficient contrast is the single most common automated WCAG failure on the web.

How to fix it

Darken the text or lighten the background until the ratio passes. Check the pair with a contrast tool and remember that placeholder text, disabled states, and text over images count too.

/* Fails: 3.8:1 */
.button { color: #fff; background: #3087ce; }

/* Passes: 4.6:1 */
.button { color: #fff; background: #2470b4; }

Related guides

• Add text alternatives to images (WCAG 1.1.1) 1.1.1 Non-text Content
• Give links a discernible name (WCAG 2.4.4) 2.4.4 Link Purpose / 4.1.2 Name, Role, Value
• Give buttons a discernible name (WCAG 4.1.2) 4.1.2 Name, Role, Value
• Label every form field (WCAG 1.3.1 / 4.1.2) 1.3.1 Info and Relationships / 4.1.2 Name, Role, Value

These guides cover automated checks (~30–40% of WCAG criteria). A full audit also needs manual review.