KWCAG 2.2 · 5.4.1

텍스트 콘텐츠의 명도 대비 검사 방법

KWCAG 2.2 「텍스트 콘텐츠의 명도 대비」 항목을 점검하는 방법입니다. 자동 검사가 일부를 잡아내지만, 나머지는 사람이 직접 확인해야 합니다.

어떤 기준에 해당하나요

대부분 자동으로 검사되지만, 이미지 안의 텍스트, 그라데이션·배경 이미지 위 텍스트, 마우스 오버/포커스 상태의 대비는 자동 도구가 판정하지 못할 수 있습니다. 명도 대비 4.5:1 이상(18pt 이상 큰 텍스트는 3:1)을 색상 피커로 직접 확인하세요.

이 항목은 2개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

텍스트와 배경의 명도 대비가 부족합니다 color-contrast
일반 텍스트는 배경과 4.5:1 이상, 큰 텍스트(24px 이상 또는 굵은 18.7px 이상)는 3:1 이상의 명도 대비가 필요합니다. 저시력 사용자와 밝은 야외 환경의 사용자가 텍스트를 읽을 수 있게 합니다.
```
/* 잘못된 예: 흰 배경에 연회색 텍스트 (2.3:1) */
color: #aaaaaa; background: #ffffff;

/* 올바른 예 (7.0:1) */
color: #595959; background: #ffffff;
```
브랜드 색을 유지해야 한다면 텍스트 크기를 키우거나 배경을 어둡게/밝게 조정하세요.
향상된 명도 대비(AAA) 기준에 미달합니다 color-contrast-enhanced
AAA 수준(7:1)은 필수 기준은 아니지만, 본문 텍스트가 이 수준을 충족하면 더 많은 저시력 사용자가 편하게 읽을 수 있습니다.

주소만 넣으면 이 항목을 포함한 KWCAG 33항목을 한 번에 점검해 드립니다. 로그인 없이 한 페이지를 바로 검사해 볼 수 있습니다.