1.4.3. 텍스트 콘텐츠의 명도 대비

텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

목적

명도 대비는 색의 밝고 어두운 정도 차이를 의미하며, 텍스트와 배경 색상이 충분히 구분되도록 하여 시력이 저하된 사용자도 텍스트 콘텐츠(텍스트 및 텍스트 이미지)를 명확하게 인식할 수 있도록 보장하기 위함이다.

배경 및 필요성

시력이 낮은 사용자는 배경과 명확히 구분되지 않는 텍스트나 희미한 색상으로 표현된 글자를 인식하고 읽는 데 어려움을 겪는 경우가 많다.

따라서, 모든 사용자가 텍스트를 쉽게 읽고 이해할 수 있게 하려면 텍스트와 배경 사이에는 최소 4.5:1 이상의 명도 대비가 필요하다.

이 기준을 준수하면, 저시력 사용자뿐만 아니라 밝은 햇빛 아래에서 화면을 보는 사용자, 저품질 디스플레이를 사용하는 환경에서도 가독성이 확보될 수 있다.

참고. 명도 대비 측정 도구 Colour Contrast Analyser(CCA)

CCA는 TPGi에서 개발한 무료 도구로, 텍스트와 배경 색상의 명도 대비를 측정할 수 있다. 마우스로 색상을 선택하거나 색상 코드를 직접 입력하면, WCAG 기준(예: 4.5:1)에 따른 명도 대비 적합 여부를 확인할 수 있다.

이 도구는 화면에서 색상을 직접 선택할 수 있는 스포이트 기능을 제공하며, HEX, RGB 등 다양한 색상 형식을 입력하거나 슬라이더를 활용하여 색상을 조정하고 테스트할 수 있다.

색맹 시뮬레이터가 포함되어 있으며, 윈도우와 맥 환경 모두에서 사용 가능하다.

본 문서에서는 CCA를 사용하여 명도 대비를 측정하였다. CCA 다운로드

기본 규칙

아래 조건에 따라 텍스트와 배경의 명도 대비를 확보해야 한다.

명도 대비 4.5:1 이상이 요구되는 경우
- 18pt 미만의 일반 텍스트
- 14pt 미만의 굵은 텍스트
명도 대비 3:1 이상이 허용되는 경우
- 18pt 이상의 일반 텍스트
- 14pt 이상의 굵은 텍스트

참고로, 웹에서 pt와 px 단위의 대응 관계를 보면, 1pt는 약 1.333px이며, 14pt는 약 18.66px, 18pt는 약 24px로 변환된다. 이미지 텍스트는 굵기와 폰트 종류 상관없이 18pt 크기에 해당하는 24px 미만일 때 4.5:1 이상, 24px 이상일 때 3:1 이상을 만족해야 한다.

명도 대비 기준인 3:1과 4.5:1은 반올림 없이 실제 수치로 비교되며, 예를 들어 4.499:1은 4.5:1 기준을 충족하지 못하는 것으로 본다.

정보 전달 목적이 아닌 장식용 텍스트, 로고, 또는 비활성화된 콘텐츠는 명도 대비 기준 적용 대상에서 제외된다. 예를 들어, 배경 장식으로 사용된 임의의 단어가 다른 텍스트로 쉽게 대체될 수 있다면, 이는 장식용으로 간주하여 명도 대비 기준이 적용되지 않는다.

용어

명도 대비: 인접한 두 색상의 밝기(명도) 차이에 따라 발생하는 시각적 구별 정도를 의미한다. 예를 들어, 흰색(#FFFFFF) 배경에 검은색(#000000) 텍스트를 사용한 경우, 명도 대비가 21:1로 가장 높다. 흰색 배경에 텍스트를 배치할 때는 최소 #767676 수준의 어두운 회색을 사용해야 4.5:1 이상의 대비 기준을 충족할 수 있다.

참고. pt 단위에 대해

1. pt 단위란

pt는 ‘포인트(point)’의 약자로, 전통적으로 인쇄물에서 사용되는 절대 단위이다.

1pt는 1/72인치로 정의된다. 예를 들어, 인쇄용 문서에서 72pt의 텍스트는 1인치 높이의 텍스트를 의미한다.

2. 웹 브라우저와 CSS에서의 pt 단위

웹에서는 다양한 화면 크기와 해상도를 고려해야 하므로, 브라우저는 기준 픽셀(reference pixel) 개념을 사용한다.

CSS3 Values 모듈에 따르면, 브라우저는 일반적으로 96dpi(인치당 96픽셀)를 기준으로 삼는다. 이 기준에 따르면, 1인치는 96px이므로, 1pt는 1/72인치이고 이를 픽셀로 환산하면: 1pt = 1/72인치 × 96px/inch ≈ 1.333px

따라서, CSS에서 1pt는 약 1.333px로 계산된다.

참고 자료: CSS Values and Units Module Level 3

적용 사례

1) 텍스트와 배경색의 명도 대비 확보

텍스트 정보를 제공할 때, 텍스트와 배경 사이의 명도 대비를 충분히 확보하여 명확하게 인식할 수 있도록 해야 한다.

a) 명도 대비를 4.5:1 이상 제공

18pt 미만의 일반 텍스트, 14pt 미만의 굵은 텍스트에는 최소 4.5:1 이상의 명도 대비를 적용한다.

이미지. 글자 크기가 12pt이고 굵은 텍스트의 명도 대비가 10.9:1인 사례 (출처: 서울시청)

b) 명도 대비를 3:1 이상 제공

18pt 이상의 일반 텍스트, 14pt 이상의 굵은 텍스트에는 3:1 이상의 명도 대비를 제공한다.

이미지. 글자 크기가 24px이고 굵은 텍스트의 명도 대비가 3.8:1인 사례 (출처: ssg.com)

2) 텍스트 이미지를 명확하게 인식할 수 있는 명도 대비 제공

텍스트 이미지를 제공할 경우, 텍스트와 배경 사이의 명도 대비를 충분히 확보하여 가독성을 높여야 한다. 이미지 편집 프로그램마다 픽셀 밀도(ppi)가 다르므로, 최종 렌더링 된 텍스트 크기를 기준으로 명도 대비를 점검해야 한다. 예를 들어, 72ppi 환경에서는 대략 19pt 또는 24pt 크기의 폰트를 사용하면, CSS에서 각각 19px, 24px에 해당하는 크기로 표시된다.

이처럼 최종 렌더링 된 텍스트 크기와 ppi를 고려하여 명도 대비 기준을 충족하면, 모든 사용자가 쉽게 읽을 수 있다.