Color Contrast & Accessibility

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.

1. Use dark text on light backgrounds or light text on dark.

css
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:

css
: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.