1.4.3 명도 대비(최소)

요구 사항

텍스트와 텍스트 이미지의 시각적 표현은 배경과의 명도 대비가 4.5:1 이상이어야 합니다. 다음은 예외입니다.

• 큰 텍스트: 18pt(약 24px) 이상, 또는 굵은 14pt(약 18.66px) 이상의 텍스트는 3:1 이상이면 됩니다.
• 부수적인 텍스트: 비활성화된 UI 구성 요소의 텍스트, 순수한 장식, 보이지 않는 텍스트, 다른 시각 콘텐츠가 많은 사진 속 일부 텍스트는 요구하지 않습니다.
• 로고: 로고나 브랜드 이름의 일부인 텍스트는 대비 요구가 없습니다.

명도 대비는 두 색의 상대 휘도로 계산하며 1:1(같은 색)부터 21:1(검정과 흰색)까지입니다. 값은 반올림하지 않으므로 4.49:1은 기준에 미달합니다.

왜 필요한가요

저시력, 색각 이상, 노화로 인한 시력 저하가 있는 사용자는 대비가 낮은 글자를 읽기 어렵습니다. 햇빛 아래의 모바일 화면처럼 일상적인 환경에서도 대비가 낮은 글자는 읽히지 않습니다.

도움받는 사용자

• 저시력 사용자(화면 확대 사용자)
• 색각 이상이 있는 사용자
• 고령자
• 밝은 야외에서 화면을 보는 사용자

적용 방법

• 디자인 단계에서 색상 팔레트의 전경·배경 조합을 대비 검사 도구(WebAIM Contrast Checker, 브라우저 개발자 도구 등)로 확인합니다.
• 배경 이미지 위의 텍스트는 가장 밝은(또는 어두운) 배경 부분을 기준으로 확인하고, 필요하면 반투명 배경을 깔아 줍니다.
• placeholder 텍스트, 비활성처럼 보이지만 실제로는 활성인 텍스트도 대비 기준을 지킵니다.
• 호버·포커스 등 상태가 바뀐 텍스트도 대비를 확인합니다.

사례

.help { color: #999999; background: #ffffff; } /* 2.85:1 */

.help { color: #595959; background: #ffffff; } /* 7.0:1 */
.btn  { color: #ffffff; background: #0060df; } /* 5.6:1 */

자주 하는 실수

• 연한 회색 안내 문구, placeholder를 흰 배경에 사용합니다.
• 사진 배경 위에 흰 글자를 올리고 대비를 확인하지 않습니다.
• 큰 텍스트 기준(3:1)을 일반 크기 텍스트에 잘못 적용합니다.

검사 방법

• 대비 검사 도구나 개발자 도구의 색 대비 표시로 텍스트와 배경의 대비를 측정합니다.
• 글자 크기·굵기에 따라 4.5:1 또는 3:1 기준을 적용합니다.
• 호버·포커스·오류 등 상태별 텍스트 색도 측정합니다.

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 1.4.3 (새 창)