색각 이상 시뮬레이터

적색맹, 녹색맹, 청색맹 등에서 색과 이미지가 어떻게 보이는지 확인합니다

파일이 기기 밖으로 나가지 않습니다
브라우저에서 실행
무료, 가입 불필요, 워터마크 없음

정상 색각

원래 색상

녹색약

녹색 원뿔세포 약함 · 남성의 약 5%, 가장 흔함

녹색맹

녹색 원뿔세포 없음 · 남성의 약 1%

적색약

적색 원뿔세포 약함 · 남성의 약 1%

적색맹

적색 원뿔세포 없음 · 남성의 약 1%

청색약

청색 원뿔세포 약함 · 드묾

청색맹

청색 원뿔세포 없음 · 매우 드묾

전색맹

색을 전혀 구분하지 못함 · 매우 드묾

7쌍의 색이 구분하기 어려워집니다

#e53935와(과) #43a047 (녹색맹, ΔE 5.2)
#43a047와(과) #fb8c00 (적색맹, ΔE 6.4)
#43a047와(과) #1e88e5 (청색맹, ΔE 6.5)
#e53935와(과) #43a047 (전색맹, ΔE 6.7)
#e53935와(과) #1e88e5 (전색맹, ΔE 3.8)
#43a047와(과) #1e88e5 (전색맹, ΔE 2.9)
#43a047와(과) #fb8c00 (전색맹, ΔE 8.5)

원래는 구분되는 두 색이 시뮬레이션에서 ΔE2000 10 미만이 되면 표시합니다. 라벨, 패턴, 명도 차이를 더해 주세요.

색각 이상 시뮬레이터 사용 방법

팔레트나 이미지가 8가지 색각에서 어떻게 보이는지 확인합니다. 가장 흔한 녹색약부터 전색맹까지 다루며, 팔레트에서는 구분하기 어려워지는 색 조합을 모두 알려 주어 차트와 UI를 미리 고칠 수 있습니다.

‘확인 대상’에서 ‘팔레트’ 또는 ‘이미지’를 고릅니다.

팔레트라면 ‘색상’ 칸에 한 줄에 하나씩 또는 쉼표로 구분해 붙여 넣고(HEX, rgb(), hsl(), oklch(), 색상 이름 지원), 이미지라면 JPG, PNG, WebP, GIF, HEIC, AVIF 파일을 끌어다 놓습니다.

‘색약 정도’로 색약 유형 시뮬레이션의 강도를 조절합니다.

시뮬레이션 결과를 비교합니다. 경고 아이콘이 붙은 조합은 ΔE와 함께 아래에 정리됩니다.

견본을 클릭하면 HEX가 복사되고, 시뮬레이션 이미지는 PNG로 받을 수 있습니다.

자주 묻는 질문

시뮬레이션은 얼마나 정확한가요?

적록 이상은 Machado 외(2009), 청황 이상은 Brettel 외(1997) 모델을 쓰며 선형 RGB에서 계산합니다. 전형적인 시각을 모델링한 것이라 실제 보이는 방식은 사람마다 다를 수 있습니다.

구분하기 어려운 조합은 어떻게 판단하나요?

정상 색각에서는 달라 보이는 두 색이 어떤 시뮬레이션에서 ΔE2000 10 미만이 되면 표시합니다. 그런 조합에는 라벨이나 패턴을 붙이거나 명도 차이를 분명히 주세요.

‘색약 정도’는 무엇을 바꾸나요?

적색약·녹색약·청색약 같은 색약 유형에만 적용되며, 해당 원뿔세포가 얼마나 어긋나 있는지를 나타냅니다. 100%면 대응하는 색맹 유형과 같습니다.

이미지가 업로드되나요?

아니요. 시뮬레이션은 브라우저에서 이뤄집니다. 미리 보기는 최대 900px로 그리고, 다운로드는 원본 해상도로 만듭니다.

CSS의 색을 그대로 붙여 넣어도 되나요?

네. 텍스트 속 HEX와 CSS 색상 함수를 자동으로 찾아냅니다. 색상 이름은 쉼표나 줄바꿈으로 구분하세요. 읽지 못한 항목은 건너뜀으로 표시됩니다.