liminfo

Color Blindness Test

색맹/색약 시뮬레이터 - 적녹색맹, 청황색맹 시뮬레이션

원본

#3b82f6

Protanopia

#5a5ada

Deuteranopia

#5650d3

Tritanopia

#3fc4bf

Protanomaly

#486ae8

Deuteranomaly

#4970e6

Tritanomaly

#3da1e1

Achromatopsia

#7a7a7a

Achromatomaly

#5d7eb2

Color Blindness Test 소개

색맹 시뮬레이터는 임의의 16진수 색상을 8가지 색각 이상 유형에서 어떻게 보이는지 변환합니다. 16진수 색상 코드를 입력하거나 색상 선택기를 사용하면, 색맹약(Protanopia), 녹색맹(Deuteranopia), 청황색맹(Tritanopia), 제1색약(Protanomaly), 제2색약(Deuteranomaly), 제3색약(Tritanomaly), 전색맹(Achromatopsia), 부분 전색맹(Achromatomaly)에 대한 색상 견본이 원본 색상과 함께 즉시 표시되어 직접 비교할 수 있습니다.

UI/UX 디자이너, 웹 개발자, 그래픽 아티스트, 접근성 엔지니어들이 색각 이상 사용자들이 자신의 색상 선택을 인지할 수 있는지 평가하기 위해 이 도구를 사용합니다. 남성의 약 8%, 여성의 약 0.5%가 어떤 형태의 색각 이상을 가지고 있어, 접근 가능한 색상 선택은 중요한 설계 과제입니다. 이 시뮬레이터는 브라우저 플러그인이나 디자인 소프트웨어를 설치하지 않고도 배포 전에 문제가 있는 색상 조합을 식별하는 데 도움이 됩니다.

각 시뮬레이션은 입력 색상의 RGB 구성 요소에 과학적으로 도출된 변환 행렬을 적용합니다. 예를 들어 색맹약(Protanopia, 적색맹)은 L원추세포 광수용체의 부재를 정확하게 모델링하여 적색 채널 값을 녹색과 청색으로 재분배하는 3x3 행렬을 사용합니다. 텍스트를 입력하거나 색상 선택기를 조정하면 결과가 실시간으로 업데이트되며, 임의의 색상 견본을 클릭하면 해당 16진수 코드가 클립보드에 복사됩니다.

주요 기능

  • 색맹약, 녹색맹, 청황색맹, 제1색약, 제2색약, 제3색약, 전색맹, 부분 전색맹 등 8가지 색각 이상 시뮬레이션
  • 원본 색상과 8가지 시뮬레이션 변형을 동시에 보여주는 나란히 그리드 레이아웃
  • 편리한 색상 선택을 위한 16진수 텍스트 입력과 브라우저 기본 색상 선택기
  • 실시간 시뮬레이션 — 입력하거나 새 색상을 선택하는 즉시 결과 업데이트
  • 클릭하여 복사: 임의의 색상 견본을 클릭하면 시뮬레이션된 16진수 코드가 클립보드에 복사
  • 정확한 색각 이상 모델링을 위한 과학적으로 검증된 변환 행렬
  • CSS 또는 디자인 도구에서 직접 사용할 수 있도록 각 견본 아래 16진수 코드 표시
  • 100% 클라이언트 사이드 처리 — 서버 호출 없이 모든 행렬 계산이 브라우저에서 실행

자주 묻는 질문

이 도구는 어떤 색각 이상 유형을 시뮬레이션하나요?

8가지 유형을 시뮬레이션합니다: 색맹약(적색 원추세포 없음), 녹색맹(녹색 원추세포 없음), 청황색맹(청색 원추세포 없음), 제1색약(약화된 적색 원추세포), 제2색약(약화된 녹색 원추세포), 제3색약(약화된 청색 원추세포), 전색맹(완전한 색맹, 명도만 인식), 부분 전색맹(부분적 완전 색맹).

색상 변환은 기술적으로 어떻게 작동하나요?

각 시뮬레이션은 입력 색상의 RGB 값에 3x3 변환 행렬을 적용합니다. 이 행렬은 각 유형의 색각 이상이 색상 인식에 미치는 영향을 모델링하기 위해 RGB 채널을 재분배합니다. 예를 들어 전색맹 행렬은 그레이스케일 등가물을 생성하기 위해 R, G, B 채널 모두에 동일한 명도 가중치(0.299, 0.587, 0.114)를 사용합니다.

색맹 시뮬레이션이 디자이너에게 왜 중요한가요?

남성의 약 8%, 여성의 약 0.5%가 어떤 형태의 색각 이상을 가지고 있습니다. 중요한 정보가 색상만으로 전달되면(예: 오류는 빨간색, 성공은 녹색), 색각 이상 사용자는 놓칠 수 있습니다. 이 도구는 출시 후가 아닌 설계 단계에서 이러한 문제를 식별하고 수정하는 데 도움이 됩니다.

가장 흔한 색맹 유형은 무엇인가요?

제2색약(녹색 원추세포 민감도 약화)이 가장 흔한 형태로 남성의 약 5%에 영향을 미칩니다. 제1색약(약화된 적색 원추세포)과 녹색맹(녹색 원추세포 부재)도 흔합니다. 청황색맹(청황색 이상)과 전색맹(완전한 색맹)은 상대적으로 드뭅니다.

CSS 색상 값을 직접 테스트할 수 있나요?

네. "#" 접두사 유무에 관계없이 유효한 6자리 16진수 색상 코드를 텍스트 입력 필드에 입력하세요. 도구가 16진수 값을 파싱하여 RGB로 변환하고, 각 변환 행렬을 적용한 후 표시를 위해 다시 16진수로 변환합니다. 색상 선택기를 사용하여 색상을 시각적으로 선택할 수도 있습니다.

전색맹은 원본과 비교하면 어떻게 보이나요?

전색맹은 완전한 단색성 — 모든 색각 원추세포 기능의 부재 — 를 시뮬레이션합니다. 결과는 표준 명도 가중치(R×0.299 + G×0.587 + B×0.114)를 사용하여 계산된 순수 회색조 값입니다. 밝은 빨간색(#FF0000)은 적색이 상대적으로 낮은 명도를 가지기 때문에 짙은 회색이 됩니다.

시뮬레이션된 색상을 디자인 도구에서 사용하려면 어떻게 복사하나요?

결과 그리드에서 임의의 색상 견본을 클릭하면 시뮬레이션된 16진수 코드가 자동으로 클립보드에 복사됩니다. 그런 다음 CSS, 피그마, 스케치 또는 기타 디자인 도구에 직접 붙여넣을 수 있습니다.

WCAG 접근성 준수 확인에 적합한 도구인가요?

이 도구는 색각 이상 사용자에게 색상이 어떻게 보이는지 시뮬레이션하며, 이는 WCAG 명암비 확인을 보완합니다. 완전한 WCAG 2.1 준수를 위해서는 색상 조합이 최소 명암비(일반 텍스트의 경우 4.5:1)를 충족하는지도 확인해야 합니다. 이 시뮬레이터를 사용하여 모든 시뮬레이션된 시력 유형에서 중요한 UI 요소가 구별 가능한지 확인하세요.