아티클

색각이상자를 위한 웹 접근성 가이드라인

2014-07-18 19:05:22

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


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

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

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

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

 


색각이상의 이해 

 

색의 인식.

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

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

 

색각이상자의 비율. 

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

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

 

색각이상의 유형. 

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

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

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

 

 

가이드라인의 목적

 

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

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

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

 

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

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

 

 

 

단계별 적용 가이드

 비색각이상자와 색각이상자가 각각 보는 화면을 기호와 선 2가지 예시로 보여주며, 1단계 채도/명도와 색상 변경, 2단계 모양 변경, 3단계 레이블 제공 방법을 보여주는 이미지

 

 

 

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

  

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

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

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

 

빨간색에서 주황 계열로 채도 변경을 나타내는 이미지 

 

초록색에서 청록 계열로 채도 변경을 나타내는 이미지

 


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

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

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

 


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

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

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

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

 

black, orange, sky blue, bluish green, yellow, blue, vermilion, reddish purple 총 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 인터페이스 이미지

*출처: TiVo DVR 인터페이스 


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

원, 세모, 네모 등의 심볼로 구분한 Mac 메신저 채팅 화면 이미지

*출처: Mac 메신저 iChat  

 


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


고맙습니다.

댓글 0
댓글을 작성하려면 해주세요.