색각 이상

색각 이상(色覺異常) 또는 색맹(色盲), 색약(色弱)은 정상적인 색 구별 능력이 부족하거나 결여된 상태를 말한다. 전 세계 남성의 약 8%, 여성의 약 0.5%가 색각 이상을 가지고 있으며, 대부분 유전적 요인에 의해 발생한다.

색각 이상은 망막의 원추세포에 있는 색소의 이상으로 인해 특정 색을 구별하지 못하는 상태이다. 완전히 색을 구별하지 못하는 전색맹(全色盲)과 특정 색의 구별이 어려운 부분 색맹으로 나뉜다. 일상생활에서는 신호등, 지도, 그래프 등의 색 구분에 어려움을 겪을 수 있다.

분류

적록색각이상

가장 흔한 형태로 전체 색각 이상의 약 99%를 차지한다.

제1색각이상(적색맹, Protanopia): L-원추세포(적색 감지)의 이상
제2색각이상(녹색맹, Deuteranopia): M-원추세포(녹색 감지)의 이상
제1색약(Protanomaly): L-원추세포의 부분적 이상
제2색약(Deuteranomaly): M-원추세포의 부분적 이상

청황색각이상

제3색각이상(청색맹, Tritanopia): S-원추세포(청색 감지)의 이상
제3색약(Tritanomaly): S-원추세포의 부분적 이상

전색맹

간상체 1색형 색각(Rod monochromacy): 원추세포가 전혀 기능하지 않음
청원추세포 1색형 색각(Blue cone monochromacy): S-원추세포만 기능

원인

유전적 요인

적록색각이상은 X염색체 열성 유전을 따른다. 남성은 X염색체를 하나만 가지고 있어 색각 이상 유전자를 가지면 발현되지만, 여성은 두 개의 X염색체 중 하나에만 이상이 있어도 정상적인 색각을 유지할 수 있다.

후천적 요인

망막 질환
시신경 손상
백내장
노화
특정 약물의 부작용

진단

이시하라 검사

가장 널리 사용되는 색각 검사법으로, 색점으로 이루어진 숫자나 도형을 식별하는 방식이다.

판스워스-먼셀 검사

색상 배열 능력을 평가하여 색각 이상의 종류와 정도를 정밀하게 진단한다.

아노말로스코프 검사

적록색각이상을 정밀하게 진단하는 기기 검사이다.

웹 접근성과 색각 이상자를 위한 고려사항

웹 콘텐츠 접근성 지침

WCAG 2.1은 색각 이상자를 위한 다음과 같은 지침을 제시한다:

Success Criterion 1.4.1 - 색의 사용: 색이 정보를 전달하는 유일한 시각적 수단이 되어서는 안 된다.
Success Criterion 1.4.3 - 명도 대비: 텍스트와 배경 간 최소 4.5:1의 명도 대비를 유지해야 한다.

디자인 원칙

색상 선택

적색과 녹색의 조합 회피
고대비 색상 조합 사용
청색과 주황색 같은 색각 이상자 친화적 색상 조합 활용

추가적인 시각 단서

아이콘, 패턴, 텍스트 레이블 병용
밑줄, 굵은 글씨 등 텍스트 스타일 활용
도형이나 기호를 통한 구분

구현 기술

CSS를 활용한 색각 이상 시뮬레이션

<syntaxhighlight lang="css">
/* 적색맹 시뮬레이션 */
.protanopia {
  filter: url('#protanopia-filter');
}

/* 녹색맹 시뮬레이션 */
.deuteranopia {
  filter: url('#deuteranopia-filter');
}

/* 청색맹 시뮬레이션 */
.tritanopia {
  filter: url('#tritanopia-filter');
}
</syntaxhighlight>

SVG 필터를 이용한 색각 이상 시뮬레이션

JavaScript를 활용한 색각 이상 모드 토글

<syntaxhighlight lang="javascript">
function toggleColorBlindMode(type) {
  const body = document.body;
  const modes = ['protanopia', 'deuteranopia', 'tritanopia', 'normal'];

  // 기존 클래스 제거
  modes.forEach(mode => body.classList.remove(mode));

  // 새 모드 적용
  if (type !== 'normal') {
    body.classList.add(type);
  }

  // 사용자 설정 저장
  localStorage.setItem('colorBlindMode', type);
}

// 페이지 로드 시 저장된 설정 적용
window.addEventListener('DOMContentLoaded', () => {
  const savedMode = localStorage.getItem('colorBlindMode');
  if (savedMode) {
    toggleColorBlindMode(savedMode);
  }
});
</syntaxhighlight>

색각 이상자를 위한 도구

브라우저 확장 프로그램

Colorblinding: 웹페이지를 다양한 색각 이상 유형으로 시뮬레이션
Visolve: 색상을 변환하여 구별하기 쉽게 만듦

개발자 도구

Chrome DevTools: 색각 이상 시뮬레이션 기능 내장
Stark: Figma, Sketch 등을 위한 접근성 플러그인
Sim Daltonism: macOS용 색각 이상 시뮬레이터

각주

외부 링크