---
title: "Let the browser pick readable text colour · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/contrast-color
updated: 2026-10-20
licence: "All rights reserved"
---

# Let the browser pick readable text colour

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

- Level: Optional
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Let the browser pick readable black or white text on brand colours with `contrast-color()`, after a fallback you have checked.
- How: Set a safe colour first. Then switch to `contrast-color()` inside `@supports`, so older browsers keep the safe one. It picks black or white only, and mid-tone backgrounds can still fail 4.5:1. Test those pairs too.
- Check: A unit test computes the contrast of the fallback colour and of black or white on every brand colour. Each pair used reaches 4.5:1.

Example:

```css
.btn { background: var(--brand); color: #fff; }
@supports (color: contrast-color(red)) {
  .btn { color: contrast-color(var(--brand)); }
}
```

**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/contrast-color`.

- Previous: [Make text easy to read](https://agentwranglers.se/playbook/website/accessibility/color-contrast)
- Next: [Work in high-contrast mode](https://agentwranglers.se/playbook/website/accessibility/forced-colors)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)