색각이상자들을 위한 디자인 팁

인구 중 약 8%의 남성이 색각이상자라고 합니다. 실제로 녹색과 빨간색을 구분하지 못하는 적녹색약을 가진 사람은 주변에서도 쉽게 접하게 됩니다. 위의 '이시하라 색판'은 신체 검사를 받으며 누구나 한 번쯤 접해 봤을 이미지입니다. 비장애인은 74가, 색각이상 증상을 가진 사람은 21, 혹은 아무것도 보이지 않는다고 합니다.

오늘 포스팅에서는 이러한 '색각이상자'들을 위한 디자인 팁을 소개할 예정입니다. 먼저 들어가기에 앞서 디자인을 할 때 왜 색각이상자들을 고려해야 하는지 잠깐 예시로 설명하고자 합니다. 아래의 이미지는 실제 구글 애널리틱스의 데이터 분석 결과를 보여주는 파이 차트입니다.  

이미지출처: We are Colorblind

좌측의 이미지는 구글이 제공하는 차트이고, 우측의 이미지는 적녹색약을 가진 사람들이 보게 되는 차트입니다. 색의 구분이 없어지면서 어떤 정보를 담고 있는지 전혀 알 수가 없게 됩니다. 색맹/색약을 가진 사용자를 고려하지 않고 중요한 정보를 담은 이미지를 디자인하게 되면, 위와 같은 오류가 발생합니다. 정보가 중추적 역할을 하는 네 가지 분야인 ‘(하이퍼)링크, 지도, 게임, 인포그래픽’ 등에서 자주 접할 수 있습니다.

이미지출처: 99 designs

남성 인구의 8%는(그리고 여성 인구의 약 0.5%), 생각하기 따라 매우 작은 수치일 수 있지만 절대 간과해서는 안 될 클라이언트이자 타겟입니다. 여담으로 페이스북의 창시자 마크 저커버그는 적녹색맹입니다. 페이스북의 로고가 파란색인 이유는 저커버그가 가장 명확하다고 생각하는 색이기 때문이라고 합니다. 또한 논란의 여지가 있는 이론이지만, 반 고흐도 색각이상이 의심된다고 합니다.

마크 저커버그(photo by jdlasica), 빈센트 반 고흐

그럼 디자이너가 색각이상자들을 위해 알아두어야 할 디자인 팁을 소개합니다.

Designing for Colour-Blind Person

---

 

색맹/색약인 사람들이 잘 구별하지 못하는 색 조합은 피하기

초록색&빨간색, 초록색&갈색, 파란색&보라색, 초록색&파란색, 연두색&노란색, 파란색&회색, 초록색&회색, 초록색&검은색은 쉽게 구분하지 못합니다.

단색조로 디자인하기

한 가지 색 내에서 명도를 달리하여 디자인하는 것은 색각이상자들을 위한 가장 명확한 해결 방법입니다. 미니멀한 디자인을 할 때 유용하게 사용할 수 있습니다.

 

대비를 강하게

색맹인 사람들도 대비(contrast), 색조(hue), 채도(saturation), 명도(brightness)를 구분할 수는 있습니다. 다만, 명확하지 않을 뿐입니다. 색맹인 사람들은 어두운 색들보다는 밝은 색들 사이의 차이를 조금 더 잘 느낀다고 합니다.

색과 정보/감정을 연결하지 않기

특정색을 “중요” “주목” “위험” 등의 시그널로 사용하고 있다면, 다시 고려해 보아야 합니다. 위 그림의 위쪽은 일반인이, 아래쪽은 적녹 색각이상자들이 보게 되는 이미지입니다. 아래쪽에서는 중요하지 않은 문구가 오히려 더 눈에 띕니다. 그렇다면 강조하고 싶은 것은 어떻게 디자인해야 할까요?

형태, 선, 텍스처 등을 이용하기

색각이상자들이 색은 잘 구분하지 못하지만, 형태나 텍스처는 구분할 수 있습니다.

전문가 툴 이용하기

색을 선택할 때 툴의 도움을 받을 수 있습니다. 테스트하고자 하는 이미지나 사이트의 주소를 입력하면 색각이상의 종류에 따라 어떻게 보일지 프리뷰 해주는 툴이 많이 있습니다. 대표적으로 컬러랩, 비스첵 등이 있습니다.

---

이 외에도 다양한 해결 방법들이 존재하며, 일반인과 색각이상자들 모두에게 만족스러운 디자인을 만들기 위해 노력해야 할 것입니다. 한국에서는 최근 네이버가 색각이상자들을 위해 지하철 노선도를 새롭게 디자인했는데, 관련 내용은 블로터의 기사에서 자세히 읽을 수 있습니다.

앞으로 색각이상자들뿐 아니라, 일상생활에 불편을 느끼는 소수를 배려하는 디자인들이 많아졌으면 하는 바람입니다.

출처: 99 designs, tuts+, Monster Post

by 돼지 발자국