Accessibility 본문

1.3.3 텍스트 컨텐츠의 명도 대비

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

필요성

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

대상

  • 저시력
  • 색맹

적용기술

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

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

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

  • 자동 검사 방법 : 접근성 검사 도구를 통한 검사 방법
  • 수동 검사 방법 : 직접 수동으로 확인하는 검사 방법
  • 발견수(건) : 해당 콘텐츠 발견 수
  • 준수수(건) : 준수한 콘텐츠 수
  • 오류수(건) : 오류 콘텐츠(요소 또는 영역) 수
수동 검사 방법

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

오류수(건)

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

평가 점수

100 - (수동 오류수 * 5)점

사례

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

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

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

배경 명도를 조절하여 색구분을 명확하게 함

명도 대비 오류사례이미지
우수사례

최소 5.91 : 1 ~ 21 까지 적절한 명도 대비 컨텐츠 제공

명도 대비 우수사례이미지