Accessibility 본문

4.1 텍스트 콘텐츠의 명도 대비

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

필요성

저시력, 색각이상자, 고령자 등이 핵심 콘텐츠를 인식할 수 있도록 텍스트 콘텐츠와 배경간의 명도 대비를 충분히 제공해야 한다.

대상

  • 저시력
  • 색맹

적용기술

텍스트 콘텐츠와 배경 간의 명도 대비는 4.5:1 이상으로 제공

24px 이상 또는 굵은 19px 이상시 명도 대비 3:1 이상 허용

검사방법 및 QA 지표 산정방법

수동 검사방법

텍스트나 이미지 텍스트와 배경 간의 명도 대비를 3:1 이상으로 제공했는지 체크

오류수(건)

텍스트 콘텐츠와 배경 간의 명도 대비가 3:1 미만인 경우

사례

색 구별 사례
색 구별이 어려운 사례
#999 / #fff - 백내장을 가진 사람이 보기 힘든 대비
#ff7d27 / #fff - 일반인 및 백내장, 녹색맹, 청황색맹을 가진 사람이 보기 힘든 대비
#999 / #333 - 백내장, 적녹색맹을 가진 사람이 보기 힘든 대비
#ec5115 / #252525 - 백내장, 적녹색맹을 가진 사람이 보기 힘든 대비
#fdf974 / #83B61B - 일반인 및 백내장, 녹색맹, 청황색맹을 가진 사람이 보기 힘든 대비
#fff / #ff892d - 일반인 및 백내장, 녹색맹, 청황색맹을 가진 사람이 보기 힘든 대비
색구별이 가능한 사례
#444 / #fff
#438a01 / #fff
#bbb / #333
#48401b / #ffde28
명도 대비 사례
오류사례

명도 대비가 부족한 텍스트 콘텐츠

명도 대비 오류사례이미지 1
명도 대비 오류사례이미지 2
개선방법

배경 명도를 조절하여 색구분을 명확하게 함 (3:1 이상으로 제공)

우수사례

적절한 명도 대비 콘텐츠 제공

명도 대비 우수사례이미지