Design Atlas
한국어
◉ Accessibility

Prefers Contrast

명암 선호

A CSS media query that detects the OS's 'increase contrast' setting and boosts border and text contrast automatically.

Also known as: prefers-contrast: more
···
html
<div class="stage">
  <div class="card" id="card">
    <div class="badge" id="badge">no-preference</div>
    <div class="ln"></div>
    <div class="ln short"></div>
  </div>
</div>
css
.stage{width:70%;height:80%;display:grid;place-items:center}
.card{width:100%;height:100%;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:12%;display:flex;flex-direction:column;gap:10%;transition:border-color .4s ease,border-width .4s ease}
.card.more{border-width:2.5px;border-color:var(--fg)}
.badge{align-self:flex-start;font:700 10px/1 ui-monospace,monospace;color:var(--muted);padding:5px 9px;border-radius:999px;border:1px solid var(--line);transition:color .4s ease,border-color .4s ease}
.card.more .badge{color:var(--fg);border-color:var(--fg)}
.ln{height:10px;border-radius:5px;background:var(--muted);opacity:.35;transition:opacity .4s ease,background .4s ease}
.card.more .ln{opacity:1;background:var(--fg)}
.short{width:60%}
js
const card = document.getElementById('card');
const badge = document.getElementById('badge');
function toggle() {
  const on = card.classList.toggle('more');
  badge.textContent = on ? 'prefers-contrast: more' : 'no-preference';
}
setInterval(toggle, 1800);

Low-vision users often turn on 'increase contrast' in macOS or Windows accessibility settings to make faint borders and light gray text more solid. `@media (prefers-contrast: more)` detects that setting in CSS, letting a subtly-styled border or text turn noticeably firmer just for the users who need it.

There's also `prefers-contrast: less`, though browser support is thinner. This media query isn't itself a WCAG success criterion — it's a user-environment feature, layered on top of the baseline you should already be meeting with something like 1.4.3 Contrast (Minimum).

The demo cycles one card between `no-preference` (default, faint border) and `more` (thicker border, bolder text), showing which value is currently 'active.'

When to use

If your design tokens set --line or --muted to a low-contrast value, consider overriding just those under prefers-contrast: more. Meeting a sufficient baseline contrast (4.5:1) in the first place still comes first.