디자인 아틀라스
EN
◐ 색채

색각 이상

Color blindness

특정 색 조합을 구분하기 어려운 시각 특성. 전 세계 남성의 약 8%가 겪는, 색으로만 정보를 전달하면 안 되는 가장 직접적인 이유입니다.

다른 이름: Color vision deficiencyCVD색맹·색약
···
html
<svg width="0" height="0" style="position:absolute">
  <filter id="protan"><feColorMatrix type="matrix" values="0.567 0.433 0 0 0  0.558 0.442 0 0 0  0 0.242 0.758 0 0  0 0 0 1 0"/></filter>
  <filter id="deutan"><feColorMatrix type="matrix" values="0.625 0.375 0 0 0  0.7 0.3 0 0 0  0 0.3 0.7 0 0  0 0 0 1 0"/></filter>
  <filter id="tritan"><feColorMatrix type="matrix" values="0.95 0.05 0 0 0  0 0.433 0.567 0 0  0 0.475 0.525 0 0  0 0 0 1 0"/></filter>
</svg>
<div class="grid">
  <div class="grp"><b>Normal</b><div class="pal" id="p0"></div></div>
  <div class="grp"><b>Protanopia</b><div class="pal f-protan" id="p1"></div></div>
  <div class="grp"><b>Deuteranopia</b><div class="pal f-deutan" id="p2"></div></div>
  <div class="grp"><b>Tritanopia</b><div class="pal f-tritan" id="p3"></div></div>
</div>
css
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vmin,16px);width:min(680px,96%)}
.grp{display:grid;gap:6px;justify-items:stretch}
.grp b{font:700 clamp(8px,2.2vmin,10px)/1 ui-monospace,monospace;color:var(--muted);text-align:center}
.pal{display:flex;gap:4px;width:100%}
.pal div{flex:1;aspect-ratio:1;border-radius:6px}
.f-protan{filter:url(#protan)}
.f-deutan{filter:url(#deutan)}
.f-tritan{filter:url(#tritan)}
js
let hue = 0;
const COUNT = 5;
const pals = [0, 1, 2, 3].map(i => document.getElementById('p' + i));
pals.forEach(p => { for (let i = 0; i < COUNT; i++) p.appendChild(document.createElement('div')); });

function render() {
  for (let i = 0; i < COUNT; i++) {
    const h = (hue + i * (360 / COUNT)) % 360;
    const c = 'hsl(' + h + ', 80%, 55%)';
    pals.forEach(p => p.children[i].style.background = c);
  }
}
(function tick() {
  hue = (hue + 0.3) % 360;
  render();
  requestAnimationFrame(tick);
})();

적록색약(protanopia·deuteranopia)이 가장 흔해서, 빨강과 초록으로 성공/실패를 구분하는 흔한 UI 패턴이 실제로는 상당수 사용자에게 거의 같은 색으로 보입니다. 청황색약(tritanopia)은 드물지만 파랑과 노랑이 헷갈립니다.

아래 데모는 SVG feColorMatrix 필터로 각 유형이 어떻게 색을 "왜곡해서" 보는지 근사치로 시뮬레이션합니다 — 실제 임상 진단용은 아니지만 감을 잡기엔 충분합니다. 네 그룹 모두 색상값은 완전히 동일하고, 필터만 다릅니다.

해결책은 색을 없애는 게 아니라 색에 의존하지 않는 것입니다 — 성공/실패에 아이콘이나 텍스트를 같이 쓰고, 차트는 색과 함께 패턴·라벨을 더하고, 링크는 색뿐 아니라 밑줄로도 구분하세요.

언제 쓰나

상태(성공/경고/실패), 차트 범례처럼 색이 유일한 정보 전달 수단이 되는 곳을 만들기 전에 항상 점검하세요.