웹접근성에 의한 컬러 사용

웹접근성 2.1에 의해 모든사용자가 색에 관계없이 콘텐츠를 인식 할 수 있어야 합니다. 특히 색각이상자인 경우, 컬러의 정확한 인식이 어려우므로 색각이상을 고려한 컬러를 사용하거나 컬러가 아닌 다른요소 즉, 텍스트나 아이콘 내지는 바와같은 형태적인 의미전달을 함께 명시해주어야 합니다.

색각이상의 분류와 비율

색각이상은 흔한 증상으로 세계 인구 중 남자의 8%, 여자의 0.5%의 비율을 갖고있으며, 국내에서는 전체남자의 5.9%, 전체여자의 0.4%가 색각이상이라고 알려져 있습니다. 이렇게 생각보다 많은 비율의 인구가 겪고있는 증상이므로 더욱 더 웹접근성을 고려하여 디자인 하는 것을 권장합니다.

색각이상은 이상 삼색형 색각, 이색형 색각, 단색형 색각으로 나눌 수 있습니다. 이상 삼색형 색각은 세가지 색상을 모두 인지할 수 있으나 그중 한가지의 분광민감도가 비정상일 경우를 말하며 적색약, 녹색약, 청색약이 여기에 속합니다. 이색형 색각은 두가지의 색상만을 인지하는 경우를 말하며 여기에는 적색맹, 녹색맹, 청색맹이 속합니다. 단색형 색각은 한가지 색상만을 볼 수 있거나 아예 색을 볼 수 없는 경우를 말하며 완전색맹과 단원뿔세포 완전색맹이 여기에 속합니다.

색각이상 중에서는 일반적으로 녹색약이 가장 많아 전체 색각이상의 25~45%를 차지합니다. 그 다음으로 녹색맹, 적색맹, 적색약의 순서이며 이 세 가지의 비율은 서로 비슷합니다. 제삼색각이상(청색약, 청색맹)이나 완전색맹은 매우 드물어서 약 0.005%의 비율을 보입니다.

색각이상을 위한 컬러사용

1. 색각이상자의 시야를 짐작해보기

일러스트, 포토샵의 툴을 이용하여 색각이상자의 시야로 자신의 작업물을 들여다 볼 수 있습니다. 참고하여 어떤 부분을 더 보완하거나 수정해야할지 생각해보십시오. 특히 가장 구분하기 어려운 빨간색과 초록색의 채도를 변경하는 것도 효과적일 수 있습니다. 빨간색을 주황계열로 변경하여 초록색이나 갈색과 혼동하는 것을 줄일 수 있고, 초록색을 청록계열로 변경하여 빨간색이나 갈색으로 혼동하는 것을 줄일 수 있습니다.

포토샵은 cs4부터 지원됩니다.

빨간색과 초록색의 채도변경으로 색상 구분이 쉬워진 예시입니다.

2. 중요한 컨텐츠 디자인시, 색각이상자가 구분하기 어려운 색상과 조합의 사용을 지양하고,
명확히 구분할 수 있는 색상표의 사용을 지향합니다.

(빨간색 - 초록색), (초록색 - 갈색), (노란색 - 초록색), (파란색 - 분홍색), (짙은파란색 - 보라색) 과 같이 구분이 어려운 색상의 조합을 피하는 것이 좋습니다.

또한 Color Universal Design Organization (http://www.cudo.jp/e) 의 오카베 마사타카, 이토 케이의 연구 결과에 따라 색각이상자가 명확히 구분할 수 있는 색상표를 참고하여 조합해보십시오. 여기에 총 8개의 색상이 제시되어 있으나 복수 색상 사용시, 최소한의 색만 사용하는것을 권장합니다.

컬러와 무관한 콘텐츠의 인식

색상이 정보를 전달하거나, 행동을 나타내거나, 응답을 촉구하거나, 시각적 요소를 구별하는 유일한 시각적 수단으로 사용되어서는 안됩니다.

1. 텍스트의 사용

레이블이나 헬퍼텍스트와 같은 텍스트를 컬러와 함께 사용하여 색각이상자의 이해력을 높일 수 있습니다.

2. 바, 아이콘, 패턴 등 형태적인 디자인의 사용

컬러사용과 함께 바, 아이콘등 을 이용하여 색각이상자의 직관적인 이해를 높일 수 있고, 복잡한 구조의 디자인이나 다수의 색상을 사용하는 디자인의 경우, 패턴을 사용하여 색각이상자가 구분하기 쉽도록 도와줍니다.

색각이상자의 시선으로 볼때의 예시입니다. 컬러사용과 더불어 아이콘을 같이 기재해주어 색각이상자의 인지력을 높일 수 있습니다.

바(bar)로 현재영역을 표시해주는 예시입니다.

일부사용자에게 혼란을 줄 수 있는 컬러사용의 예시

부정적인 클릭 유도 문안(negative call-to-action for negatice links)은 하지 않는 것이 좋습니다. 버튼의 중요도에 차이를 두기 위해 보더에 색상을 주는것이 더 좋습니다.

다양한 색상의 네비게이션 바는 어떤 콘텐츠가 활성화 되어있는지 사용자에게 혼란을 야기시킬 수 있습니다.