색각 이상 시뮬레이터
다양한 유형의 색각 이상을 가진 사람들에게 색상과 이미지가 어떻게 보이는지 시뮬레이션합니다. 접근성 테스트에 활용하세요.
다양한 유형의 색각 이상을 가진 사람들에게 색상과 이미지가 어떻게 보이는지 확인하세요.
원본 (정상 시력)
#FF6B35
제1색맹
#95852d
적색 원추세포 없음 (~1%)
제2색맹
#b9a62f
녹색 원추세포 없음 (~1%)
제3색맹
#ff4760
청색 원추세포 없음 (~0.003%)
제1색약
#c4812d
적색 원추세포 약함 (~1%)
제2색약
#d0942f
녹색 원추세포 약함 (~5%)
제3색약
#ff674b
청색 원추세포 약함 (~0.001%)
전색맹
#a8a8a8
색각 없음 (~0.003%)
전색약
#d59083
색각 감소 (Rare)
과학적 색상 변환 행렬을 사용한 시뮬레이션입니다. 모든 처리는 브라우저에서 로컬로 수행됩니다.
사용 방법
- 1
모드 선택
"색상 모드"로 개별 색상을 테스트하거나, "이미지 모드"로 이미지를 업로드해 시뮬레이션하세요.
- 2
색상 선택 또는 업로드
색상 피커를 사용하거나 HEX 코드를 입력하세요. 이미지 모드에서는 PNG, JPEG, WebP 이미지를 업로드하세요.
- 3
시뮬레이션 확인
8가지 유형의 색각 이상에서 색상이나 이미지가 어떻게 보이는지 확인하세요.
- 4
접근성 확인
결과를 사용해 디자인이 색각 이상을 가진 사용자에게도 접근 가능한지 확인하세요.
자주 묻는 질문
- 시뮬레이션은 얼마나 정확한가요?
- Machado et al.과 Brettel et al. 모델을 사용하며, 접근성 연구에서 널리 사용되는 방법입니다. 색각 이상자의 시각을 잘 근사합니다.
- 가장 흔한 색각 이상 유형은?
- 제2색약(녹색 원추세포 약함)이 가장 흔하며 남성의 약 5%에 영향을 줍니다. 적녹색맹 전체로는 남성의 약 8%에 해당합니다.
- 이미지가 서버로 전송되나요?
- 아니요. 모든 이미지 처리는 Canvas API를 사용해 브라우저에서 완전히 수행됩니다.
- 색각 이상자를 위한 디자인 팁은?
- 높은 대비를 사용하고, 정보 전달에 색상만 의존하지 말고, 패턴이나 레이블을 함께 사용하세요.