---
title: "Make text easy to read · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/color-contrast
updated: 2026-10-20
licence: "All rights reserved"
---

# Make text easy to read

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Give text at least 4.5:1 contrast against its background, and large text at least 3:1. Give control borders, focus rings and meaningful icons at least 3:1. Meet this in light and dark mode.
- How: These are WCAG criteria 1.4.3 and 1.4.11 (AA). Large text means at least 24 CSS px, or about 18.7 CSS px in bold. Pick colour tokens that pass in both themes, and test every text and background pair you use. Disabled controls and logos are exempt.
- Check: axe `color-contrast` passes in light and dark mode. A unit test computes every token pair from the stylesheet and fails below the thresholds.
- Measured: On a reference site, a paler grey for secondary text took Lighthouse Accessibility from 100 to 96.

Example:

```css
:root {
  color-scheme: light dark;
  /* #1f2328 on white is about 15.9: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); }
```

**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`.

- Next: [Let the browser pick readable text colour](https://agentwranglers.se/playbook/website/accessibility/contrast-color)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)