아티클

저시력 및 색각 이상을 위한 웹접근성 가이드 - 텍스트 콘텐츠의 명도 대비

2017-12-25 08:29:09
안녕하세요. 엔비전스입니다.

지난 아티클에서는 국내 웹접근성 평가에 표준으로 사용되는 KWCAG 한국형 웹 콘텐츠 접근성 지침 2.1에서 특정 또는 전체 색을 구별할 수 없거나 저시력 사용자를 위한 지침 중 저시력 및 색각 이상을 위한 웹접근성 가이드 - 색에 무관한 콘텐츠 인식에 대한 내용을 다루었습니다. 이번 아티클에서는 텍스트의 인식성, 가독성을 보장하기 위한 콘텐츠의 전경색과 배경색의 명도 대비에 대해 알아보겠습니다.

5.3. 명료성 > 5.3.3. (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

웹 페이지에서 보이는 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 간의 충분한 대 비를 제공하여, 저시력 장애인, 색각 장애인, 노인 등도 콘텐츠를 인식할 수 있도록 제공 해야 한다. 다만, 로고, 장식 목적의 콘텐츠, 마우스나 키보드를 활용하여 초점을 받았을 때 명도 대비가 커지는 콘텐츠 등은 예외로 한다(검사 항목 6.1.2 절 참조).
참고 : 6.1.2. (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
  1. 콘텐츠의 명도 대비 : 웹 페이지가 제공하는 텍스트 콘텐츠(텍스트 및 텍스트 이미 지)와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
  2. 폰트 크기에 따른 명도 대비 : 텍스트 콘텐츠를 구성하고 있는 텍스트 폰트를 18pt 이상 또는 14pt 이상의 굵은 폰트를 사용하는 경우에는 명도 대비를 3대 1까지 낮출 수 있다.
  3. 화면 확대가 가능한 콘텐츠 : 화면 확대가 가능하도록 구현한 텍스트 콘텐츠(텍스 트 및 텍스트 이미지)의 명도 대비는 3 대 1까지 낮출 수 있다.

구체적으로 사용하려는 색의 전경 색과 배경색의 RGB 16진수 코드를 입력하여 해당 색상 값의 명도 대비가 적절한지 아닌지를 확인할 수 있습니다. 도구로는 간단히 웹페이지에서 측정 가능한 Colour Contrast Check를 이용하거나 Firefox 부가 기능인 N-WAX 등을 이용하면 쉽게 측정할 수 있습니다.
아래 샘플은 몇 가지 예를 들어 폰트 크기와 색상에 따른 텍스트의 명도 대비를 측정한 결괏값을 표시하고 있습니다. 이 표를 참고하여 준수 가능한 명도 대비 기준을 확인하고 실제로 적용할 수 있는 부분을 살펴본다면 잘못된 색상으로 콘텐츠를 제작하는 문제를 줄이는 데 도움이 될 것입니다.


명도 대비 측정 샘플 (배경색 : White, 전경색 : Gray 계열)
명도 대비 측정 샘플 (배경색 : White, 전경색 : Gray 계열)
샘플텍스트 크기전경색배경색명도 대비준수 여부
● 샘플 콘텐츠18pt#000000 (Black)#ffffff21 : 1준수
● 샘플 콘텐츠#7777774.4 : 1준수
● 샘플 콘텐츠#8888883.5 : 1준수
● 샘플 콘텐츠#9999992.8 : 1미준수
● 샘플 콘텐츠#aaaaaa2.3 : 1미준수
● 샘플 콘텐츠14pt Bold#7777774.4 : 1준수
● 샘플 콘텐츠#8888883.5 : 1준수
● 샘플 콘텐츠#9999992.8 : 1미준수
● 샘플 콘텐츠#aaaaaa2.3 : 1미준수
● 샘플 콘텐츠10pt#5555557.4 : 1준수
● 샘플 콘텐츠#6666666.7 : 1준수
● 샘플 콘텐츠#7777774.4 : 1미준수
● 샘플 콘텐츠#8888883.5 : 1미준수

명도 대비 측정 샘플 (배경색 : Black, 전경색 : Gray 계열)
명도 대비 측정 샘플 (배경색 : Black, 전경색 : Gray 계열)
샘플텍스트 크기전경색배경색명도 대비준수 여부
● 샘플 콘텐츠18pt#ffffff (White)#00000021 : 1준수
● 샘플 콘텐츠#7777774.6 : 1준수
● 샘플 콘텐츠#6666663.6 : 1준수
● 샘플 콘텐츠#5555552.8 : 1미준수
● 샘플 콘텐츠#4444442.1 : 1미준수
● 샘플 콘텐츠14pt Bold#7777774.6 : 1준수
● 샘플 콘텐츠#6666663.6 : 1준수
● 샘플 콘텐츠#5555552.8 : 1미준수
● 샘플 콘텐츠#4444442.1 : 1미준수
● 샘플 콘텐츠10pt#8888885.9 : 1준수
● 샘플 콘텐츠#7777774.6 : 1준수
● 샘플 콘텐츠#6666663.6 : 1미준수
● 샘플 콘텐츠#5555552.8 : 1미준수


기본적으로 단색 배경과 텍스트의 조합에서는 약간의 조정만으로 대비를 향상시킬 수 있습니다. 중요한 것은 폰트 크기에 따라 준수 여부가 결정되는 명도 대비 3 : 1과 4.5 : 1의 적용 가능한 차이를 이해하고 실수로 잘 못 적용되지 않도록 면밀히 살펴보아야 할 것입니다.

명도 대비 측정 샘플 (배경색 : White, 전경색 : Red 계열)
명도 대비 측정 샘플 (배경색 : White, 전경색 : Red 계열)
샘플텍스트 크기전경색배경색명도 대비준수 여부
● 샘플 콘텐츠18pt#330000#ffffff18.4 : 1준수
● 샘플 콘텐츠#66000013.4 : 1준수
● 샘플 콘텐츠#9900008.9 : 1준수
● 샘플 콘텐츠#cc00005.8 : 1준수
● 샘플 콘텐츠#ff00003.9 : 1준수
● 샘플 콘텐츠#ff33333.6 : 1준수
● 샘플 콘텐츠#ff66662.8 : 1미준수
● 샘플 콘텐츠#ff99992.0 : 1미준수
● 샘플 콘텐츠#ffcccc1.4 : 1미준수
● 샘플 콘텐츠14pt Bold#33000018.4 : 1준수
● 샘플 콘텐츠#66000013.4 : 1준수
● 샘플 콘텐츠#9900008.9 : 1준수
● 샘플 콘텐츠#cc00005.8 : 1준수
● 샘플 콘텐츠#ff00003.9 : 1준수
● 샘플 콘텐츠#ff33333.6 : 1준수
● 샘플 콘텐츠#ff66662.8 : 1미준수
● 샘플 콘텐츠#ff99992.0 : 1미준수
● 샘플 콘텐츠#ffcccc1.4 : 1미준수
● 샘플 콘텐츠10pt#33000018.4 : 1준수
● 샘플 콘텐츠#66000013.4 : 1준수
● 샘플 콘텐츠#9900008.9 : 1준수
● 샘플 콘텐츠#cc00005.8 : 1준수
● 샘플 콘텐츠#ff00003.9 : 1미준수
● 샘플 콘텐츠#ff33333.6 : 1미준수
● 샘플 콘텐츠#ff66662.8 : 1미준수
● 샘플 콘텐츠#ff99992.0 : 1미준수
● 샘플 콘텐츠#ffcccc1.4 : 1미준수


명도 대비 측정 샘플 (배경색 : White, 전경색 : Green 계열)
명도 대비 측정 샘플 (배경색 : White, 전경색 : Green 계열)
샘플텍스트 크기전경색배경색명도 대비준수 여부
● 샘플 콘텐츠18pt#003300#ffffff14.2 : 1준수
● 샘플 콘텐츠#0066007.2 : 1준수
● 샘플 콘텐츠#0099003.7 : 1준수
● 샘플 콘텐츠#00cc002.1 : 1미준수
● 샘플 콘텐츠#00ff001.3 : 1미준수
● 샘플 콘텐츠#33ff331.3 : 1미준수
● 샘플 콘텐츠#66ff661.3 : 1미준수
● 샘플 콘텐츠#99ff991.2 : 1미준수
● 샘플 콘텐츠#ccffcc1.1 : 1미준수
● 샘플 콘텐츠14pt Bold#00330014.2 : 1준수
● 샘플 콘텐츠#0066007.2 : 1준수
● 샘플 콘텐츠#0099003.7 : 1준수
● 샘플 콘텐츠#00cc002.1 : 1미준수
● 샘플 콘텐츠#00ff001.3 : 1미준수
● 샘플 콘텐츠#33ff331.3 : 1미준수
● 샘플 콘텐츠#66ff661.3 : 1미준수
● 샘플 콘텐츠#99ff991.2 : 1미준수
● 샘플 콘텐츠#ccffcc1.1 : 1미준수
● 샘플 콘텐츠10pt#00330014.2 : 1준수
● 샘플 콘텐츠#0066007.2 : 1준수
● 샘플 콘텐츠#0099003.7 : 1미준수
● 샘플 콘텐츠#00cc002.1 : 1미준수
● 샘플 콘텐츠#00ff001.3 : 1미준수
● 샘플 콘텐츠#33ff331.3 : 1미준수
● 샘플 콘텐츠#66ff661.3 : 1미준수
● 샘플 콘텐츠#99ff991.2 : 1미준수
● 샘플 콘텐츠#ccffcc1.1 : 1미준수


명도 대비 측정 샘플 (배경색 : White, 전경색 : Blue 계열)
명도 대비 측정 샘플 (배경색 : White, 전경색 : Blue 계열)
샘플텍스트 크기전경색배경색명도 대비준수 여부
● 샘플 콘텐츠18pt#000033#ffffff20.0 : 1준수
● 샘플 콘텐츠#00006617.6 : 1준수
● 샘플 콘텐츠#00009914.3 : 1준수
● 샘플 콘텐츠#0000cc11.2 : 1준수
● 샘플 콘텐츠#0000ff8.5 : 1준수
● 샘플 콘텐츠#3333ff6.8 : 1준수
● 샘플 콘텐츠#6666ff4.2 : 1준수
● 샘플 콘텐츠#9999ff2.5 : 1미준수
● 샘플 콘텐츠#ccccff1.5 : 1미준수
● 샘플 콘텐츠14pt Bold#00003320.0 : 1준수
● 샘플 콘텐츠#00006617.6 : 1준수
● 샘플 콘텐츠#00009914.3 : 1준수
● 샘플 콘텐츠#0000cc11.2 : 1준수
● 샘플 콘텐츠#0000ff8.5 : 1준수
● 샘플 콘텐츠#3333ff6.8 : 1준수
● 샘플 콘텐츠#6666ff4.2 : 1준수
● 샘플 콘텐츠#9999ff2.5 : 1미준수
● 샘플 콘텐츠#ccccff1.5 : 1미준수
● 샘플 콘텐츠10pt#00003320.0 : 1준수
● 샘플 콘텐츠#00006617.6 : 1준수
● 샘플 콘텐츠#00009914.3 : 1준수
● 샘플 콘텐츠#0000cc11.2 : 1준수
● 샘플 콘텐츠#0000ff8.5 : 1준수
● 샘플 콘텐츠#3333ff6.8 : 1준수
● 샘플 콘텐츠#6666ff4.2 : 1미준수
● 샘플 콘텐츠#9999ff2.5 : 1미준수
● 샘플 콘텐츠#ccccff1.5 : 1미준수


명도 대비 측정 샘플 (배경색 : White, 전경색 : Yellow 계열)
명도 대비 측정 샘플 (배경색 : White, 전경색 : Yellow 계열)
샘플텍스트 크기전경색배경색명도 대비준수 여부
● 샘플 콘텐츠18pt#333300#ffffff20.0 : 1준수
● 샘플 콘텐츠#66660017.6 : 1준수
● 샘플 콘텐츠#99990014.3 : 1준수
● 샘플 콘텐츠#cccc0011.2 : 1준수
● 샘플 콘텐츠#ffff008.5 : 1준수
● 샘플 콘텐츠#ffff336.8 : 1준수
● 샘플 콘텐츠#ffff664.2 : 1준수
● 샘플 콘텐츠#ffff992.5 : 1미준수
● 샘플 콘텐츠#ffffcc1.5 : 1미준수
● 샘플 콘텐츠14pt Bold#33330020.0 : 1준수
● 샘플 콘텐츠#66660017.6 : 1준수
● 샘플 콘텐츠#99990014.3 : 1준수
● 샘플 콘텐츠#cccc0011.2 : 1준수
● 샘플 콘텐츠#ffff008.5 : 1준수
● 샘플 콘텐츠#ffff336.8 : 1준수
● 샘플 콘텐츠#ffff664.2 : 1준수
● 샘플 콘텐츠#ffff992.5 : 1미준수
● 샘플 콘텐츠#ffffcc1.5 : 1미준수
● 샘플 콘텐츠10pt#33330020.0 : 1준수
● 샘플 콘텐츠#66660017.6 : 1준수
● 샘플 콘텐츠#99990014.3 : 1준수
● 샘플 콘텐츠#cccc0011.2 : 1준수
● 샘플 콘텐츠#ffff008.5 : 1준수
● 샘플 콘텐츠#ffff336.8 : 1준수
● 샘플 콘텐츠#ffff664.2 : 1미준수
● 샘플 콘텐츠#ffff992.5 : 1미준수
● 샘플 콘텐츠#ffffcc1.5 : 1미준수


녹색과 노란색 계열은 다른 색에 비해 상대적으로 명도 대비가 낮게 측정되므로 사용에 주의가 필요합니다.

명도 대비 측정 샘플 (기타)
명도 대비 측정 샘플 (기타)
샘플텍스트 크기전경색배경색명도 대비준수 여부
● 샘플 콘텐츠10pt#ff0033#ffffff3.9 : 1미준수
● 샘플 콘텐츠#0000005.2 : 1준수
● 샘플 콘텐츠#009900#ffffff3.7 : 1미준수
● 샘플 콘텐츠#0000005.5 : 1준수
● 샘플 콘텐츠#0000ff#ffffff8.5 : 1준수
● 샘플 콘텐츠#0000002.4 : 1미준수
● 샘플 콘텐츠#cccc00#ffffff1.7 : 1미준수
● 샘플 콘텐츠#00000012.2 : 1준수


같은 전경 색이라도 배경색에 따라 명도 대비가 큰 차이를 보이며 Black 배경색이라도 항상 높게 측정되지는 않는 것을 확인할 수 있습니다. 따라서 적절한 전경 색과 배경색의 조합을 고민해야 합니다.

기타 이미지 텍스트 및 아이콘 명도 대비
본 지침에 자세하게 언급되지는 않았지만, 이미지로 제작된 텍스트는 가급적 사용을 자제하고 부득이 사용해야 할 경우 특히 앤티 앨리어싱으로 적용된 텍스트라면 가장자리를 제외한 중심 색상의 명도 대비를 체크해 볼 수 있습니다. 또한, 아이콘의 사용에서는 가능한 추가로 텍스트로 이름을 명시하고 부득이한 경우라도 아이콘의 의미를 명확히 인식할 수 있도록 노력을 기울여야 합니다.




웹디자인을 함에 있어 접근성을 지키는 노력, 더불어 시각적인 제약을 준수하는 것은 매우 어려운 일입니다. 그러나 웹의 창시자 팀 버너스 리의 "웹의 힘은 그것의 보편성에 있다."라는 말에서처럼 누군가는 인식할 수 없는 웹페이지가 분명 우리가 생각하는 올바른 방향은 아닐 것입니다.

감사합니다.
댓글 0
댓글을 작성하려면 해주세요.