all

색약, 색맹, 노안, 약시를 고려한 색상 선택 방법

알 수 없는 사용자 2010. 3. 5. 16:49
노안, 약시를 위한 글자색상과 배경색의 대비관련 글.
[참고 http://naradesign.net/wp/2009/07/01/947/]

WCAG(Web Content Accessibility Guidelines) 2.0에서 제시한 전경글자색과 바탕색의 명도 대비

수준AA
전경글자색과 바탕색의 명도 대비는 최소한 4.5:1의 명암 대비를 만족해야 한다.
큰글자의 경우 적어도 3:1의 명암 비율을 갖는다.

수준AAA
전경글자색과 바탕색의 명도 대비는 최소한 7:1의 명암 대비를 만족해야 한다.
큰글자의 경우 적어도 4.5:1의 명암 비율을 갖는다.

*큰글자 : 18pt 이상 14pt bold 이상.

WCAG 2.0 지침은 명암의 강도를 1~21 단계로 나누고, 명암을 전혀 구별할 수 없는 상태를 '1:1(white:white)'로 표현하며,
글자와 배경을 확연하게 구분되는 상태를 '21:1(black:white)'로 표현한다.

명암의 비율을 판단하기 위한 유틸
http://www.snook.ca/technical/colour_contrast/colour.html
Foreground Colour: 글자색
Background Colour: 배경색
Contrast Ratio:명암비율
WCAG 2 AA Compliant: WCAG2 지침 AA 레벨 통과 여부
WCAG 2 AAA Compliant: WCAG2 지침 AAA 레벨 통과 여부

WCAG 2.0 적합성 수준의 의미
  1. A : 웹 접근성을 확보했다는 주장을 펼치기 위하여 반드시 지켜야 할 최소한의 수준으로써 강력하게 권장된다.
  2. AA : 최소한의 수준을 넘어서 보다 향상된 접근성을 갖추기 위한 수준으로써 권장된다.
  3. AAA : 웹 접근성을 극대화 하고자 할 때 갖추어야 할 수준으로써 이 수준은 의무화 하기에 너무 어려울 수도 있다.

색약(색맹)을 위한 도표 그래프에 들어가는 색상 가이드.
http://jhyun.wordpress.com/2009/10/29/%ec%83%89%eb%a7%b9color-blindness%ec%9d%84-%ec%9c%84%ed%95%9c-%ec%a0%91%ea%b7%bc%ec%84%b1-%ec%82%ac%eb%a1%80-%eb%aa%a8%ec%9d%8c-we-are-colorblindness/

웹접근성의 중요한 지침 중 하나는 색에 무관한게 콘텐츠를 인식할 수 있게 해 주는 것이다.
색상만으로 구분하게 되면 색맹, 색약 등은 색에 의존된 정보를 인식하지 못할 수 있다.
이는 색맹 뿐만 아니라 많은 사용자들에게도 불편을 주게 된다. 흑백 프린터를 출력을 해서 볼 경우, 구분할 수 없는 문제가 발생하기도 한다.
후지쯔의 Color Doctor, Color Selector
위 프로그램을 이용하면 흑백으로 볼 경우를 미리 시뮬레이션 해준다.

또한 We are ColorBilind 사이트에서는 색맹, 색약을 위한 웹사이트 개발 시 사용되는 그래프, 아이콘, 파이, 차트 등의 사례들이 보기 쉽게 정리되어 있다.