디자인 아틀라스
EN
◉ 접근성

색만으로 전달하지 않기

Color Alone

빨강·초록만으로 상태를 구분하면 색맹 사용자는 구별할 수 없습니다. 아이콘·모양·텍스트를 함께 씁니다.

다른 이름: 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);

인구의 약 8%인 남성 색각 이상자는 빨강과 초록을 잘 구분하지 못합니다. 상태를 오직 색으로만 구분하는 UI(빨간 점 = 오류, 초록 점 = 정상)는 이 사용자들에게 두 상태가 똑같아 보입니다. 흑백 프린터로 출력하거나 저채도 화면에서 봐도 같은 문제가 생깁니다.

해결은 간단합니다 — 색에 **모양이나 아이콘, 텍스트**를 더하면 됩니다. 체크 표시·엑스 표시·느낌표 같은 형태 정보는 색상 정보를 잃어도 그대로 전달됩니다.

데모는 상태 목록을 두 가지로 보여줍니다. 왼쪽은 색 점만, 오른쪽은 색 점 + 아이콘. 두 패널 모두 그레이스케일 필터를 주기적으로 적용해 색이 사라졌을 때 어느 쪽이 여전히 읽히는지 비교합니다.

언제 쓰나

상태 배지, 폼 검증, 차트 범례를 만들 때마다 "색을 흑백으로 바꿔도 구분되나?"를 자문하세요. 브라우저 개발자 도구의 시각 결함 시뮬레이터로 실제로 확인할 수 있습니다.