화면 시안이나 스크린샷을 여러 색각 조건으로 변환해 색상에만 의존한 정보 구분이 사라지는 지점을 확인하세요. 원본과 결과를 나란히 비교하고 상태색·차트·선택 요소의 보조 단서를 점검할 수 있습니다. Protan·Deutan·Tritan 세 유형과 흑백 점검을 제공하며, 이미지는 브라우저 안에서만 처리됩니다.
검수할 시안 이미지를 올려 주세요.
PNG·JPG·WebP · 최대 10MB · 파일 선택, 드래그 또는 붙여넣기이미지는 서버로 전송되지 않고 브라우저에서 처리됩니다.구분이 어려운 글자색·배경색을 찾았다면 명도대비 검사기에서 실제 WCAG 비율과 수정 후보를 확인하세요.
이 도구의 목적은 화면을 낯선 색으로 바꿔 보는 데 있지 않습니다. 색상 차이가 줄어들었을 때 정보의 의미, 상태, 우선순위까지 함께 사라지는지를 확인하는 것이 핵심입니다. 성공과 오류, 활성과 비활성, 차트의 여러 계열처럼 색상이 기능을 맡고 있는 영역을 중심으로 원본과 변환 결과를 비교해야 합니다.
WCAG 2.2는 정보 전달, 동작 표시, 응답 유도, 시각 요소 구분에 색상만을 사용하지 않도록 요구합니다. 색을 없애야 한다는 뜻은 아닙니다. 색상을 쓰되 텍스트, 아이콘, 패턴, 형태, 위치 같은 다른 단서도 함께 제공해야 한다는 뜻입니다.
Protan은 적색 계열 신호가 달라지는 조건입니다. 일부 빨강이 어둡게 보이거나 녹색·갈색 계열과 가까워져 오류·성공 배지, 빨강·초록 차트 계열, 어두운 배경 위의 빨간 경고에서 문제가 드러나기 쉽습니다.
Deutan은 녹색 계열 신호가 달라지는 조건입니다. 초록·빨강·갈색·주황의 구분이 함께 줄어들어 승인·대기 상태, 지도 범례, 완료율 색상 단계를 확인하기 좋습니다.
Tritan은 청황 계열이 달라지는 조건입니다. 파랑·초록, 보라·빨강, 노랑·분홍 같은 조합의 차이가 줄어들어 파란 링크와 녹색 상태, 보라·빨강 계열 차트, 노란 강조 영역을 점검할 때 씁니다.
이 구분은 검수할 위치를 찾기 위한 실무 요약입니다. 실제로 보이는 색은 원본 색상, 명도, 채도, 주변 배경과 시뮬레이션 강도에 따라 달라집니다. 이름만 보고 특정 색 조합이 반드시 실패한다고 단정하지 말고 실제 시안을 비교하세요.
강도 0%는 원본이고, 값을 높일수록 선택한 색각 조건에서 색상 차이가 더 크게 줄어든 결과를 보여줍니다. 100%는 가장 강한 조건에서도 정보가 유지되는지 확인하는 보수적인 검수값입니다. 먼저 100%에서 사라지는 구분을 찾고, 40~70% 구간에서도 같은 문제가 나타나는지 비교하면 수정 우선순위를 정하기 쉽습니다.
사람마다 색 지각은 연속적으로 다르고 주변 조명, 디스플레이, 색 프로필도 결과에 영향을 줍니다. 한 강도의 이미지가 모든 사용자의 시야를 그대로 나타낸다고 보지 말고, 여러 조건에서도 의미가 유지되는 디자인을 목표로 삼으세요.
상태와 피드백: 성공을 초록색으로만, 오류를 빨간색으로만 표시하면 두 색의 차이가 줄었을 때 의미도 사라집니다. 상태 텍스트와 서로 다른 아이콘을 함께 쓰세요. 입력 오류도 테두리 색상만 바꾸지 말고 해당 필드 가까이에 원인과 수정 방법을 적어야 합니다.
차트와 데이터 시각화: 범례와 선·막대가 색으로만 연결되면 일부 계열이 합쳐져 보일 수 있습니다. 선 그래프에는 실선·점선·파선과 데이터 포인트 모양을 조합하고, 막대나 영역에는 패턴·테두리·직접 라벨을 쓸 수 있습니다. 순차 데이터는 색조를 늘리는 것보다 명도 단계를 충분히 벌리는 편이 안정적입니다.
링크·탭·선택 상태: 본문 링크, 활성 탭, 선택된 카드가 색상만 달라지는지 확인하세요. 링크에는 밑줄을, 활성 탭에는 굵기나 하단 표시선을, 선택된 카드에는 체크 아이콘이나 테두리 형태를 더하면 색상 차이가 줄어도 상태가 남습니다.
버튼·입력창·아이콘: 버튼 텍스트와 배경, 입력창 테두리와 바깥 배경, 의미 있는 아이콘과 인접 색상의 명도 차이를 확인해야 합니다. 시뮬레이션에서 흐려 보이는 조합은 명도대비 검사기에 두 색을 넣어 WCAG 비율을 수치로 확인하세요.
흑백 보기는 특정 색각 조건을 나타내는 기능이 아니라, 색상이라는 단서를 완전히 제거하는 스트레스 테스트입니다. 원본에서는 분명했던 상태·계열·선택 요소가 흑백에서 모두 같은 회색으로 합쳐진다면 색상 의존도가 높은 디자인일 가능성이 큽니다.
이 도구의 흑백 변환은 채널 평균이 아니라 상대 휘도를 씁니다. 그래서 두 색의 명도대비 비율은 원본과 똑같이 유지되고 색상 단서만 사라집니다. 흑백에서도 구분되지 않는다면 그것은 대비 문제가 아니라 색상에만 의존한 설계라는 뜻입니다.
흑백에서 모든 색이 서로 달라야 하는 것은 아닙니다. 텍스트 라벨, 아이콘, 패턴, 선의 형태로 같은 정보를 알아볼 수 있다면 목적을 달성한 것입니다. 중요한 질문은 '색이 없어도 원래 의미를 찾을 수 있는가'입니다.
먼저 의미를 직접 말하는 텍스트 라벨을 추가하고, 성공·오류·주의·선택 상태에 서로 다른 아이콘이나 형태를 씁니다. 차트 계열에는 선 스타일, 포인트 모양, 패턴 또는 직접 라벨을 더합니다.
그다음 전경색과 배경색, 인접한 데이터 색상의 명도 차이를 키웁니다. 중요한 상태를 작은 색 점 하나에 맡기지 말고 충분한 면적과 명확한 위치를 주세요. 수정한 시안은 세 가지 보기와 흑백에서 다시 확인합니다.
색을 전부 없애거나 브랜드 팔레트를 버릴 필요는 없습니다. 색상은 빠른 인지와 강조에 유용합니다. 다만 색상 하나가 사라졌을 때 기능과 의미까지 사라지지 않도록 중복 단서를 설계해야 합니다.
색각 시뮬레이션은 서로 다른 색이 비슷하게 보일 가능성을 시각적으로 찾는 도구입니다. 명도대비 검사는 두 색의 상대 휘도 차이가 WCAG 기준을 충족하는지 수치로 판정합니다. 빨강과 초록이 각각 배경과 충분히 대비되어도 두 상태가 색으로만 구분된다면 여전히 문제가 될 수 있고, 반대로 색상 구분은 남아 있어도 글자와 배경의 명도대비가 부족할 수 있습니다.
따라서 시뮬레이터에서 구분 문제를 찾은 뒤 명도대비 검사기로 실제 텍스트·UI 색상 쌍을 확인하는 순서가 좋습니다. 두 검사는 대체 관계가 아니라 보완 관계입니다.
성공·오류·주의·완료 상태에 텍스트나 아이콘이 함께 있는지, 차트 계열을 선 스타일·패턴·모양 또는 직접 라벨로도 구분할 수 있는지 확인합니다. 링크와 활성 탭, 선택된 카드에도 색상 외의 형태 차이가 있어야 합니다.
글자와 아이콘, 입력창 테두리가 실제 배경과 충분히 대비되는지 보고, 라이트·다크 테마와 기본·호버·포커스·선택·오류 상태를 각각 확인합니다. 마지막으로 Protan·Deutan·Tritan과 흑백 보기에서 핵심 과업을 끝내는 데 필요한 정보가 남아 있는지 점검하세요.
라벨 없이 점 색상만으로 상태를 표시한 영역은 사실상 구분되지 않습니다. 상태 텍스트나 서로 다른 아이콘을 함께 두어야 합니다.
유형에 따라 남는 단서가 다릅니다. Deutan에서 사라진 구분이 Protan에서는 밝기로 일부 남을 수 있으므로 세 유형을 모두 확인해야 합니다.
흑백 점검은 명도 차이를 그대로 두고 색상만 제거합니다. 여기서 합쳐지는 요소가 있다면 밑줄·아이콘·형태 같은 단서를 더해야 합니다.
최근 검증:
이 도구가 무엇인지, 누구에게·어떻게·왜 필요한지 한눈에 정리했습니다.
색각이상 시뮬레이터는 화면 시안이나 스크린샷의 색상을 여러 색각 조건으로 변환해 원본과 비교하는 브라우저 도구입니다.
상태색, 차트, 지도, 링크, 선택 요소의 색상 접근성을 검수하는 디자이너, 개발자와 PM을 위한 도구입니다.
이미지를 브라우저에서 픽셀 단위로 변환하고 Protan·Deutan·Tritan 유형과 강도 또는 흑백 보기를 원본 옆에 표시합니다.
색상 차이가 줄어들었을 때 의미와 상태도 함께 사라지는 디자인 문제를 개발 전달이나 배포 전에 찾기 위해 사용합니다.