색맹이 볼 수 있는 색 - saegmaeng-i bol su issneun saeg

안녕하세요. 접근성팀 김성훈입니다. 

사람들이 자주 이용하는 지하철 노선의 색이 모두 동일하다면 어떻게 이용할 수 있을까요?  

별로 대수롭지 않게 넘어갈 수도 있겠지만, 전 세계 남성 인구 중 약 8%는 색각 이상을 가지고 있습니다. 

우리가 제작하고 사용하는 모든 웹 서비스 역시 색각이상자를 위한 고려가 필요합니다.

저희 접근성개발실에서 색각이상자(색맹 또는 색약)를 위한 웹 접근성 가이드라인을 준비했습니다.

색각이상의 이해 

색의 인식.

색의 인식은 망막 내의 시세포 중 하나인 원뿔세포(Cone cell)를 통해 이루어집니다.

이 원뿔세포에 기능에 이상이 있을 때 색을 정확하게 인식할 수 없는 색각이상을 발생하게 됩니다.

색각이상자의 비율. 

세계 인구 중 남자의 8%, 여자의 0.5%에서 색각이상이 나타나며, 

국내 인구 중 남자의 5.9%, 여자의 0.4% (약 150만명)의 색각이상자 비율을 가지고 있습니다. 

색각이상의 유형. 

색각이상의 유형은 여러가지가 있지만 적색과 녹색을 구분하지 못하는 적녹색맹이 가장 많으며,

청색과 녹색, 또는 황색을 구분하지 못하는 청색맹, 색상을 전혀 구분하지 못하고 명암 대비로만 시각

정보를 인식하는 전색맹이 있다.

가이드라인의 목적

본 가이드라인은 색각이상자가 구분할 수 없는 색 사용을 지양하고, 색을 구분하기 어려운 장애 환경

(예: 흑백 프린트) 에서도 색에 관계없이 콘텐츠를 바르게 인식하도록 하기 위해 제작되었으며, 

여러 개의 색이 함께 사용되는 시각 정보(예: 그래프, 차트, 지도) 디자인 시 참고할 수 있습니다.

총 3단계(Phase1~3)이 적용 기준으로 나뉘며, 적용 여부는 담당자의 판단 하에 결정할 수 있으나,

최소한의 접근성 보장을 위해 Phase1까지 적용하는 것을 권장합니다.

단계별 적용 가이드

Phase1. 색각이상을 고려한 색상 사용 

1. 99%의 색각이상자(적록색맹)를 위한 채도 변경

빨간색은 초록색 or 갈색과 혼동할 수 있으므로 주황 계열로 채도 변경하고,  

초록색은 빨간색 or 갈색과 혼동할 수 있으므로 청록 계열로 채도 변경하는 것이 좋습니다. 

2. 색각이상자가 구분하기 어려운 색상과 조합 사용을 지양

아래와 같이 구분이 어려운 색상 조합을 지양합니다. 

빨간색-초록색, 초록색-갈색, 노란색-초록색, 파란색-분홍색, 짙은 파란색-보라색 

3. 색각이상자가 명확히 구분할 수 있는 색상표 사용

Color Universal Design Organization (http://www.cudo.jp/e) 의 오카베 마사타카,  

이토 케이의 연구 결과에 따르면 색각 이상자가 명확히 구분할 수 있는 색상표는 다음과 같습니다. 

총 8개의 색상이 제시되어있으나 복수의 색상 사용 시, 최소한의 색만 사용하는 것을 권장합니다.

Phase2. 색상 없이도 인식 가능한 기호/패턴을 사용  

1. 쉽게 구별이 가능하며 단순한 모양의 기호 사용

2. 서로 다른 굵기나 패턴의 선 사용 

3. 다양한 질감의 패턴 사용
 

Phase3. 기호나 선을 직접 가리키는 레이블 제공  

1. 도면 안에 레이블 제공
 

2. 차트 방향에 맞추어 레이블 제공
 

3. 연결선을 이용하여 레이블 입력
 

참고 예제

1. 네이버(지식쇼핑) 

색각 이상자들이 명확히 볼 수 있는 색상을 적용하였으며, 흑백 화면에서도 구분 가능한 패턴 및 레이블을 사용했다. 

 *출처: NAVER 지식쇼핑 > 베스트100 > 인기쇼핑몰

2. 지도 (미국 대선 지역별 전자투표 현황)

구분하기 쉬운 명도, 채도 대비를 사용했으며, 도면 안에 줄무늬 패턴과 레이블을 제공했다. 

 *출처: 미국 대선 지역별 전자투표 현황(http://elections.nytimes.com/2012/ratings/electoral-map)

3. 지하철 노선도 

런던 지하철 노선도는 노선별로 각기 다른 패턴을 사용하여 흑백으로도 구분이 가능하게 제공했다.

 *출처: 런던 지하철 노선도(http://24ways.org/2012/colour-accessibility/)

도쿄 지하철 노선도는 도면 노선에 레이블을 직접 표시했다.(S04, Y14 등)

*출처: 도쿄 지하철 노선도(Tokyo Metro Co, LTD. © 2013.3)

4. 아이콘

TiVo DVR 인터페이스는 아이콘 크기의 차이를 활용했다.

*출처: TiVo DVR 인터페이스 

OS X 메신저 iChat은 명도 차이와 다양한 심볼을 활용했다.

*출처: Mac 메신저 iChat  

PS. 가이드라인 제작에 도움을 주신 조진주 대리님께 감사의 말씀 드립니다.

고맙습니다.