Color Accessibility & Contrast

Colour contrast ensures text is readable for users with low vision or colour blindness. The WCAG guidelines define minimum contrast ratios that every production site should meet.

WCAG Contrast Ratios

AA Normal text: 4.5:1 minimum
AA Large text (18 pt / 14 pt bold): 3:1 minimum
AAA Normal text: 7:1 minimum

Do Not Rely on Color Alone

Error states, status indicators, and required-field markers must use more than colour — add icons, labels, or patterns for users who cannot distinguish colours.

prefers-contrast Media Query

The prefers-contrast: more media query lets you serve a high-contrast variant to users who have requested it in their OS settings.

Example

/* High contrast body text — ratio ≈ 12:1 */
body {
    background: #ffffff;
    color: #212121;
}

/* Sufficient contrast for links — ratio ≈ 5.9:1 */
a {
    color: #1558d6;
}

/* Danger colour that passes on white — ratio ≈ 5.1:1 */
.error-text {
    color: #c62828;
}

/* Never rely on colour alone — add an icon */
.field-error {
    color: #c62828;
    border-left: 4px solid #c62828;
}
.field-error::before {
    content: "⚠ ";
}

/* High-contrast mode overrides */
@media (prefers-contrast: more) {
    body {
        background: #000;
        color: #fff;
    }
    a { color: #6af; }
    .btn {
        border: 2px solid #fff;
    }
}

CSS

Full Editor

Pro Tip

Use the browser's DevTools accessibility panel or a tool like the WebAIM Contrast Checker to verify contrast ratios before shipping — aiming for AAA wherever body text is involved is a worthwhile goal.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned