색각 이상 시뮬레이터

다양한 유형의 색각 이상을 가진 사람들에게 색상과 이미지가 어떻게 보이는지 시뮬레이션합니다. 접근성 테스트에 활용하세요.

다양한 유형의 색각 이상을 가진 사람들에게 색상과 이미지가 어떻게 보이는지 확인하세요.

원본 (정상 시력)
#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. 1

    모드 선택

    "색상 모드"로 개별 색상을 테스트하거나, "이미지 모드"로 이미지를 업로드해 시뮬레이션하세요.

  2. 2

    색상 선택 또는 업로드

    색상 피커를 사용하거나 HEX 코드를 입력하세요. 이미지 모드에서는 PNG, JPEG, WebP 이미지를 업로드하세요.

  3. 3

    시뮬레이션 확인

    8가지 유형의 색각 이상에서 색상이나 이미지가 어떻게 보이는지 확인하세요.

  4. 4

    접근성 확인

    결과를 사용해 디자인이 색각 이상을 가진 사용자에게도 접근 가능한지 확인하세요.

자주 묻는 질문

시뮬레이션은 얼마나 정확한가요?
Machado et al.과 Brettel et al. 모델을 사용하며, 접근성 연구에서 널리 사용되는 방법입니다. 색각 이상자의 시각을 잘 근사합니다.
가장 흔한 색각 이상 유형은?
제2색약(녹색 원추세포 약함)이 가장 흔하며 남성의 약 5%에 영향을 줍니다. 적녹색맹 전체로는 남성의 약 8%에 해당합니다.
이미지가 서버로 전송되나요?
아니요. 모든 이미지 처리는 Canvas API를 사용해 브라우저에서 완전히 수행됩니다.
색각 이상자를 위한 디자인 팁은?
높은 대비를 사용하고, 정보 전달에 색상만 의존하지 말고, 패턴이나 레이블을 함께 사용하세요.