색각 이상 시뮬레이션 필터 뷰어
제1색각(적색맹), 제2색각(녹색맹), 제3색각(청색맹), 전색맹 시각에서 내 이미지나 UI 디자인이 어떻게 인지되는지 실시간 Canvas 시뮬레이션 및 웹 접근성(WCAG)을 진단합니다.
색각 이상(Color Vision Deficiency) 시뮬레이션 원리
인간의 눈은 적색(L), 녹색(M), 청색(S)을 감지하는 3종류의 원추세포(Cone Cells)로 색상을 구분합니다. 적록 색약 및 청황 색약 환자는 특정 원추세포의 반응 파장이 이동하거나 파괴되어 특정 색상 영역의 미세 구분이 어려워집니다.
Brettel/Machado LMS 변환 공식: sRGB ➔ Linear RGB ➔ LMS Cone Space ➔ CVD Projection ➔ sRGB Filter
본 뷰어는 시각 생리학 LMS 원추세포 파장 공간 변환 행렬을 이용해 원본 이미지를 실시간 재구성합니다.
1. 시뮬레이션 대상 이미지 선택
내 이미지/UI 시안 업로드하기 (클릭 또는 드롭)
JPG, PNG, WebP 지원 · 브라우저 내 100% 로컬 처리로 안심
2. 색각 이상(CVD) 유형 및 증상 심도 설정
100% (완전 색맹)
🟢 디자인 접근성 우수
⚡ 실시간 LMS 분석 수치
색각 이상 가독성 유지율 (Color Readability Score)
88.5
%
적색 손실률
32.4%
녹색 손실률
11.8%
청색 손실률
4.2%
WCAG 명암비
5.8 : 1
색약 친화적 UI 디자인 수칙
- 이중 인지 요소 적용: 버튼이나 에러 상태 표시 시 색상뿐만 아니라 이모지(⚠️, ✅), 아이콘, 텍스트 라벨을 반드시 함께 제공합니다.
- 명암 대비(Contrast) 극대화: 적색/녹색 조합 대신 명도 차이가 큰 어두운 톤과 밝은 톤을 조합하여 WCAG 4.5:1 이상을 확보합니다.
- 차트 패턴 기법: 차트 범례 구분 시 단색 채우기 대신 사선, 점선, 격자 무늬 패턴을 함께 채워 시각 구분을 보완합니다.
실생활 색각 이상 분포 및 특징
- 적록 색약 (Protan & Deutan): 남성 인구의 약 8%, 여성 인구의 약 0.5%가 겪는 가장 흔한 형태입니다.
- 청황 색약 (Tritan): 성별 구분이 적으며 매우 드물게 발생합니다. 파란색과 노란색의 명암 구별이 다소 모호해집니다.
- 전색맹 (Achromatopsia): 명암과 빛의 순수한 밝기 차이만으로 세상을 인지하는 드문 시색각 형태입니다.
💡 자주 묻는 질문 (FAQ)
Q 제1색각(적색맹/적색약), 제2색각(녹색맹/녹색약), 제3색각(청색맹/청색약)의 차이는 무엇인가요?
제1색각(Protan)은 L-원추세포 이상으로 적색 파장을 제대로 인지하지 못하며, 제2색각(Deutan)은 M-원추세포 이상으로 녹색 파장 감도가 떨어집니다. 적색맹과 녹색맹을 통칭하여 적록 색약이라고 부릅니다. 제3색각(Tritan)은 S-원추세포 이상으로 청색과 황색의 구분이 어려운 청황 색약입니다.
Q 이 필터 시뮬레이션은 어떠한 원리로 정확하게 구현되나요?
본 뷰어는 시각 생리학 연구(Brettel, Viénot, Mollon 및 Machado 알고리즘)에 근거한 LMS 색상 공간 변환 행렬을 적용합니다. sRGB 색상을 감마 보정(Linear RGB)한 후 LMS 파장 공간으로 투영하여 색각 이상자의 신경 원추세포 반응을 수학적으로 정확하게 실시간 Canvas 필터링합니다.
Q 업로드한 이미지나 디자인 파일이 외부 서버로 전송되나요?
아니요, 일체 전송되지 않습니다! 본 도구는 100% 사용자의 브라우저 내 HTML5 Canvas 및 Client-side JavaScript 로직으로만 동작하므로 개인 사진이나 기밀 UI 디자인 시안도 안전하게 시뮬레이션할 수 있습니다.
Q 웹 디자이너나 개발자가 UI 접근성을 높이려면 어떻게 활용해야 하나요?
신호등, 차트, 상태 버튼 등 중요 정보를 색상(Red/Green) 단독으로만 구분하지 않고, 텍스트 라벨, 이모지, 패턴, 아이콘 형태를 조합해야 합니다. 시뮬레이터를 통해 텍스트와 배경의 WCAG 명암 대비비(Contrast Ratio 4.5:1 이상)를 확인하세요.