색상 대비 검사기

색상 대비 검사기란?

색상 대비 검사기는 디자이너, 개발자, 접근성 테스터를 위한 무료 온라인 WCAG 대비비 검사 도구입니다. 전경(텍스트) 색과 배경색을 받아 각각의 상대 휘도를 계산하고 대비비를 1:1부터 21:1까지의 값으로 알려 줍니다. 이어서 그 비율이 WCAG 2.1 AA 레벨(일반 4.5:1, 큰 글자 3:1)과 AAA 레벨(일반 7:1, 큰 글자 4.5:1)을 충족하는지 판정하고, 두 색으로 샘플 텍스트 미리 보기를 그려 한눈에 가독성을 판단할 수 있게 합니다. 디자인을 배포하기 전에 본문, 버튼, 링크, 라벨이 읽기 쉬운지 검증할 때 사용하세요.

색상 대비 검사기 사용법

1. 전경(텍스트) 색을 HEX 값으로 입력하거나 붙여넣고, 또는 네이티브 색상 선택기를 클릭해 시각적으로 고릅니다.
2. 텍스트가 놓이는 배경색에도 같은 작업을 합니다.
3. 대비비 출력을 확인합니다. 4.5:1 같은 값으로 표시됩니다(1:1은 같은 색, 21:1은 순흑과 순백).
4. 일반 텍스트와 큰 텍스트(18pt / 14pt 굵게 이상)의 AA·AAA 배지를 확인해 어떤 레벨을 통과하는지 봅니다.
5. 두 색으로 그려진 샘플 텍스트 미리 보기를 보고 텍스트가 편안하게 읽히는지 확인합니다.
6. 디자인에 필요한 대비 수준에 도달할 때까지 두 색 중 하나를 조정합니다.

예시

전경 #595959, 배경 #ffffff

대비비 7.00:1 — 일반과 큰 텍스트 모두 AA와 AAA 통과

전경 #999999, 배경 #ffffff

대비비 2.85:1 — 일반 AA와 AAA 실패, 본문에 필요한 어떤 기준도 통과하지 못함

전경 #767676, 배경 #ffffff

대비비 4.54:1 — AA 일반과 AA 큰 글자 통과, 그러나 AAA 일반은 실패

자주 묻는 질문

WCAG는 어느 정도의 대비비를 요구하나요?

WCAG 2.1 AA 레벨은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1을 요구합니다. AAA 레벨은 더 엄격해 일반 텍스트 7:1, 큰 텍스트 4.5:1입니다. 이 검사기는 이 네 가지 기준 각각에 통과/실패 배지를 표시합니다.

큰 텍스트의 기준은 무엇인가요?

WCAG는 큰 텍스트를 18pt(약 24px) 이상, 또는 굵게일 때 14pt(약 18.66px) 이상으로 정의합니다. 글자가 클수록 읽기 쉬워 큰 텍스트의 대비 요구 기준이 낮으므로, 일반 텍스트가 실패해도 큰 텍스트 배지는 통과할 수 있습니다.

대비비는 어떻게 계산되나요?

공식 WCAG 공식을 사용합니다. 각 색의 상대 휘도를 선형화한 sRGB 채널에서 계산하고, 비율은 (더 밝은 값 + 0.05) / (더 어두운 값 + 0.05)로 구합니다. 결과는 1:1(같은 색)부터 21:1(흰 바탕에 검정)까지입니다.

알파, RGB, 색상 이름을 지원하나요?

입력은 HEX만 지원하며(#rgb 축약형 또는 #rrggbb), 각 입력란에 네이티브 색상 선택기가 있습니다. 알파/불투명도나 부분 투명도는 반영하지 않습니다——반투명 레이어는 먼저 불투명한 색으로 합성한 뒤 검사하세요.

제 색상이 서버로 전송되나요?

아니요. 휘도와 비율 계산은 모두 JavaScript로 브라우저 안에서 실행됩니다——어떤 색상도 업로드되지 않고 서버로 전송되는 것이 없으므로 비공개로 작동하며, 페이지를 한 번 로드한 후에는 오프라인에서도 사용할 수 있습니다.