Accessibility Optional

Let the browser pick readable text colour

Let the browser pick readable black or white text on brand colours with contrast-color(), after a fallback you have checked.

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

How to do it

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, so check those pairs by hand.

Example

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

How to check

Text stays readable when the brand colour changes.

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.