Insufficient Color Contrast

Overview

Text must have a contrast ratio of at least 4.5:1 against its background (3:1 for large text ≥18pt or bold ≥14pt).

The Problem

This pattern is inaccessible — avoid it.

/* Contrast ratio 2.1:1 — fails */
.button { color: #999; background: #fff; }
.caption { color: #aaa; background: #f5f5f5; }

The Fix

Use this accessible pattern instead.

/* Contrast ratio 4.5:1+ — passes */
.button { color: #595959; background: #fff; }
.caption { color: #767676; background: #f5f5f5; }

Step-by-step

1. 1

   Use a contrast checker (WebAIM, browser DevTools, or ADAGuard) to measure text/background pairs.

2. 2

   For normal text (<18pt, not bold): minimum ratio 4.5:1.

3. 3

   For large text (≥18pt or bold ≥14pt): minimum ratio 3:1.

4. 4

   Adjust the foreground or background color until the ratio is met.

5. 5

   Don't rely on color alone to convey meaning — use icons, patterns, or labels too.

Framework Notes

How to apply this fix in your stack.

// Use CSS custom properties so contrast is checked in one place
const theme = { colorText: '#595959', colorBg: '#ffffff' };

FAQ