---
title: "Work in high-contrast mode · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/forced-colors
updated: 2026-10-20
licence: "All rights reserved"
---

# Work in high-contrast mode

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

- Level: Recommended
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Test the site in forced-colours mode, a high-contrast setting in Windows. Repair what it flattens under `forced-colors: active`.
- How: Inside `@media (forced-colors: active)`, give controls and cards borders in system colours (`CanvasText`, `ButtonText`, `Highlight`). Don't rely on background colour or box shadows alone, because forced colours remove them.
- Check: A browser test emulates forced colours, for example Playwright's `emulateMedia({ forcedColors: 'active' })`. Every button, input and card has a computed border or outline that is not `none`.

Example:

```css
@media (forced-colors: active) {
  .btn, .card { border: 2px solid ButtonText; }
  .btn:focus-visible { outline: 3px solid Highlight; }
}
```

**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/forced-colors`.

- Previous: [Let the browser pick readable text colour](https://agentwranglers.se/playbook/website/accessibility/contrast-color)
- Next: [Describe images in words](https://agentwranglers.se/playbook/website/accessibility/image-alt-text)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)