저시력 및 색각 이상을 위한 웹접근성 가이드 - 텍스트 콘텐츠의 명도 대비
Webacc NV
2017-12-25 08:29:09
안녕하세요. 엔비전스입니다.
지난 아티클에서는 국내 웹접근성 평가에 표준으로 사용되는 KWCAG 한국형 웹 콘텐츠 접근성 지침 2.1에서 특정 또는 전체 색을 구별할 수 없거나 저시력 사용자를 위한 지침 중 저시력 및 색각 이상을 위한 웹접근성 가이드 - 색에 무관한 콘텐츠 인식에 대한 내용을 다루었습니다. 이번 아티클에서는 텍스트의 인식성, 가독성을 보장하기 위한 콘텐츠의 전경색과 배경색의 명도 대비에 대해 알아보겠습니다.
구체적으로 사용하려는 색의 전경 색과 배경색의 RGB 16진수 코드를 입력하여 해당 색상 값의 명도 대비가 적절한지 아닌지를 확인할 수 있습니다. 도구로는 간단히 웹페이지에서 측정 가능한 Colour Contrast Check를 이용하거나 Firefox 부가 기능인 N-WAX 등을 이용하면 쉽게 측정할 수 있습니다.
아래 샘플은 몇 가지 예를 들어 폰트 크기와 색상에 따른 텍스트의 명도 대비를 측정한 결괏값을 표시하고 있습니다. 이 표를 참고하여 준수 가능한 명도 대비 기준을 확인하고 실제로 적용할 수 있는 부분을 살펴본다면 잘못된 색상으로 콘텐츠를 제작하는 문제를 줄이는 데 도움이 될 것입니다.
기본적으로 단색 배경과 텍스트의 조합에서는 약간의 조정만으로 대비를 향상시킬 수 있습니다. 중요한 것은 폰트 크기에 따라 준수 여부가 결정되는 명도 대비 3 : 1과 4.5 : 1의 적용 가능한 차이를 이해하고 실수로 잘 못 적용되지 않도록 면밀히 살펴보아야 할 것입니다.
녹색과 노란색 계열은 다른 색에 비해 상대적으로 명도 대비가 낮게 측정되므로 사용에 주의가 필요합니다.
같은 전경 색이라도 배경색에 따라 명도 대비가 큰 차이를 보이며 Black 배경색이라도 항상 높게 측정되지는 않는 것을 확인할 수 있습니다. 따라서 적절한 전경 색과 배경색의 조합을 고민해야 합니다.
웹디자인을 함에 있어 접근성을 지키는 노력, 더불어 시각적인 제약을 준수하는 것은 매우 어려운 일입니다. 그러나 웹의 창시자 팀 버너스 리의 "웹의 힘은 그것의 보편성에 있다."라는 말에서처럼 누군가는 인식할 수 없는 웹페이지가 분명 우리가 생각하는 올바른 방향은 아닐 것입니다.
감사합니다.
지난 아티클에서는 국내 웹접근성 평가에 표준으로 사용되는 KWCAG 한국형 웹 콘텐츠 접근성 지침 2.1에서 특정 또는 전체 색을 구별할 수 없거나 저시력 사용자를 위한 지침 중 저시력 및 색각 이상을 위한 웹접근성 가이드 - 색에 무관한 콘텐츠 인식에 대한 내용을 다루었습니다. 이번 아티클에서는 텍스트의 인식성, 가독성을 보장하기 위한 콘텐츠의 전경색과 배경색의 명도 대비에 대해 알아보겠습니다.
5.3. 명료성 > 5.3.3. (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
웹 페이지에서 보이는 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 간의 충분한 대 비를 제공하여, 저시력 장애인, 색각 장애인, 노인 등도 콘텐츠를 인식할 수 있도록 제공 해야 한다. 다만, 로고, 장식 목적의 콘텐츠, 마우스나 키보드를 활용하여 초점을 받았을 때 명도 대비가 커지는 콘텐츠 등은 예외로 한다(검사 항목 6.1.2 절 참조).
참고 : 6.1.2. (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
- 콘텐츠의 명도 대비 : 웹 페이지가 제공하는 텍스트 콘텐츠(텍스트 및 텍스트 이미 지)와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
- 폰트 크기에 따른 명도 대비 : 텍스트 콘텐츠를 구성하고 있는 텍스트 폰트를 18pt 이상 또는 14pt 이상의 굵은 폰트를 사용하는 경우에는 명도 대비를 3대 1까지 낮출 수 있다.
- 화면 확대가 가능한 콘텐츠 : 화면 확대가 가능하도록 구현한 텍스트 콘텐츠(텍스 트 및 텍스트 이미지)의 명도 대비는 3 대 1까지 낮출 수 있다.
구체적으로 사용하려는 색의 전경 색과 배경색의 RGB 16진수 코드를 입력하여 해당 색상 값의 명도 대비가 적절한지 아닌지를 확인할 수 있습니다. 도구로는 간단히 웹페이지에서 측정 가능한 Colour Contrast Check를 이용하거나 Firefox 부가 기능인 N-WAX 등을 이용하면 쉽게 측정할 수 있습니다.
아래 샘플은 몇 가지 예를 들어 폰트 크기와 색상에 따른 텍스트의 명도 대비를 측정한 결괏값을 표시하고 있습니다. 이 표를 참고하여 준수 가능한 명도 대비 기준을 확인하고 실제로 적용할 수 있는 부분을 살펴본다면 잘못된 색상으로 콘텐츠를 제작하는 문제를 줄이는 데 도움이 될 것입니다.
명도 대비 측정 샘플 (배경색 : White, 전경색 : Gray 계열)
| 샘플 | 텍스트 크기 | 전경색 | 배경색 | 명도 대비 | 준수 여부 |
|---|---|---|---|---|---|
| ● 샘플 콘텐츠 | 18pt | #000000 (Black) | #ffffff | 21 : 1 | 준수 |
| ● 샘플 콘텐츠 | #777777 | 4.4 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #888888 | 3.5 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #999999 | 2.8 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #aaaaaa | 2.3 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 14pt Bold | #777777 | 4.4 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #888888 | 3.5 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #999999 | 2.8 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #aaaaaa | 2.3 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 10pt | #555555 | 7.4 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #666666 | 6.7 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #777777 | 4.4 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #888888 | 3.5 : 1 | 미준수 |
명도 대비 측정 샘플 (배경색 : Black, 전경색 : Gray 계열)
| 샘플 | 텍스트 크기 | 전경색 | 배경색 | 명도 대비 | 준수 여부 |
|---|---|---|---|---|---|
| ● 샘플 콘텐츠 | 18pt | #ffffff (White) | #000000 | 21 : 1 | 준수 |
| ● 샘플 콘텐츠 | #777777 | 4.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #666666 | 3.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #555555 | 2.8 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #444444 | 2.1 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 14pt Bold | #777777 | 4.6 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #666666 | 3.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #555555 | 2.8 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #444444 | 2.1 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 10pt | #888888 | 5.9 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #777777 | 4.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #666666 | 3.6 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #555555 | 2.8 : 1 | 미준수 |
기본적으로 단색 배경과 텍스트의 조합에서는 약간의 조정만으로 대비를 향상시킬 수 있습니다. 중요한 것은 폰트 크기에 따라 준수 여부가 결정되는 명도 대비 3 : 1과 4.5 : 1의 적용 가능한 차이를 이해하고 실수로 잘 못 적용되지 않도록 면밀히 살펴보아야 할 것입니다.
명도 대비 측정 샘플 (배경색 : White, 전경색 : Red 계열)
| 샘플 | 텍스트 크기 | 전경색 | 배경색 | 명도 대비 | 준수 여부 |
|---|---|---|---|---|---|
| ● 샘플 콘텐츠 | 18pt | #330000 | #ffffff | 18.4 : 1 | 준수 |
| ● 샘플 콘텐츠 | #660000 | 13.4 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #990000 | 8.9 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #cc0000 | 5.8 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ff0000 | 3.9 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ff3333 | 3.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ff6666 | 2.8 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ff9999 | 2.0 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ffcccc | 1.4 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 14pt Bold | #330000 | 18.4 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #660000 | 13.4 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #990000 | 8.9 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #cc0000 | 5.8 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ff0000 | 3.9 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ff3333 | 3.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ff6666 | 2.8 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ff9999 | 2.0 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ffcccc | 1.4 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 10pt | #330000 | 18.4 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #660000 | 13.4 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #990000 | 8.9 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #cc0000 | 5.8 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ff0000 | 3.9 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ff3333 | 3.6 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ff6666 | 2.8 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ff9999 | 2.0 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ffcccc | 1.4 : 1 | 미준수 |
명도 대비 측정 샘플 (배경색 : White, 전경색 : Green 계열)
| 샘플 | 텍스트 크기 | 전경색 | 배경색 | 명도 대비 | 준수 여부 |
|---|---|---|---|---|---|
| ● 샘플 콘텐츠 | 18pt | #003300 | #ffffff | 14.2 : 1 | 준수 |
| ● 샘플 콘텐츠 | #006600 | 7.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #009900 | 3.7 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #00cc00 | 2.1 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #00ff00 | 1.3 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #33ff33 | 1.3 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #66ff66 | 1.3 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #99ff99 | 1.2 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ccffcc | 1.1 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 14pt Bold | #003300 | 14.2 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #006600 | 7.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #009900 | 3.7 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #00cc00 | 2.1 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #00ff00 | 1.3 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #33ff33 | 1.3 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #66ff66 | 1.3 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #99ff99 | 1.2 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ccffcc | 1.1 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 10pt | #003300 | 14.2 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #006600 | 7.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #009900 | 3.7 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #00cc00 | 2.1 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #00ff00 | 1.3 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #33ff33 | 1.3 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #66ff66 | 1.3 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #99ff99 | 1.2 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ccffcc | 1.1 : 1 | 미준수 |
명도 대비 측정 샘플 (배경색 : White, 전경색 : Blue 계열)
| 샘플 | 텍스트 크기 | 전경색 | 배경색 | 명도 대비 | 준수 여부 |
|---|---|---|---|---|---|
| ● 샘플 콘텐츠 | 18pt | #000033 | #ffffff | 20.0 : 1 | 준수 |
| ● 샘플 콘텐츠 | #000066 | 17.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #000099 | 14.3 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #0000cc | 11.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #0000ff | 8.5 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #3333ff | 6.8 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #6666ff | 4.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #9999ff | 2.5 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ccccff | 1.5 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 14pt Bold | #000033 | 20.0 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #000066 | 17.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #000099 | 14.3 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #0000cc | 11.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #0000ff | 8.5 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #3333ff | 6.8 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #6666ff | 4.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #9999ff | 2.5 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ccccff | 1.5 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 10pt | #000033 | 20.0 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #000066 | 17.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #000099 | 14.3 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #0000cc | 11.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #0000ff | 8.5 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #3333ff | 6.8 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #6666ff | 4.2 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #9999ff | 2.5 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ccccff | 1.5 : 1 | 미준수 |
명도 대비 측정 샘플 (배경색 : White, 전경색 : Yellow 계열)
| 샘플 | 텍스트 크기 | 전경색 | 배경색 | 명도 대비 | 준수 여부 |
|---|---|---|---|---|---|
| ● 샘플 콘텐츠 | 18pt | #333300 | #ffffff | 20.0 : 1 | 준수 |
| ● 샘플 콘텐츠 | #666600 | 17.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #999900 | 14.3 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #cccc00 | 11.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ffff00 | 8.5 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ffff33 | 6.8 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ffff66 | 4.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ffff99 | 2.5 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ffffcc | 1.5 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 14pt Bold | #333300 | 20.0 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #666600 | 17.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #999900 | 14.3 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #cccc00 | 11.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ffff00 | 8.5 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ffff33 | 6.8 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ffff66 | 4.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ffff99 | 2.5 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ffffcc | 1.5 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | 10pt | #333300 | 20.0 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #666600 | 17.6 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #999900 | 14.3 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #cccc00 | 11.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ffff00 | 8.5 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ffff33 | 6.8 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #ffff66 | 4.2 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ffff99 | 2.5 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #ffffcc | 1.5 : 1 | 미준수 |
녹색과 노란색 계열은 다른 색에 비해 상대적으로 명도 대비가 낮게 측정되므로 사용에 주의가 필요합니다.
명도 대비 측정 샘플 (기타)
| 샘플 | 텍스트 크기 | 전경색 | 배경색 | 명도 대비 | 준수 여부 |
|---|---|---|---|---|---|
| ● 샘플 콘텐츠 | 10pt | #ff0033 | #ffffff | 3.9 : 1 | 미준수 |
| ● 샘플 콘텐츠 | #000000 | 5.2 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #009900 | #ffffff | 3.7 : 1 | 미준수 | |
| ● 샘플 콘텐츠 | #000000 | 5.5 : 1 | 준수 | ||
| ● 샘플 콘텐츠 | #0000ff | #ffffff | 8.5 : 1 | 준수 | |
| ● 샘플 콘텐츠 | #000000 | 2.4 : 1 | 미준수 | ||
| ● 샘플 콘텐츠 | #cccc00 | #ffffff | 1.7 : 1 | 미준수 | |
| ● 샘플 콘텐츠 | #000000 | 12.2 : 1 | 준수 |
같은 전경 색이라도 배경색에 따라 명도 대비가 큰 차이를 보이며 Black 배경색이라도 항상 높게 측정되지는 않는 것을 확인할 수 있습니다. 따라서 적절한 전경 색과 배경색의 조합을 고민해야 합니다.
기타 이미지 텍스트 및 아이콘 명도 대비
본 지침에 자세하게 언급되지는 않았지만, 이미지로 제작된 텍스트는 가급적 사용을 자제하고 부득이 사용해야 할 경우 특히 앤티 앨리어싱으로 적용된 텍스트라면 가장자리를 제외한 중심 색상의 명도 대비를 체크해 볼 수 있습니다. 또한, 아이콘의 사용에서는 가능한 추가로 텍스트로 이름을 명시하고 부득이한 경우라도 아이콘의 의미를 명확히 인식할 수 있도록 노력을 기울여야 합니다.웹디자인을 함에 있어 접근성을 지키는 노력, 더불어 시각적인 제약을 준수하는 것은 매우 어려운 일입니다. 그러나 웹의 창시자 팀 버너스 리의 "웹의 힘은 그것의 보편성에 있다."라는 말에서처럼 누군가는 인식할 수 없는 웹페이지가 분명 우리가 생각하는 올바른 방향은 아닐 것입니다.
감사합니다.
조회수16141