Color & Contrast

Colour is not enough

Visual design and accessibility are not opposites. With attention to contrast, meaning, and labelling, a beautiful interface can also be usable by everyone.

Contrast ratios

WCAG measures contrast as a ratio between text and background colour, ranging from 1:1 (identical) to 21:1 (black on white). The thresholds:

• Normal text — at least 4.5:1 (AA), 7:1 (AAA).
• Large text (18px+ or 14px+ bold) — at least 3:1.
• UI components and graphical objects — at least 3:1 against adjacent colours.

Don't rely on colour alone

About 1 in 12 men have some form of colour blindness. A form field that turns only red on error is invisible to red-green colour-blind users. Always pair colour with a second cue: an icon, text label, or pattern.

/* good: colour + icon + text */
.error { color: #d32f2d; }
.error::before { content: "⚠ "; }
<p class="error">Email is required</p>

Accessible forms

Every field needs a programmatically associated label:

<label for="name">Full name</label>
<input id="name" name="name" required>

Placeholders are not labels — they vanish on input and often fail contrast. Error messages should link to their field with aria-describedby so screen readers announce them, and they should describe the fix, not just "Invalid."

Respect user settings

Support prefers-color-scheme and prefers-reduced-motion. Users who request less motion may experience vestibular disorders — disable large animations for them.

Test with more than your eyes. Run an automated audit (Lighthouse, axe), then navigate the page with the keyboard and a screen reader. Automated tools catch about 30% of issues; the rest need a human.