WCAG 대비 검사기 가이드: AA/AAA 요구사항 및 실패 수정 방법

색상 대비는 웹에서 가장 흔한 접근성 실패입니다. WebAIM의 연간 접근성 분석에 따르면 낮은 대비는 홈페이지의 80% 이상에 영향을 미칩니다. 그러나 규칙을 알고 올바른 도구를 가지고 있다면 가장 쉽게 수정할 수 있는 문제 중 하나이기도 합니다. 이 가이드는 WCAG 대비 요구사항, 대비 비율의 작동 방식, 전체 팔레트를 재설계하지 않고 실패를 수정하는 방법을 설명합니다.

색상 대비란 무엇이며 왜 중요한가?

색상 대비는 텍스트와 배경 사이의 휘도(인지된 밝기) 차이입니다. 높은 대비는 저시력, 색맹 또는 밝은 햇빛 아래에서 화면을 보는 사용자를 포함한 모든 사람이 텍스트를 읽을 수 있게 합니다.

웹 콘텐츠 접근성 지침(WCAG) 2.1은 가독성을 보장하기 위해 최소 대비 비율을 정의합니다. 이러한 표준을 충족하는 것은 단순히 좋은 관행이 아닙니다 — 미국 장애인법(ADA), 섹션 508 및 전 세계의 유사한 법률에 따라 법적으로 요구됩니다.

WCAG 대비 요구사항

WCAG는 대비에 대해 두 가지 준수 수준을 정의합니다:

AA 레벨(최소 표준)

일반 텍스트(18pt 미만 또는 14pt 굵게 미만): 최소 비율 4.5:1

큰 텍스트(18pt+ 또는 14pt+ 굵게): 최소 비율 3:1

UI 구성 요소 및 그래픽 객체: 최소 비율 3:1(WCAG 2.1 추가)

AAA 레벨(향상된 표준)

일반 텍스트: 최소 7:1

큰 텍스트: 최소 4.5:1

대부분의 조직은 기준으로 AA 레벨을 목표로 합니다. AAA는 텍스트가 많은 애플리케이션과 시각 장애가 있는 사용자를 위한 제품에 권장됩니다.

대비 비율 계산 방법

대비 비율은 밝은 색의 상대 휘도를 어두운 색의 상대 휘도로 나눈 값으로, 1:1(대비 없음)에서 21:1(흰색 바탕에 검은색)까지의 비율로 표현됩니다.

수동으로 계산할 필요가 없습니다. WCAG 대비 검사기를 사용하여 여러 색상 쌍을 즉시 테스트하세요.

예시

텍스트	배경	비율	AA 일반	AA 큰	AAA 일반
#000000	#FFFFFF	21:1	✅ 통과	✅ 통과	✅ 통과
#767676	#FFFFFF	4.54:1	✅ 통과	✅ 통과	❌ 실패
#3B82F6	#FFFFFF	3.15:1	❌ 실패	✅ 통과	❌ 실패
#1E40AF	#FFFFFF	7.04:1	✅ 통과	✅ 통과	✅ 통과

일반적인 실패 및 수정

흰색 배경의 연한 회색 텍스트

실패: 흰색 배경의 color: #999999 = 2.85:1 — AA 실패. 수정: AA는 #767676(4.54:1), AAA는 #595959(7.0:1)로 어둡게 합니다.

흰색 배경의 브랜드 색상

실패: 흰색 배경의 color: #3B82F6(Tailwind blue-500) = 3.15:1 — AA 일반 텍스트 실패. 수정: 큰 텍스트에만 사용하거나 본문 텍스트는 #1E40AF(blue-700, 7.04:1)로 어둡게 합니다.

일괄 대비 검사기를 사용하여 몇 초 만에 전체 팔레트를 테스트하세요.