Design Atlas
한국어
◉ Accessibility

Color Alone

색만으로 전달하지 않기

Marking status with red/green alone leaves colorblind users unable to tell them apart. Pair color with an icon, shape, or text.

Also known as: Use of Color
···
html
<div class="stage" id="stage">
  <div class="pane">
    <div class="tag">색만</div>
    <div class="row"><span class="dot ok"></span><span class="lbl"></span></div>
    <div class="row"><span class="dot warn"></span><span class="lbl"></span></div>
    <div class="row"><span class="dot err"></span><span class="lbl"></span></div>
  </div>
  <div class="pane">
    <div class="tag">색 + 아이콘</div>
    <div class="row"><span class="dot ok"><i class="ic check"></i></span><span class="lbl"></span></div>
    <div class="row"><span class="dot warn"><i class="ic bang"></i></span><span class="lbl"></span></div>
    <div class="row"><span class="dot err"><i class="ic x"></i></span><span class="lbl"></span></div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%;transition:filter 1s ease}
.stage.gray{filter:grayscale(1)}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;justify-content:center;gap:10%;padding:0 8%}
.tag{position:absolute;top:8px;left:10px;font:700 10.5px/1 ui-monospace,monospace;color:var(--muted)}
.row{display:flex;align-items:center;gap:10%}
.dot{width:16%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center}
.ok{background:var(--accent-3)}
.warn{background:#d9a441}
.err{background:var(--accent-2)}
.lbl{flex:1;height:8px;border-radius:4px;background:var(--muted);opacity:.25}
.ic{width:46%;height:46%;position:relative}
.check{border-bottom:2px solid #fff;border-right:2px solid #fff;width:32%;height:55%;transform:rotate(45deg) translate(-5%,-15%)}
.bang{width:3px;height:46%;background:#fff;margin:0 auto;position:relative;top:-8%}
.bang::after{content:'';position:absolute;bottom:-6px;left:-1px;width:3px;height:3px;background:#fff;border-radius:50%}
.x{width:60%;height:2px;background:#fff;position:relative;transform:rotate(45deg)}
.x::after{content:'';position:absolute;inset:0;background:#fff;transform:rotate(90deg)}
js
const stage = document.getElementById('stage');
function toggle() { stage.classList.toggle('gray'); }
toggle();
setInterval(toggle, 2000);

Roughly 8% of men have some form of color vision deficiency and struggle to tell red from green. A UI that marks status by color alone (a red dot for error, a green dot for OK) shows those two states as identical to them. Printing in black and white or viewing on a washed-out screen causes the exact same problem.

The fix is simple: pair color with **shape, an icon, or text**. A checkmark, an X, an exclamation mark all carry their meaning even once the color information is gone.

The demo shows a status list two ways. Left uses color dots alone; right pairs color with an icon shape. Both panels periodically run through a grayscale filter to compare which one still reads once color disappears.

When to use

Whenever you build a status badge, form validation, or chart legend, ask 'would this still be distinguishable in black and white?' Devtools' vision-deficiency emulator lets you check for real.