색상 대비 검사기 (WCAG·KWCAG 명도 대비)

WCAG 2.2의 상대 휘도 정의를 씁니다. 각 색 채널(0~255)을 255로 나눈 뒤 sRGB 선형화(0.04045 이하면 12.92로 나누고, 아니면 ((c+0.055)/1.055)의 2.4제곱)를 하고, L = 0.2126R + 0.7152G + 0.0722B로 휘도를 구합니다. 대비비 = (밝은 색 L + 0.05) ÷ (어두운 색 L + 0.05)이고 값은 1:1(같은 색)부터 21:1(검정과 흰색)까지입니다.

한국형 웹 콘텐츠 접근성 지침(KWCAG 2.2)은 텍스트와 배경의 명도 대비를 4.5:1 이상으로 보며, 공공기관 웹사이트 접근성 인증심사에서도 이 값을 기준으로 삼습니다. WCAG 2.2 AA의 일반 텍스트 기준과 같은 값입니다. 공공기관 의무와 심사 방식은 제도에 따라 달라질 수 있으니 최종 판단은 심사 기관의 최신 지침을 확인하세요.

18pt(약 24px) 이상이거나 14pt(약 18.7px) 이상이면서 굵은 글씨일 때 큰 글씨로 봅니다. 큰 글씨는 AA 3:1, AAA 4.5:1이면 됩니다. 일반 텍스트는 AA 4.5:1, AAA 7:1입니다. 버튼 테두리, 아이콘 같은 UI 컴포넌트와 그래픽은 인접한 색과 3:1 이상이어야 합니다.

WCAG는 값을 반올림하지 말라고 합니다. 실제 값이 4.499이면 화면에 4.50으로 보여도 4.5에 미달이라 실패입니다. 이 검사기는 원래 값으로 판정하고 소수 둘째 자리는 표시용으로만 쓰며, 반올림 때문에 기준에 닿은 것처럼 보이면 따로 알려 줍니다. 예를 들어 #777777은 흰 배경에서 4.48:1로 일반 텍스트 AA에 실패하고, #767676은 4.54:1로 통과합니다.

8자리 HEX나 rgba()의 투명한 글자색은 배경 위에 올린 색으로, 투명한 배경색은 흰색 위에 올린 색으로 계산합니다. 그라디언트나 사진 위의 글자는 하나의 배경색이 없으므로, 글자가 놓인 가장 밝거나 어두운 지점의 색으로 따로 검사해 주세요.

고른 색의 색상과 채도는 그대로 두고 HSL 명도만 올리거나 내리면서, 기준을 넘는 가장 가까운 지점을 이분 탐색으로 찾습니다. 채도가 높은 색은 기준을 맞추려고 꽤 어두워지거나 밝아질 수 있습니다. 배경과 어떤 명도로도 기준을 못 넘는 조합은 제안이 나오지 않습니다.