색맹·색약 시뮬레이터 (색각 다양성)
지정한 색상이 P형·D형·T형 색각 다양성(색맹·색약)을 가진 사람에게 어떻게 보이는지 간이 시뮬레이션하는 무료 도구입니다.
색각 다양성의 3가지 유형
| 유형 | 명칭 | 특징 |
|---|---|---|
| P형 | 1형 2색각(적색맹) | 빨간색을 감지하는 원추세포의 기능이 일반적인 경우와 달라 빨간색과 녹색을 구별하기 어렵습니다. |
| D형 | 2형 2색각(녹색맹) | 녹색을 감지하는 원추세포의 기능이 일반적인 경우와 달라 빨간색과 녹색을 구별하기 어렵습니다. 색각 다양성 중 가장 흔한 유형입니다. |
| T형 | 3형 2색각(청색맹) | 파란색을 감지하는 원추세포의 기능이 일반적인 경우와 달라 파란색과 노란색을 구별하기 어렵습니다. 발생 빈도는 매우 드뭅니다. |
색각 다양성 시뮬레이터란
이 도구는 지정한 색상 하나가 색각 다양성(일반적으로 색맹·색약이라 불리는 시각적 특성)을 가진 사람에게 어떻게 보이는지를 P형(1형 2색각)·D형(2형 2색각)·T형(3형 2색각) 3가지 유형으로 간이 시뮬레이션하는 무료 도구입니다. 색상 선택기 또는 16진수 코드로 색을 지정하기만 하면 3가지 유형 각각의 보임 방식을 그 자리에서 확인할 수 있으며, 별도의 소프트웨어 설치나 회원가입 없이 브라우저만으로 즉시 사용할 수 있습니다.
웹사이트나 앱 디자인, 프레젠테이션 자료나 지도의 배색을 정할 때 빨간색과 녹색의 조합처럼 색각 다양성을 가진 사람이 구별하기 어려운 배색을 사전에 파악해 두는 것은 접근성 관점에서 중요합니다. 다만 이 도구가 사용하는 변환은 Brettel과 Viénot 등의 연구를 기반으로 한 간이 근사치이며, 개인차가 있는 실제 보임 방식을 의학적으로 보장하는 것은 아니라는 점에 유의하세요. 정확한 진단이 필요한 경우는 안과 검사를 이용하고, 이 도구는 어디까지나 디자인 단계의 사전 점검용으로 활용하시기 바랍니다.
색각 시뮬레이터 사용 방법
- 확인하고 싶은 색을 지정합니다 색상 선택기를 클릭하거나 16진수 색상 코드(예: #ff0000)를 직접 입력합니다.
- 3가지 유형의 보임 방식을 확인합니다 입력한 색상에 대응하는 P형·D형·T형 각각의 시뮬레이션 결과가 자동으로 표시됩니다.
- 색을 바꿔가며 비교합니다 다른 색상을 다시 입력해, 배색 조합에 따라 구별하기 쉬운 정도가 달라지는지 확인합니다.
- 결과를 배색 결정에 참고합니다 구별하기 어려운 조합이 발견되면 명도 차이를 두거나 아이콘·텍스트 라벨을 함께 사용하는 등의 대책을 검토합니다.
더 잘 활용하기 위한 팁
- 색상 선택기 또는 16진수 코드로 색을 지정하면 P형·D형·T형 각각의 시뮬레이션 결과를 실시간으로 확인할 수 있습니다.
- 디자인의 배색안이 색각 다양성을 가진 사용자에게도 구별하기 쉬운지 공개 전에 손쉽게 확인할 수 있습니다.
- 빨간색과 녹색의 조합은 특히 구별하기 어려우므로, 그래프나 지도의 배색을 정할 때 이 도구를 활용하면 좋습니다.
- 시뮬레이션 결과는 어디까지나 간이 근사치입니다. 중요한 접근성 판단에는 전문 도구와 실제 사용자 테스트도 함께 활용하세요.
활용 시나리오
웹 디자인 배색 점검
버튼이나 그래프, 오류 표시 등 색상만으로 의미를 전달하는 부분이 없는지 공개 전에 확인하는 데 사용할 수 있습니다.
프레젠테이션 자료·그래프 배색 확인
원 그래프나 막대 그래프에서 흔히 쓰이는 빨간색·녹색 조합이 색각 다양성을 가진 청중에게 어떻게 보이는지 사전에 점검할 수 있습니다.
지도·노선도 배색 설계
색상만으로 노선이나 구역을 구분하는 지도는 정보 전달이 어려워질 수 있으므로, 대체 무늬나 라벨의 필요성을 판단하는 자료가 됩니다.
접근성 교육·연수
색각 다양성이 어떤 보임 방식을 동반하는지 실제 색상을 사용해 체험적으로 이해하는 교재로도 활용할 수 있습니다.
제품·패키지 디자인 검토
상품 패키지나 안내 표지판의 배색이 색각 다양성을 가진 소비자에게도 정보를 제대로 전달하는지 시제품 단계에서 확인하는 데 도움이 됩니다.
용어집
- 색각 다양성
- 특정 색상 조합을 판별하기 어려운 시각적 특성을 총칭하는 말입니다. 망막의 원추세포 감도 차이로 인해 생기며, 대부분 선천적인 것입니다.
- P형(1형 2색각)
- 빨간색을 감지하는 원추세포의 기능이 일반적인 경우와 다른 유형입니다. 빨간색과 녹색의 구별이 어려워집니다.
- D형(2형 2색각)
- 녹색을 감지하는 원추세포의 기능이 일반적인 경우와 다른 유형입니다. 색각 다양성 중 가장 빈도가 높다고 알려져 있습니다.
- T형(3형 2색각)
- 파란색을 감지하는 원추세포의 기능이 일반적인 경우와 다른 유형입니다. 파란색과 노란색의 구별이 어려워지지만 발생 빈도는 매우 드뭅니다.
- 원추세포
- 망막에 있는 빛을 감지하는 세포의 한 종류입니다. 빨강·초록·파랑 3가지가 있으며, 각각의 감도 조합으로 색을 인식합니다.
- Brettel·Viénot 모델
- 색각 다양성의 보임 방식을 수학적으로 근사하기 위해 널리 사용되는 변환 모델입니다. 이 도구의 시뮬레이션도 이 모델을 기반으로 합니다.
자주 묻는 질문
여담 ― 색각 검사와 이시하라식 색각 검사표의 역사
색각 다양성(이른바 색맹·색약)을 가진 사람은 일본인 남성의 약 20명 중 1명, 여성은 약 500명 중 1명으로 알려져 있으며, 전 세계적으로는 남성의 약 8%에 이른다는 보고도 있습니다. 결코 드문 특성이 아니며, 통계적으로 학급이나 직장에 한 명쯤은 있을 가능성이 높은 신체적 다양성입니다.
대표적인 색각 검사 도구인 이시하라식 색각 검사표는 일본의 안과 의사 이시하라 시노부에 의해 1917년(다이쇼 6년)에 고안되었습니다. 형형색색의 점들 속에 숫자나 도형을 떠오르게 하는 독특한 디자인은 당시 군대 징병 검사에서 색각 선별을 목적으로 개발된 것으로, 100년이 넘게 지난 지금도 전 세계 의료 현장에서 계속 사용되고 있습니다.
웹이나 앱 디자인에서도 빨강과 초록만으로 "합격/불합격"을 나타내는 그래프나, 색상만으로 노선을 구분하는 지도처럼 색상에 지나치게 의존한 설계는 일정 비율의 사용자에게 정보 누락을 초래합니다. 색상 조합을 사전에 시뮬레이션으로 확인하고 아이콘, 무늬, 텍스트 라벨을 함께 사용하는 것은 누구에게나 사용하기 쉬운 인클루시브 디자인의 기본적인 실천 중 하나입니다.