색상 대비 검사기(WCAG 2.2)

WCAG 2.2는 일반 텍스트에 4.5:1, 큰 텍스트와 인터페이스 그래픽에 3:1 이상의 대비율(AA 등급)을, AAA 등급에는 7:1 / 4.5:1을 요구합니다. 이 검사기는 표준이 정의한 그대로 대비율을 계산해 글꼴 크기에 맞는 통과 등급을 알려 주고, 가장 가까운 통과 글자색을 제안하며, 3가지 주요 색각 이상에서 어떻게 보이는지 시뮬레이션하고, 새로운 APCA 점수는 초안임을 분명히 밝혀 함께 보여 줍니다.

사용 방법

1. 글자색과 배경색을 입력합니다. HEX, rgb(), hsl(), oklch() 또는 CSS 이름을 쓸 수 있습니다.
2. 글꼴 크기를 정하고, 굵은 글자라면 체크해 알맞은 기준을 적용합니다.
3. 대비율과 AA/AAA 결과를 확인하고, 통과하지 못하면 제안된 색을 사용합니다.
4. 필요하면 팔레트를 붙여 넣어 모든 글자색/배경색 조합을 한꺼번에 평가합니다.

계산식

대비율 = (L₁ + 0.05) ÷ (L₂ + 0.05), L = 0.2126 R + 0.7152 G + 0.0722 B. 각 채널 c = v/255는 선형화합니다: c ≤ 0.04045 ? c/12.92 : ((c + 0.055)/1.055)^2.4

L₁은 더 밝은 색입니다. 대비율은 1:1(같은 색)에서 21:1(흰 바탕에 검정)까지입니다. 결과는 반올림이 아니라 버림으로 표시합니다(4.499:1은 AA 미달). 큰 텍스트는 24 px 이상 또는 굵은 18.66 px(14 pt) 이상입니다.

예시

흰색 위의 회색 #767676: 118/255 = 0.4627을 선형화하면 0.1812이므로 대비율은 1.05 ÷ (0.1812 + 0.05) = 4.54:1로, 일반 텍스트 AA는 통과하고 AAA는 통과하지 못합니다. 한 단계 밝은 #777777은 4.47:1이라 본문용 AA도 통과하지 못합니다.