명도 대비 검사기

사용 방법

1. 글자색과 배경색에 3자리 또는 6자리 HEX 코드를 입력하거나 색상 선택기를 사용합니다.
2. 반올림하지 않은 WCAG 2 대비율과 AA·AAA·UI 요소 결과를 확인합니다.
3. 밝은 배경과 어두운 배경을 구분하는 APCA Lc 값을 참고합니다.
4. 실시간 미리보기로 읽기 상태를 보고 결과를 복사해 디자인 검토나 이슈에 붙여 넣습니다.

WCAG 2.2 명도 대비 기준

WCAG 2.2 성공 기준 1.4.3에서 AA는 일반 텍스트 4.5:1 이상, 큰 텍스트 3:1 이상을 요구합니다. 큰 텍스트는 일반 글자 24 CSS px 이상 또는 굵은 글자 약 18.66 CSS px 이상입니다. AAA 기준은 일반 텍스트 7:1, 큰 텍스트 4.5:1입니다.

버튼 경계, 아이콘, 의미 있는 그래픽 같은 비텍스트 요소는 성공 기준 1.4.11에 따라 인접 색상과 3:1 이상이어야 합니다. 통과 여부는 표시용 반올림 수치가 아니라 계산된 원래 대비율로 판정합니다.

대비율 계산 방식

WCAG 대비율은 sRGB 채널을 선형화한 상대 휘도로 계산합니다. 공식은 (더 밝은 색의 L + 0.05) ÷ (더 어두운 색의 L + 0.05)이며, 불투명한 sRGB 색상은 1:1부터 21:1 사이입니다.

이 결과는 단색 전경과 배경의 기준입니다. 사진, 그라데이션, 투명 레이어, 상태에 따라 달라지는 배경 위 텍스트는 실제 사용 화면에서 가장 불리한 배경을 따로 점검해야 합니다.

APCA는 참고용으로 사용합니다

APCA는 밝기 대비 Lc를 부호와 함께 표시합니다. 어두운 글자와 밝은 배경, 밝은 글자와 어두운 배경은 같은 색상 조합 범위라도 다른 값을 얻을 수 있습니다. 이 도구는 APCA 0.1.9 기준 상수를 사용하며, 절댓값이 클수록 밝기 대비가 큰 편입니다.

APCA는 아직 WCAG 2 성공 기준을 대체하지 않습니다. 현재의 납품·접근성 검사에는 WCAG 2 결과를 사용하고, APCA는 텍스트 조합을 추가로 판단하는 참고값으로 사용합니다.

자주 묻는 질문