Agent Wranglers

Accessibility Required

Make text easy to read

Give text at least 4.5:1 contrast against its background, and 3:1 for large text and controls, in light and dark mode.

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

Pick colour tokens that pass 4.5:1 for body text in both themes. Check every text and background pair you use.

Example

:root {
  color-scheme: light dark;
  /* #1f2328 on white is about 15.8:1; #d6d9ea on #1f2328 is about 11.3:1 */
  --text: light-dark(#1f2328, #d6d9ea);
  --bg: light-dark(#ffffff, #1f2328);
}
body { color: var(--text); background: var(--bg); }

How to check

axe or Lighthouse color-contrast passes in light and dark mode.

Measured

On a reference site, a paler grey for secondary text took Lighthouse Accessibility from 100 to 96.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/color-contrast.