Color Contrast & Accessibility

Color Contrast & Colors

Low contrast = unreadable text, especially for users with low vision. Contrast matters!

The rule of thumb

Text must stand out from its background. WCAG want ~4.5:1 for normal text, ~3:1 for large.

• Dark text on light background: good.
• Light gray (#ccc) on white: bad!
• White text on yellow: painful.

Contrast philosophy

Two approaches:

1. color background-color strongly contrast.
2. Use dark text on light backgrounds or light text on dark.

body {
  color: #222;
  background: #fff;
}

Using modern colors

Use logical color-contrast selectors. Start with a named color then give the fallback.

color-scheme

Tell the browser your page supports dark mode:

:root {
  color-scheme: light dark;
  --bg: #fff;
  --text: #111;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --text: #eee;
  }
}
body {
  background: var(--bg);
  color: var(--text);
}

Check with a tool

Browsers' dev tools have contrast checkers. All good colors pass, gray fails, and the theme correctly inverts with the custom-property trick above.

TL;DR

• Contrast is whether text vs background differ enough.
• Aim for high contrast; avoid light-gray-on-white!
• Link contrast with prefers-color-scheme + CSS variables for dark mode.
• Verify in dev tools.