텍스트 콘텐츠의 명도 대비 적절하게 제공하기
오류 유형으로 살펴보는 웹 접근성 지침
우리가 흔히 밝은 배경에 어두운 계열의 색으로 텍스트를 작성하는 것과 같이, 텍스트와 배경의 밝고 어두운 정도를 서로 상반되게 하는 이유가 있습니다.
바로 명도 대비라는 현상을 이용하여 텍스트 정보를 보다 잘 인식하기 위해서입니다. 우리는 밝고 어두운 정도를 명도라고 부르고, 서로 다른 명도가 인접하여 상대적으로 밝은 색은 더 밝게, 어두운 색은 더욱 어둡게 보일 때 '명도 대비가 높다'고 합니다. 예를 들어, 흰색 배경에 검은색 글씨의 명도 대비는 21:1로 가장 높은 값으로 측정되며, 흰색 배경에 흰색 글씨의 명도 대비는 1:1로 가장 낮은 값으로 측정됩니다.
이번 글에서는 텍스트 콘텐츠의 명도 대비가 적절하지 않은 오류 유형을 통해 텍스트의 명도 대비가 왜 중요한지, 어떻게 하면 명도 대비가 높은 콘텐츠를 제공할 수 있는지 살펴보겠습니다.
텍스트 콘텐츠의 명도 대비가 4.5:1 또는 3:1을 만족하지 않는 경우
웹 접근성에서는 텍스트의 크기가 18pt 미만 또는 볼드(bold)가 적용된 14pt 미만의 텍스트의 경우 4.5:1 또는 3:1의 명도 대비를 준수해야 합니다.
Example
명도 대비4.5:1을 만족하지 않는 콘텐츠와 만족하는 콘텐츠(16pt)
텍스트의 크기가 18pt 미만인 경우 4.5:1의 명도 대비를 준수하여야 저시력인뿐만 아니라 시력이 좋은 사용자도 배경과 글씨를 구분할 수 있고, 콘텐츠를 알아보기 쉬워집니다. 명도 대비가 낮을 수록 사용자는 텍스트 콘텐츠를 인지하기 힘들어지며, 확대가 가능한 웹 콘텐츠의 경우에도 명도 대비가 3:1미만인 텍스트 콘텐츠는 웹 접근성 오류로 분류됩니다.
오른쪽의 16pt로 작성된 문장은 Hex 컬러 코드로 글자색(전경색)이 #777772이고, 배경색이 #ffffff로 명도 대비는 4.5:1이기 때문에 웹 접근성을 준수하는 콘텐츠입니다.
명도 대비 확인 방법
명도의 차이를 알 수 있는 방법은 WebAIM의 Contrast Checker와 같은 도구를 활용하는 것입니다. 이 도구를 이용해 글자색(Foreground Color)와 배경색(Background Color)의 Hex 컬러 코드값을 입력하면 빠르게 확인할 수 있습니다.
출처 - <WebAIM: Contrast Checker>이미지 텍스트 콘텐츠의 명도 대비가 4.5:1 또는 3:1을 만족하지 않는 경우
이미지 안에 포함되어 있는 이미지 텍스트 콘텐츠의 경우에는 글자 스타일에 상관 없이 14pt 크기에 해당하는 18.66px 미만인 경우 4.5:1 이상을 만족하지 않거나, 18.66px 이상인 경우 3:1이상을 만족하지 않으면 웹 접근성 오류유형에 해당됩니다.
Example
16pt의 크기를 갖는 이미지 텍스트의 명도 대비가 3:1 이상을 만족하지 않는 경우 Do Not과 같이 텍스트가 잘 보이지 않기 때문에, Do와 같이 최소 4.5:1 이상을 만족하는 색상으로 글자색을 변경해야 사용자가 텍스트 콘텐츠를 인지하기 수월합니다.
요약
텍스트의 스타일에 따라 최소 명도 대비값은 달라지지만, 명도 대비가 적절한 텍스트는 사용자가 보기 쉽다는 것을 염두에 두고 콘텐츠를 제공해야 합니다.
특히나, 이미지 텍스트의 경우에는 확대를 해도 해상도가 낮아지면 알아보기가 힘들어지기 때문에 가능하면 명도 대비를 아주 높게 하여 콘텐츠를 제공하는 것이 좋습니다.
