forced-colors Mode Support

What Forced Colors Mode Is

Some users - often people with low vision - enable a high-contrast operating system setting that overrides a website's own colors with a small, high-contrast palette chosen by the user's system, ignoring most author-defined colors entirely to maximize legibility.

Detecting Forced Colors Mode

@media (forced-colors: active) {
  .card {
    border: 1px solid CanvasText;
  }
}

forced-colors: active lets a small amount of CSS specifically target this mode, when the default forced-color rendering is not quite sufficient on its own.

Using System Color Keywords

These keywords always resolve to whatever the user's own forced-color palette actually is, rather than a fixed value - respecting the exact colors the user chose for maximum legibility, instead of fighting against their accessibility setting.

What Commonly Breaks Under Forced Colors

• Background images used to convey information, since backgrounds are often removed or replaced.
• Borderless buttons or cards that relied purely on background color contrast, which can disappear into the forced background entirely without an explicit border.
• Icons using fill with a hardcoded color rather than currentColor, which then fail to adapt to the forced palette.

A General Approach

Rather than trying to preserve a site's exact normal appearance under forced colors, the better goal is ensuring every piece of information is still visible and distinguishable using the system's own high-contrast palette - adding a border with CanvasText where a background-only distinction used to do the job.