High Contrast Mode with prefers-contrast

High Contrast Mode with prefers-contrast

The prefers-contrast media feature detects when a user has requested higher or lower contrast through their OS accessibility settings. This is especially important for users with low vision.

The Query

@media (prefers-contrast: more) {
  :root {
    --border: #000000;
    --text: #000000;
    --bg: #ffffff;
  }
  * { border-color: currentColor !important; }
}

Accepted Values

• more -- User wants increased contrast (higher color differences)
• less -- User wants reduced contrast (less eye strain in bright environments)
• no-preference -- No specific contrast preference
• custom -- User has a custom forced-color palette (Windows High Contrast Mode)

What to Adjust

When prefers-contrast: more is active:

1. Remove subtle gradients -- Replace with solid colors
2. Strengthen borders -- Make borders more visible (2px solid black)
3. Increase text contrast -- Ensure at least 7:1 ratio (WCAG AAA)
4. Remove transparency -- Replace semi-transparent backgrounds with opaque ones
5. Increase focus indicators -- Make focus outlines thicker and higher contrast

Example

.card {
  background: linear-gradient(to bottom, #f8f8f8, #ffffff);
  border: 1px solid #e4e4e7;
}

@media (prefers-contrast: more) {
  .card {
    background: #ffffff;
    border: 2px solid #000000;
  }
}

Browser Support

prefers-contrast is supported in Safari 14.1+, Chrome 96+, Firefox 101+, and Edge 96+.