전체 남성의 8%, 여성의 0.5%가 색각이상이다. 빨간색과 초록색을 구분 못하는 적록 색맹이 가장 흔하다. 웹 디자인에서 색상만으로 정보를 전달하면 이들은 불편을 겪는다.
색상만 의존하지 말 것
"빨간색 버튼을 누르세요"는 색맹 사용자에게 애매하다. 대신 아이콘, 텍스트, 패턴을 함께 사용하자. 에러 메시지는 빨간색 + 경고 아이콘 + "오류" 텍스트가 함께 있어야 한다.
대비 확인
텍스트와 배경의 명도 대비가 중요하다. 채도가 비슷한 색끼리는 구분이 어렵다. 색상 변환기로 색상을 HSL로 바꾸고 L(밝기) 값 차이가 충분한지 확인하자. WCAG 기준 4.5:1 이상 대비가 권장된다.
색맹 시뮬레이터 활용
포토샵이나 온라인 도구로 색맹 시뮬레이션을 해볼 수 있다. 자신의 디자인이 색맹 사용자에게 어떻게 보이는지 확인하고 조정하자. 색상 변환기와 함께 사용하면 대안 색상 찾기가 쉬워진다.
모두를 위한 디자인
접근성 좋은 디자인은 모든 사용자에게 좋은 디자인이다. 색각이상 사용자를 고려하면 일반 사용자에게도 더 명확한 인터페이스가 된다.
테스트 도구 활용
Chrome DevTools의 색맹 시뮬레이션(Rendering > Emulate vision deficiencies)으로 다양한 유형의 색각 이상을 시뮬레이션할 수 있습니다. 페이지 전체를 확인하면서 문제가 될 수 있는 부분을 찾으세요. 색상 변환기로 대안 색상을 찾아보세요.
사용자 피드백
가능하다면 실제 색각 이상이 있는 사용자에게 테스트를 부탁하세요. 시뮬레이션과 실제 경험은 다를 수 있습니다. 피드백을 바탕으로 개선하면 더 접근성 높은 사이트가 됩니다.