Design Atlas
한국어
◉ Accessibility

Forced Colors

강제 색상 모드

The CSS feature that accounts for the OS forcing a system palette onto your page (Windows High Contrast Mode), where custom colors and background images can vanish.

Also known as: Windows High Contrast Modeforced-colors
···
html
<div class="stage">
  <div class="card" id="card">
    <div class="ico" id="ico"></div>
    <div class="ln"></div>
    <div class="ln short"></div>
    <div class="badge" id="badge">default</div>
  </div>
</div>
css
.stage{width:64%;height:82%;display:grid;place-items:center}
.card{width:100%;height:100%;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:10%;display:flex;flex-direction:column;gap:10%;transition:background .4s ease,border-color .4s ease}
.card.forced{background:#000;border:2px solid #fff}
.ico{width:26%;height:26%;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));transition:opacity .4s ease,background .4s ease,border-color .4s ease;border:2px solid transparent}
.card.forced .ico{background:transparent;border-color:#ff0}
.ln{height:10px;border-radius:5px;background:var(--muted);opacity:.3;transition:background .4s ease,opacity .4s ease}
.card.forced .ln{background:#fff;opacity:1}
.short{width:55%}
.badge{margin-top:auto;font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.card.forced .badge{color:#0ff}
js
const card = document.getElementById('card');
const badge = document.getElementById('badge');
function toggle() {
  const on = card.classList.toggle('forced');
  badge.textContent = on ? 'forced-colors: active' : 'default';
}
setInterval(toggle, 1900);

Turn on Windows High Contrast Mode, and the browser ignores most custom colors, shadows, and background images, repainting the page with only a handful of system colors the user picked in the OS (Canvas, CanvasText, LinkText, ButtonFace, Highlight, and so on). `@media (forced-colors: active)` detects this state, and CSS can reference those same system-color keywords directly.

The trap is any element whose boundary is only implied by `background-image` or a `background-color` with no border — once the background gets wiped in forced-colors mode, the card or button's edge disappears entirely. `forced-color-adjust: none` can opt a specific element out of this override, but it should be used sparingly and deliberately, so it doesn't defeat the very reason someone turned high contrast mode on.

The demo cycles one card between its normal palette and a simulated forced-colors palette — watch the gradient icon disappear and the border snap to a system color.

When to use

Don't rely on background color or box-shadow alone to convey a boundary or emphasis — draw an actual border alongside it too. Devtools can force forced-colors: active on to check whether your UI survives it.