색상 대비 검사기가 하는 일

글자색과 배경색을 고르면 두 색의 대비율을 계산해 21:1부터 1:1까지의 숫자로 알려 주고, 그 값이 웹 접근성 지침(WCAG)의 AA·AAA 기준을 통과하는지 네 가지 항목으로 나눠 표시합니다. 아래쪽 미리보기 상자는 고른 색을 그대로 입혀 큰 글씨와 작은 글씨를 보여 주기 때문에, 숫자만으로는 감이 안 올 때 눈으로 바로 확인할 수 있어요.

대비율은 두 색의 상대 휘도를 구해 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)로 계산합니다. WCAG는 본문 크기 글자에 4.5:1, 큰 글자(대략 18pt 이상 또는 14pt 이상 굵은 글씨)에 3:1을 AA 기준으로 요구하고, 더 엄격한 AAA는 각각 7:1과 4.5:1을 요구해요. 화면의 배지 네 개가 이 조합을 하나씩 통과·실패로 보여 줍니다.

색은 색상 선택기로 고르거나 HEX 코드를 직접 입력할 수 있고, #fff처럼 세 자리로 줄여 쓴 표기도 인식합니다. 전경·배경을 서로 바꿔 보고 싶으면 교체 버튼 한 번이면 되고, 계산과 미리보기는 색을 건드리는 즉시 다시 그려집니다. 브랜드 색이 본문에 쓰기 충분히 진한지, 회색 안내문이 너무 흐리지 않은지 점검할 때 유용합니다.

사용 방법

1. 전경색 칸에 글자 색을, 배경색 칸에 바탕 색을 지정합니다. 색 상자를 눌러 고르거나 오른쪽에 HEX 코드를 붙여넣으면 됩니다.
2. 가운데 큰 숫자로 대비율을 확인합니다.
3. 아래 네 개의 배지에서 AA·AAA, 작은 글자·큰 글자 조건의 통과 여부를 봅니다.
4. 기준을 못 넘겼다면 색을 조금씩 어둡게·밝게 조정하면서 숫자가 올라가는지 지켜봅니다.