디자이너를 위한 WCAG 색상 대비 가이드

텍스트가 WCAG AA 대비 기준을 통과하지 못하면 약 2억 8500만 명의 시각 장애인이 읽을 수 없습니다. 게다가 EU와 미국에서 법적 위험도 점점 커지고 있습니다. 다행인 점은 규칙이 간단하다는 것입니다.

4.5:1 규칙

본문 텍스트는 배경과의 대비비가 최소 4.5:1 이상이어야 WCAG AA를 통과합니다. 큰 텍스트(24px 이상 일반 또는 18px 이상 굵게)는 3:1로 기준이 낮아집니다.

AAA 준수의 경우: 본문 7:1, 큰 텍스트 4.5:1입니다.

대비비 계산 방법

WCAG는 상대 휘도를 사용합니다. 각 색상을 특정 공식으로 휘도 값(0 = 검정, 1 = 흰색)으로 변환한 후 (L1 + 0.05) / (L2 + 0.05)를 계산합니다. 여기서 L1은 더 밝은 색상입니다.

직접 계산할 필요 없이 무료 대비 체커를 사용하여 두 색상을 입력하면 비율을 확인할 수 있습니다.

자주 발생하는 실패 사례

• 흰색 위 연한 회색 — #999 on #fff = 2.85 (실패). #767676 on #fff = 4.54 (통과).
• 노란색 위 흰색 — 거의 항상 실패합니다. 노란색에는 어두운 텍스트를 사용하세요.
• 본문 텍스트 내 컬러 링크 — 대부분의 파란색 링크는 흰색 배경에서 통과하지만 연한 회색 배경에서는 실패합니다. 실제 주변 배경을 테스트하세요.
• 멋져 보이는 브랜드 색상 — 종종 실패합니다. 오프화이트 배경을 추가하거나 텍스트를 어둡게 하세요.

접근성 좋은 색상 조합 고르기

세 가지 신뢰할 수 있는 패턴:

1. 밝은 배경에 어두운 텍스트 — #1f2937 on #fff = 14:1 (완벽).
2. 어두운 배경에 흰색 텍스트 — #fff on #1f2937 = 14:1 (완벽).
3. 강조 색상에 어두운 텍스트 — #1f2937 on #fbbf24 = 9:1 (버튼에 완벽).

텍스트 외 요소

WCAG 2.1은 비텍스트 요소(버튼, 포커스 링, 양식 테두리)에도 3:1을 요구합니다. 체커가 둘 다 처리합니다.

위젯과 충돌하지 않는 배경화면

시계 위젯과 알림 뒤에 배경화면을 설정하는 디자이너라면 위젯 영역에서 대비가 5:1 미만인 배경화면을 선택하세요. 가우시안 블러 도구로 배경화면의 복잡한 부분을 부드럽게 처리하여 위젯 가독성을 높일 수 있습니다.

무료 도구 사용해 보기

이 가이드의 대부분은 지금 바로 사용할 수 있는 실용적인 도구와 함께 제공됩니다. 첫 실행 시 회원가입이 필요 없습니다:

• 이미지 리사이저 — 픽셀 단위 다운스케일 + 업스케일.
• WebP 변환 — JPG보다 30-50% 작은 파일.
• 배경 제거 — 한 번 클릭으로 컷아웃, 투명 PNG.
• 파비콘 생성기 — 하나의 소스로 모든 브라우저 크기.
• 소셜 미디어 리사이저 — 모든 플랫폼의 정확한 치수.
• 일괄 처리 — 최대 200개 이미지에 모든 도구 적용.

전체 도구 카탈로그를 살펴보세요.