색맹을 고려한 UI 색상 설계

남성의 7~10%, 여성은 그보다 낮은 비율로 존재하는 색맹·색약은 사회생활에서 뚜렷이 드러나지 않지만, 인터페이스가 색상 하나에만 의존해 정보를 전달할 때 오해와 오작동을 만든다. 특히 정보디자인에서 가장 많이 쓰이는 요소인 색상은 형태나 레이아웃을 바꾸지 않고도 많은 것을 전달할 수 있어 디자이너가 즐겨 쓰지만, 그만큼 색맹 사용자를 배제하기도 쉽다.

가장 흔한 문제는 하나의 시각적 신호(visual cue)를 색상만으로 표현하는 것이다. 애플 온라인 스토어, 워해머 게임 서버 선택 화면, MAMP 등은 빨강과 초록만으로 상태를 구분해 적록색맹 사용자에게 혼란을 준다. 반대로 dropbox, Wufoo, Versions처럼 아이콘의 형태·색상·텍스트를 조합하면 색상 구분이 어려운 사용자도 동일한 정보를 얻을 수 있다. 지도처럼 아이콘·텍스트 사용이 어려운 경우에는 명도 대비(contrasting)를 활용하는 것이 대안이다. 뉴욕타임즈 지도가 비슷한 명도의 색상으로 정보를 구분해 나쁜 예로 꼽히는 반면, 파랑·빨강·노랑에 명도 차와 패턴(줄무늬)까지 더한 지도는 색맹 사용자도 무리 없이 구분할 수 있는 좋은 예로 제시된다.

이런 점검은 디자인 완성 후 채도(saturation)를 낮춰 흑백에 가깝게 만들어보는 것만으로도 상당 부분 확인할 수 있다. 색맹을 고려하지 않은 설계는 디자이너 스스로도 의식하지 못한 채 반복되기 쉬운데, 같은 명도의 핑크와 블루로 토글 상태를 구분한 사례처럼 실무에서도 흔히 발생한다.

핵심 내용

  • 색맹은 특정 색(대표적으로 빨강-초록)을 구분하기 어려운 상태로, 일상생활에서는 잘 드러나지 않음
  • 하나의 색상만으로 상태·정보를 표현하는 단일 visual cue는 색맹 사용자에게 혼란을 줌
  • 해결책 1: 아이콘·텍스트·형태를 색상과 함께 조합해 정보를 중복 표현
  • 해결책 2: 색상 대신 또는 색상과 함께 명도 대비(contrasting)를 활용
  • 나쁜 예(뉴욕타임즈 지도, 애플 상태 표시)와 좋은 예(dropbox, Wufoo, 명도 차이를 준 지도)를 비교해 학습 가능
  • 점검 방법: 디자인의 채도를 낮춰 흑백에 가깝게 만들어 구분 가능 여부 확인

관련 개념

출처

최종 업데이트: 2026-07-15 | 출처 1개