Accessibility Recommended

Work in high-contrast mode

Test the site in forced-colours mode, a high-contrast setting in Windows. Repair what it flattens under forced-colors: active.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Inside @media (forced-colors: active), give controls and cards real borders in system colours (CanvasText, ButtonText, Highlight). Don't rely on background colour alone.

Example

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

How to check

Emulate forced colours in DevTools. Every control is still visible.

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.