Design Atlas
한국어
◐ Color

Color blindness

색각 이상

A visual condition that makes certain color pairs hard to tell apart. It affects roughly 8% of men worldwide — the single most direct reason not to encode meaning in color alone.

Also known as: 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);
})();

Red-green deficiency (protanopia, deuteranopia) is by far the most common, which is why the classic red/green success-failure UI pattern reads as nearly the same color to a large share of users. Blue-yellow deficiency (tritanopia) is rarer but confuses blue and yellow.

The demo below approximates each type with an SVG feColorMatrix filter — not clinically precise, but close enough to build intuition. All four groups share the exact same underlying colors; only the filter changes.

The fix isn't removing color, it's not depending on it alone — pair success/failure with an icon or text, add patterns or labels alongside color in charts, and underline links instead of relying on color to mark them.

When to use

Check this before shipping anywhere color is the only channel carrying meaning — status states, chart legends.