Color Contrast Made Simple (Hit AA Without Wrecking Your Palette)

Why contrast matters (and helps SEO)

• Clearer text → longer sessions and fewer bounces.

• Accessible controls → higher conversions in forms and checkout.

• Predictable, legible UI → better Core Web Vitals and overall UX quality.

UK readers: we use “color” in code and “colour” in copy—same thing, same standard.

The AA numbers (what “good” looks like)

• Body text: 4.5:1 contrast ratio (AA).

• Large text (≥24px regular or ≥19px bold): 3:1.

• UI components (buttons, inputs, toggles) and focus outlines: clear contrast against adjacent colours.

• Logos/decorative text: not required—but keep them legible for brand trust.

Keep it simple: aim for 4.5:1 for text, and make active/focus states obvious.

A fast, three-step workflow

1) Audit tokens, not pages

List your primary colours, text colours, backgrounds, borders, and state colours. Check common pairs (text on background, button text on button, link on background, focus ring on background).

2) Fix the outliers

Nudge light text darker or dark backgrounds lighter; adjust saturation before hue to preserve brand feel.

3) Lock in states

Define hover, active, and focus styles with clear contrast deltas so users can see and feel change.

Adjusting colours without breaking your brand

• Protect brand hue: change lightness and saturation, keep hue steady.

• Introduce a neutral ink colour for body text (not pure black).

• Build a scale (100–900) around your brand primaries so you can pick accessible pairs across light/dark sections.

• Document don’ts (e.g., don’t place 400 on 300 for body copy).

Buttons, links, and focus states (don’t forget states!)

• Buttons: ensure both button face vs surrounding and text vs button face meet AA.

• Links: use colour and an additional cue on hover/focus (underline, weight).

• Focus: use a high-contrast outline (not just a faint glow). Keep it visible against any background.

Images, gradients, and overlays

• Text over imagery? Add a tinted overlay or a solid/blurred background.

• Avoid busy areas; use safe zones in hero images.

• Gradients: confirm the lowest contrast along the gradient still meets AA.

Test the real world (including dark mode)

• Check at 100% and 200% zoom.

• Test reduced motion and dark mode—adjust tokens for each scheme.

• Validate on an average phone screen in low light (where contrast issues surface fastest).

Copy-paste colour tokens (CSS variables)

:root {
  /* Neutral text & surfaces */
  --ink-900: #111318;   /* primary text */
  --ink-700: #2b2f36;   /* headings/strong */
  --surface-0: #ffffff; /* base background */
  --surface-50: #f7f8fa;/* subtle sections */

  /* Brand (example: Indigo) */
  --brand-700: #3a47b8; /* buttons/links (meets AA on white) */
  --brand-600: #4b5ce0; /* hover */
  --brand-50:  #eef0ff; /* subtle backgrounds */

  /* Actions & states */
  --success-700: #1f7a46;
  --warning-700: #a66000;
  --danger-700:  #a2252b;

  /* Focus ring (high contrast) */
  --focus-ring: 2px solid #111318; /* visible on light surfaces */
}

/* Examples */
body { color: var(--ink-900); background: var(--surface-0); }
a { color: var(--brand-700); text-decoration: underline; }
a:focus { outline: var(--focus-ring); outline-offset: 3px; }
button:focus-visible, input:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

Replace colours with your brand values, then verify key pairs with a contrast checker.

Quick contrast cheat sheet

• Body copy on light background: ink-900 on surface-0 ≥ 4.5:1

• Button label on brand button: white on brand-700 ≥ 4.5:1

• Link on white: brand-700 ≥ 4.5:1 (underline on hover/focus)

• Focus ring on light background: dark ring (≥ 3:1 against adjacent background)

• Text on tinted panels: check the lightest part of the tint

How Adjustable helps (without “magic fixes”)

Adjustable adds user-side controls so more people can comfortably read and act on your site:

• Contrast modes and text-size controls for low-vision users.

• Reading aids and motion preferences to reduce fatigue.

• Easy install, visible inclusivity—great for Marketing & Website Owners who need results fast.

Ship contrast-safe tokens, then add Adjustable for personalisation that lifts engagement.
Try Adjustable

FAQs

Do I need AAA contrast?
AA is the common target. Use AAA selectively (e.g., tiny text over busy areas) if your audience benefits.

Can I keep brand colours?
Yes—tune lightness/saturation, keep the hue. Provide accessible variants for UI and text.

What about logos and hero text on images?
Logos aren’t required by WCAG, but legibility matters. Add overlays or use solid panels for hero text.

Next steps

• Audit current token pairs on your top 5 pages.

• Fix the outliers and lock in hover/active/focus states.

• Re-test on mobile and dark mode.

• Add Adjustable to give visitors control while you continue refining.