합격하는 어두운-위-밝은 페어
본문, AA + AAA 여유롭게
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */고전적인 어두운 슬레이트를 거의 흰색 배경 위에. 본문 AAA(≥ 7:1)를 여유롭게 통과. 대부분의 제품 UI는 기본으로 이 영역을 노려야.
WCAG 색상 대비 검사기
WCAG 색상 대비를 확인하고 실패하는 조합을 한 번에 수정.
마지막 업데이트
전경
배경
대비 비율14.05:1
본문 텍스트
AAAAA
큰 텍스트
AAAAA
UI 컴포넌트
AA
미리보기
큰 헤딩 — 24px 굵게
본문. 빠른 갈색 여우가 게으른 개를 뛰어넘는다. 한두 단락 읽으며 긴 읽기에도 대비가 편안한지 확인하세요.
작은 캡션 — 12px 일반. WCAG는 이 크기에서 14pt 이상만 보호하므로 아주 작은 글자는 가장 엄격한 대비가 필요합니다.
인라인 링크 →
WCAG 색상 대비 검사기란?
*대비 검사기*는 디자이너와 개발자가 화면을 출시하기 전에 쓰는 도구입니다. 두 색상 — 텍스트와 그 뒤의 배경 — 사이의 **대비 비율**을 WCAG(Web Content Accessibility Guidelines)의 공식으로 계산합니다. 비율이 클수록 글이 잘 읽힙니다.
WCAG는 세 가지 기준을 둡니다. **3:1** 은 큰 헤딩(24px+ 일반 또는 18.66px+ 굵게)과 버튼·폼·아이콘 같은 인터랙티브 요소의 가시 경계 최소값. **4.5:1** 은 본문에 대한 AA 최소값으로, 대부분의 팀이 노리는 기준. **7:1** 은 AAA, 가장 높은 등급으로 저시력 사용자에게 큰 도움을 줍니다.
대비는 색의 강렬함과 **같지 않습니다**. 두 강한 브랜드 컬러도 *상대 휘도*가 가깝다면 여전히 읽기 어렵습니다. 본 도구는 각 채널에 WCAG 공식을 적용하고 정확한 비율을 보고하며 각 맥락을 등급화하므로 추측에 의존할 필요가 없습니다.
대비를 확인하며 배우는 것
- 대비 비율은 1:1(동일 색)부터 21:1(순흑 위 순백)까지. 일상 브랜드 페어는 대체로 2:1 ~ 12:1 사이.
- WCAG는 지각 밝기가 아니라 *상대 휘도*를 사용 — 흰 바탕의 노랑은 눈에 괜찮아 보여도 1.3:1로 떨어진다.
- 큰 텍스트는 완화된 기준(AA에서 3:1)을 받는데, 같은 대비에서 큰 글자가 더 잘 읽히기 때문.
대비를 단계별로 확인하기
두 색상을 입력
HEX를 입력/붙여넣거나 색상 선택기를 사용. 전경은 텍스트나 아이콘, 배경은 그 뒤에 있는 것.
대비 비율 읽기
좌측의 큰 숫자가 WCAG 대비 비율. 3:1 미만은 모든 UI에서 위험. 4.5:1 미만은 본문 실패.
AA/AAA 등급 확인
세 행이 일반 텍스트(4.5/7), 큰 텍스트(3/4.5), UI 컴포넌트(3:1)에 대해 합격/실패를 표시. 디자인이 실제 사용하는 행마다 녹색 체크를 노린다.
실패하면 "전경 조정" 클릭
AA가 실패할 때, 도구가 색조를 유지한 채 전경의 명도를 조정해 페어가 통과할 때까지 밀어줌. 다시 누르면 AAA를 노림.
최종 페어 복사
두 색이 필요한 맥락을 통과하면 CSS 스니펫(
color:와background:)을 복사해 스타일시트나 디자인 토큰 파일에 붙여넣기.
WCAG 대비 목표 요약
스타일링 대상과 필요한 레벨을 매칭하세요. 출처: WCAG 2.2 Understanding 1.4.3 와 1.4.11.
| 대상 | AA 최소 | AAA 최소 | 비고 |
|---|---|---|---|
| 본문 (< 18pt 일반) | 4.5 : 1 | 7 : 1 | 단락, 레이블, 캡션의 기본 규칙 |
| 큰 텍스트 (≥ 18pt 일반 또는 ≥ 14pt 굵게) | 3 : 1 | 4.5 : 1 | 헤딩, 히어로 카피, 큰 인용구 |
| UI 컴포넌트와 그래픽 객체 | 3 : 1 | — | 버튼 테두리, 입력 필드, 아이콘, 포커스 링 |
| 로고 또는 순수 장식 | 면제 | 면제 | 로고와 부수적 텍스트는 면제 — 다만 사용성은 별개 |
| 비활성 상태 | 면제 | 면제 | 비활성 컨트롤은 면제, 하지만 낮은 대비의 변명으로 쓰지 말 것 |
시도해 볼 대비 예시
AA를 *간신히* 놓치는 브랜드 블루
거칠게 보이지만 수치에선 진다
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */흰 바탕의 생생한 파랑은 보통 4:1 근방에 안착 — 큰 헤딩에는 가독(3:1 AA Large 합격) 하지만 본문 4.5:1 기준은 실패. 18px 이상의 버튼이나 CTA에 사용, 단락엔 부적합.
괜찮아 보이지만 아닌 노랑
눈은 속고 휘도는 속지 않는다
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 */흰 바탕의 밝은 노랑은 유명한 함정: 색은 강해 보여도 휘도가 너무 가깝다. 어두운 배경에 한정 (#facc15 위에 #1f2937 ≈ 12:1).
흔한 대비 실수
- 비율 대신 눈을 믿기. 강하고 채도 높은 색은 "강해" 보여도 WCAG 계산에선 떨어진다.
- 얇은 폰트 두께가 실효 대비를 *낮춘다*는 사실을 잊기 — 픽셀당 잉크가 적게 읽힌다. 헤어라인 두께에선 비율을 올려라.
- 순백에만 비교하기. 실제 배경은 오프 화이트, 그라데이션, 사진 — 텍스트가 진짜 얹히는 색에 대해 다시 계산.
WCAG 대비 FAQ
좋은 대비 비율은?
본문은 최소 4.5:1, 큰 헤딩이나 인터랙티브 UI는 3:1을 목표. 7:1은 AAA — 까다롭지만 문서, 안내, 에러 메시지처럼 중요한 읽기 흐름에서 가치가 있다.
AA와 AAA의 차이는?
AA는 대부분의 규제가 요구하는 접근성 법적 기준선(WCAG 2.1/2.2 AA). AAA는 저시력 사용자를 강하게 지원하려는 조직의 더 엄격한 목표. AAA는 필수는 아니지만 본문에선 합리적인 목표.
WCAG에서 "큰 텍스트"는?
WCAG는 큰 텍스트를 일반 두께에서 18pt 이상(≈ 24px), 또는 굵게에서 14pt 이상(≈ 18.66px)으로 정의. 큰 텍스트는 AA에서 3:1만 필요, 그보다 작으면 4.5:1 필요.
왜 브랜드 색이 대비에서 떨어지나?
약 50% 명도의 생생한 중간 톤 — 특히 파랑, 노랑, 빨강 — 은 흰 바탕에서 4.5:1을 살짝 못 미친다. 보통은 전경을 어둡게(또는 흰 글자의 배경으로 사용). "전경 조정"으로 가장 가까운 통과 톤을 찾을 수 있다.
비활성 컨트롤도 WCAG를 통과해야 하나?
아니오 — 비활성 컨트롤과 순수 장식은 명시적으로 면제. 하지만 "면제"는 "좋은 UX"가 아니다. 비활성 버튼을 배경과 구분 못 한다면 그 존재가 사용자에게 전달되지 않는다.
