Color contrast

Color contrast is one of the most fundamental accessibility requirements. If text or controls don’t stand out enough from the background, they become unreadable in bright light, for users with low vision, or for those with color blindness.

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure legibility and equal access. Meeting these standards improves usability for everyone, not just people with disabilities.

Guidelines for designing with accessible color contrast.

Meet WCAG minimum contrast ratios

• Normal text (below 18px / 1.125rem regular and 14px / 0.875rem bold): at least 4.5:1
• Large text (18px / 1.125rem + or 14px / 0.875rem bold): at least 3:1
• Non-text UI components and graphical objects: at least 3:1

References:

• WCAG 1.4.3: Contrast minimum
• Contrast checker – WebAIM

Test with real tools, not by eye

Use tools like WebAIM Contrast Checker, Stark, or Axe to ensure compliance. Human perception is unreliable.

Design for different states

Verify contrast for hover, focus, active, and disabled states. Disabled elements often fail contrast and become unreadable.

References:

• Button states: communicate interaction – Nielsen Norman Group

Avoid relying only on color for meaning

Contrast must be paired with other indicators (for example: icons, labels, underline for links). This ensures accessibility for users with color blindness.

References:

• WCAG 1.4.1: Use of color

Consider context and environment

Text that meets WCAG can still be hard to read in sunlight or on poor screens. When in doubt, aim above minimum contrast ratios.

References:

• ‍Inclusive design patterns – Heydon Pickering

Frequent mistakes when applying color contrast.

Using light gray text on white backgrounds

Often fails contrast requirements, especially in body text.

Ignoring non-text elements

Icons, focus outlines, and form borders must also meet contrast standards.

Not testing interactive states

Buttons and links may meet contrast only in default state but fail on hover or disabled states.

Relying only on brand colors without adjustment

Many brand palettes need adjustments for accessibility. Blindly following them harms usability.

Key takeaways for color contrast.

• Always meet WCAG minimum contrast ratios for text and UI elements.
• Test with tools, not by eye.
• Check contrast across all interactive states.
• Don’t rely only on color to convey meaning.
• When possible, exceed minimum ratios for better readability.

Accessible color contrast is not just a requirement, it’s the foundation of inclusive, usable design.

Scenario 1: Text on colored backgrounds

Use when designing UI elements where text appears on a colored surface: buttons, badges, banners, status indicators, or any non-white background.

You are a UX-focused design agent. Design accessible color contrast for text on colored backgrounds in [context: status badges / CTA buttons / notification banners].

Rules:
- WCAG minimum contrast ratios:
  Normal text (below 18px regular / 14px bold): 4.5:1
  Large text (18px+ regular / 14px+ bold): 3:1
  UI components and icons: 3:1 against adjacent colors
- Never use color alone to communicate meaning — always pair with icon or text label:
  Error: red + error icon + error text
  Success: green + checkmark + success text
  Status badges: color + text label ("Active", "Pending")
- Check all interactive states: default, hover, focus, pressed, disabled
- Test with a tool — never by eye:
  Chrome DevTools Accessibility panel
  WebAIM Contrast Checker
  Figma plugins: Stark, Able
- Common failures to check:
  Light gray text on white (#999 on #fff = 2.85:1 — fails)
  White text on yellow or light green
  Placeholder text in inputs
  Disabled element text

Accessibility:
- Focus outlines: minimum 3:1 against adjacent background
- Run contrast checks in both light and dark mode

Constraints:
- Never test contrast by eye
- Never rely on color alone to convey state or meaning
- Never skip contrast checks for hover, focus, and disabled states

Scenario 2: Dark mode contrast

Use when designing or auditing color contrast for dark mode: colors that pass in light mode often fail when the background changes.

You are a UX-focused design agent. Design accessible color contrast for a product that supports both light and dark mode.

Rules:
- Never invert light mode colors for dark mode — design separate dark mode tokens
- Dark mode targets (same WCAG requirements):
  Normal text: 4.5:1 against dark background
  Large text: 3:1
  UI components: 3:1
- Pure white (#ffffff) on dark backgrounds causes eye strain — use off-white (#f0f0f0) at 17:1+ contrast
- Surface hierarchy in dark mode (use subtle elevation, not borders):
  Page background: darkest (e.g. #121212)
  Card surface: slightly lighter (e.g. #1e1e1e)
  Elevated surface: lighter still (e.g. #2a2a2a)
- Semantic colors (error red, success green) often need adjustment in dark mode — test all of them
- Test method: switch OS to dark mode and audit the full application

Accessibility:
- Run Lighthouse and axe in both light and dark mode separately

Constraints:
- Never invert light mode colors without verifying contrast
- Never use pure black (#000) with pure white (#fff) — too harsh
- Never skip testing semantic colors in dark mode