컬러 사용 시 주의해야 할 점

컬러 적용시 주의점

웹접근성에 의한 명도대비

웹접근성이란

사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식할 수 있도록 제공하는 것을 의미합니다. 웹접근성에서 ‘적합성 수준’이란 세부 지침들이 갖는 중요도를 3단계로 분류하는 것을 말합니다.

출처
https://www.wah.or.kr:444/Participation/한국형웹콘텐츠접근성지침2.1.pdf
https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum

텍스트 콘텐츠의 명도 대비

저시력자 및 색각 이상자, 노인 등 을 위한 웹접근성 가이드에 따라 텍스트 콘텐츠와 배경간의 명도대비는 최소 4.5:1 이상이어야 합니다.

 

• 1. 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 간의 명도 대비는 4.5:1 이상이어야 합니다.
• 2. 텍스트 크기가 약 24px(18pt) 이상 또는 약 18.5px(14pt) 이상의 굵은 폰트를 사용하는 경우 명도 대비를 3:1까지 낮출 수 있습니다.
• 3. 화면 확대가 가능하도록 구현한 텍스트 콘텐츠(텍스트 및 텍스트 이미지)의 명도 대비는 3:1까지 낮출 수 있습니다.

그 외 텍스트는 약 24px(18pt) 이상 또는 약 18.5px(14pt) 이상의 굵은 폰트의 경우입니다. (1pt = 1.333px)
등급별 명암대비는 최소 대비 기준, 명암강도는 1에서 21까지 (1:1 에서 21:1로 작성)입니다.

 

 

 

콘텐츠 중요도에 따른 명도 대비

1. 주요 정보의 명도대비는 4.5:1 이상이어야 합니다.

 

네비게이션, 제목, 본문, 주요 과업 수행 버튼 등은 배경과의 명도대비가 4.5:1 이상으로 제공되야 합니다.

주요 과업 수행 버튼과 배경과의 명도대비 예시입니다.

2. 이미지 폰트의 명도대비는 4.5:1 이상이어야 합니다.

 

이미지 폰트는 시스템 폰트보다 인식률이 떨어지므로, 광고영역을 제외한 이미지 폰트는 배경과의 명도대비가 4.5:1 이상으로 제공되어야 합니다.
명도 대비 측정은 텍스트에 인접한 1px 중 가장 대비가 높은 색을 기준으로 평가합니다.

이미지폰트와 배경과의 명도대비 예시입니다.

3. 부가정보의 명도대비는 3:1 이상이어야 합니다.

 

날짜, 카테고리, Description 광고 (배너포함)등 부가정보와 부가 기능 수행 버튼 (인쇄, 추천 등)은 배경과의 명도대비가 3:1 이상으로 제공되어야 합니다.

부가적인 정보의 색상을 배경과 3:1 이상의 명도대비로 둔 예시입니다.

웹접근성에 의한 컬러 사용

웹접근성 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)은 하지 않는 것이 좋습니다. 버튼의 중요도에 차이를 두기 위해 보더에 색상을 주는것이 더 좋습니다.

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

참고 :http://styleguide.co.kr/content/color/color-wraning.php


웹접근성 참고자료 사이트

https://www.wah.or.kr:444/Participation/guide.asp


명도대비 확인 사이트

http://colorsafe.co/
https://colorable.jxnblk.com/5a6049/d2cfba


참고자료사이트

https://designmodo.com/create-color-scheme
https://brunch.co.kr/@chulhochoiucj0/17
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
https://nuli.navercorp.com/sharing/a11y/checklist/3.3.1
[네이버 지식백과] 색각이상 [color blindness] (국가건강정보포털 의학정보, 국가건강정보포털)

 

리메인 스타일가이드