색상 대비 검사기

사용법

1. 색상 선택기를 쓰거나 16진수 코드를 입력해 전경(글자) 색을 정하세요 — #RGB와 #RRGGBB 둘 다 됩니다.
2. 같은 방법으로 배경색을 정하세요.
3. 대비율과 네 개의 AA/AAA 배지를 확인하세요 — 초록은 통과, 빨강은 실패입니다.
4. 본문·제목 크기의 실시간 미리보기를 확인하세요. 아슬아슬하게 통과한 조합이라면 한쪽 색을 더 어둡게 하거나 밝게 하는 편이 편안합니다.

자주 묻는 질문

AA와 AAA는 어떤 대비율을 요구하나요?

WCAG 2.1 성공 기준 1.4.3(AA)은 일반 텍스트 4.5:1, 큰 텍스트 3:1을 요구하고, 1.4.6(AAA)은 이를 7:1과 4.5:1로 올립니다. 대부분의 법규와 조달 기준이 참조하는 것은 AA이고, AAA는 최대 가독성을 위한 더 엄격한 목표입니다.

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

18pt(24px) 이상, 또는 굵게라면 14pt(18.66px) 이상입니다. WCAG는 포인트로 기준을 정의하며 픽셀 값은 표준 96dpi CSS 비율 기준입니다. 즉 24px 일반 제목이나 19px 굵은 라벨이면 해당됩니다.

이 대비율이 아이콘·UI 요소에도 적용되나요?

WCAG 2.1의 1.4.11(비텍스트 대비)은 인터페이스 구성요소, 포커스 표시, 의미 있는 그래픽에 인접 색과 3:1 이상의 대비를 요구합니다. AA 큰 텍스트 배지와 같은 기준이므로 아이콘·테두리 검사의 간단한 대용으로 쓸 수 있습니다.

투명도를 지원하나요?

아니요 — 대비율은 불투명 색에 대해 정의됩니다. 글자나 오버레이에 알파가 있다면 먼저 실제 배경과 합성한 뒤(흰 바탕의 60% 검정은 사실상 #666666) 그 결과 색으로 검사하세요.

WCAG 2 공식이 가독성의 최종 답인가요?

ADA 판례, EN 301 549, Section 508이 인용하는 규범 표준이지만 완벽하지는 않습니다. 어두운 배경에 밝은 글자(다크 모드) 조합을 과대평가하는 경향이 있고, WCAG 3 초안의 APCA 모델이 이를 개선하려 합니다. 그전까지는 WCAG 2 대비율을 충족하되 미리보기에서 눈으로도 확인하세요.

이 주제의 가이드

• 색 대비와 접근성 있는 팔레트 WCAG 대비율이 실제로 측정하는 것, 괜찮아 보이는 색이 왜 여전히 실패하는지, 색각 이상이 그림을 어떻게 바꾸는지, 그리고 견디는 팔레트를 만드는 법.

관련 도구