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

요구 사항

웹 페이지의 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 사이에 충분한 대비를 제공해 저시력장애인, 색각장애인, 고령자도 인식할 수 있게 합니다.

• 기본: 텍스트와 배경의 명도 대비는 4.5 대 1 이상입니다.
• 큰 글자: 18pt 이상 또는 14pt 이상의 굵은 글자는 3 대 1까지 낮출 수 있습니다.
• 화면 확대가 가능한 콘텐츠: 화면 확대가 가능하도록 구현한 텍스트 콘텐츠는 3 대 1까지 낮출 수 있습니다.

예외: 로고, 장식 목적의 콘텐츠, 마우스나 키보드로 초점을 받았을 때 명도 대비가 커지는 콘텐츠.

KWCAG 2.1의 해당 항목: 5.3.3 텍스트 콘텐츠의 명도 대비(5.3 명료성 지침)

왜 필요한가요

대비가 낮은 연회색 글씨는 저시력 사용자와 고령자뿐 아니라 햇빛 아래에서 휴대전화를 보는 사용자에게도 읽기 어렵습니다.

도움받는 사용자

• 저시력 사용자
• 색각이상이 있는 사용자
• 고령자
• 밝은 야외 등 열악한 화면 환경의 사용자

적용 방법

디자인 단계에서 글자색·배경색 쌍의 대비를 계산해 색상 토큰으로 관리합니다. 18pt는 약 24px, 14pt는 약 18.66px입니다.

:root {
  --text: #1f2933;      /* 흰 배경 대비 약 14.8:1 */
  --text-muted: #5f6b7a;/* 흰 배경 대비 약 5.4:1 */
  --link: #0b57d0;      /* 흰 배경 대비 약 6.4:1 */
}
.placeholder-like { color: #767676; } /* 흰 배경 대비 4.54:1 — 본문 최소선 */

배경 이미지 위의 글자는 반투명 배경 띠를 깔아 대비를 확보합니다. 플레이스홀더, 보조 안내 문구, 버튼 글자도 모두 대상입니다. 비활성(사용할 수 없는) 컨트롤의 글자는 WCAG 1.4.3에서 예외로 봅니다.

사례

<p style="color:#333; background:#fff">본문 텍스트 (12.6:1)</p>

<p style="color:#aaa; background:#fff">비밀번호는 8자 이상 (2.3:1)</p>

자주 하는 실수

• 입력란 플레이스홀더·안내 문구를 연한 회색으로 표시합니다.
• 사진 배너 위에 흰 글자를 올려 일부 구간의 대비가 부족합니다.
• 브랜드 색 버튼(예: 밝은 노랑 배경에 흰 글자)의 대비가 낮습니다.
• 텍스트 이미지 안의 글자 대비를 확인하지 않습니다.

검사 방법

• 대비 측정 도구(Colour Contrast Analyser, 브라우저 개발자 도구 등)로 글자색과 배경색의 대비를 측정합니다.
• 글자 크기·굵기를 확인해 4.5:1 또는 3:1 기준을 적용합니다.
• 이미지·그라데이션 배경 위의 글자는 가장 대비가 낮은 부분을 측정합니다.
• 마우스 오버·초점 상태 등 상태별 색도 확인합니다.

다른 지침의 대응 항목