색 대비와 WCAG: 접근성 검사 통과하기

색 대비는 실제 감사에서 가장 자주 실패하는 접근성 요구입니다. WebAIM의 연간 상위 백만 홈페이지 스캔은 그중 80% 넘는 곳에서 저대비 텍스트를 해마다 표시해 왔습니다. 실패하는 이유는 수학이 보이지 않기 때문입니다. 어둑한 방의 보정된 모니터에서 디자이너에게 괜찮아 보이는 전경과 배경이, 저시력 사용자에게, 야외 눈부심 속 누구에게나, 또는 감마 곡선이 뭉개진 싸구려 패널의 누군가에게 읽을 수 없을 수 있습니다. WCAG는 추측을 걷어내는 숫자를 주지만, 그 숫자는 틀리기 쉽고 오해하기 쉽습니다. 이 글은 그것이 어떻게 계산되는지, 중요한 임계값, 그리고 모델이 무너지는 곳을 다룹니다.

대비비

WCAG는 대비를 두 색 사이 비로 표현하며, 1:1(두 동일 색, 대비 없음)부터 21:1(순흑 위 순백, 최대)까지입니다. 비는 각 색의 상대 휘도에서 이 공식으로 계산됩니다.

(L1 + 0.05) / (L2 + 0.05)

여기서 L1은 더 밝은 색의 상대 휘도, L2는 더 어두운 색의 상대 휘도입니다. 0.05 항은 화면에서 반사되는 주변광을 모델링하는 플레어 상수입니다. 그것 없이는 순흑에 대한 비가 무한대로 치닫습니다.

상대 휘도는 날 RGB 값이 아닙니다. 각 채널은 먼저 0–1 범위로 정규화된 다음, sRGB 감마 곡선(모니터가 적용하는 인코딩을 되돌리는 전달 함수)을 풀려고 선형화되고, 그다음 세 선형 채널이 가중 합산됩니다. 가중치는 같지 않습니다. 초록이 지각 밝기에 가장 많이 기여하고, 빨강이 중간, 파랑이 가장 적게 기여합니다. 그래서 순진한 의미로 같은 명도를 가진 두 색이 매우 다른 휘도를 가질 수 있습니다. 같은 "강도"의 파랑 강조색을 초록으로 바꾸면 임계값을 가로질러 움직일 수 있습니다.

이것을 손으로 계산할 일은 드뭅니다. 그 형태를 이해하는 요점은, 컬러 피커의 명도 슬라이더가 대비 컨트롤이 아닌 이유를 아는 것입니다. 명도와 휘도는 관련되지만 같지 않고, 그 가중치가 대비 검사를 자명하지 않게 만듭니다.

임계값

WCAG 2.1은 두 적합 수준에서 합격/불합격 임계값을 정의하며, 텍스트 크기와 비텍스트 요소에 다른 기준을 둡니다.

요소	AA	AAA
일반 텍스트	4.5:1	7:1
큰 텍스트	3:1	4.5:1
UI 구성요소 및 그래픽 객체	3:1	(AAA 요구 없음)

"큰 텍스트"에는 정확한 정의가 있습니다. 최소 18pt(대략 24px), 또는 14pt 볼드(대략 18.66px 볼드)입니다. 그보다 작은 것은 "일반 텍스트"이고 AA에서 더 높은 4.5:1 기준을 통과해야 합니다. 크기 임계값이 존재하는 이유는 더 큰 글자가 더 많은 획 면적을 가져, 주어진 대비비가 큰 크기에서 읽기 더 쉽기 때문입니다.

세 번째 행은 WCAG 2.1의 성공 기준 1.4.11(비텍스트 대비)에서 옵니다. 입력 테두리, 버튼 윤곽, 토글 상태, 포커스 표시자 같은 UI 컨트롤의 경계와, 차트 선이나 아이콘 모양 같은 정보 그래픽의 의미 있는 부분을 다룹니다. 이들은 인접 색에 대해 3:1이 필요합니다. 이 기준은 텍스트 규칙보다 새롭고 널리 간과됩니다. 텍스트가 통과하는 폼이 입력 필드의 1.5:1 가는 테두리 때문에 여전히 실패할 수 있습니다.

AA는 대부분의 법적·조달 맥락에서 인용되는 적합 수준입니다(EU의 EN 301 549, 미국 Section 508 개정, 그리고 대부분의 기업 접근성 정책). AAA는 일반 콘텐츠에 대해 지향적입니다. WCAG 자체가 사이트 전체에 걸친 AAA 적합이 종종 달성 불가능하다고 언급합니다.

감사가 가장 자주 표시하는 실패

한 줌의 패턴이 대비 위반 대부분을 차지합니다.

• 연회색 플레이스홀더와 보조 텍스트. 흰 배경 위 #999는 플레이스홀더와 캡션의 거의 보편적 기본값입니다. 약 2.85:1로 계산되며, 일반 텍스트에 대해 명백한 AA 실패입니다. 플레이스홀더 텍스트는 실제 콘텐츠이고 같은 기준으로 판단됩니다.
• 괜찮아 보이는 브랜드 색. 중간 톤 브랜드 팔레트가 전형적 함정입니다. 채도 높은 브랜드 주황이나 하늘색은 그것을 고른 팀에게 자신 있고 읽기 쉽게 보이다가, 흰 배경 위 4.5:1을 간발의 차로 실패합니다. 색이 "틀린" 게 아니라, 그 짝에서 본문 텍스트를 나를 수 없을 뿐입니다.
• 이미지와 그라데이션 위 텍스트. 히어로 헤드라인이 사진 위에 앉습니다. 대비는 이미지의 어두운 3분의 1 위에서는 괜찮고 밝은 3분의 1 위에서는 실패합니다. 배경이 단일 색이 아니어서 감사와 자동 도구가 여기서 힘들어합니다.
• 비활성 상태. 비활성 컨트롤은 명시적으로 대비 요구에서 면제됩니다. 그것은 사용성 승리가 아니라 적합 기술상의 사항입니다. 아무도 읽을 수 없을 만큼 희미한 비활성 버튼은 여전히 나쁜 경험이고, 사용자는 종종 "비활성"과 "고장"을 구별하지 못합니다.
• 호버와 포커스 상태. 팀은 링크나 버튼의 정지 상태를 검사하고, 호버·활성· 포커스 스타일이 각각 통과해야 하는 새 색 짝을 도입한다는 것을 잊습니다. 특히 포커스 표시자는 3:1 비텍스트 규칙에 해당합니다.

실용적 수정

수정은 보통 작고 국소적입니다.

가장 흔한 것은 한 색을 살짝 옮기는 것입니다. 너무 밝은 회색을 #999에서 약 #767676으로 어둡게 하면 문자 변화 없이 흰 배경 위 4.5:1을 통과합니다. 실패하는 브랜드 색은 버릴 필요가 드뭅니다. 텍스트 용으로 몇 퍼센트 어둡게 하면서 큰 표시 글자나 장식 채움에는 원본을 유지하는 것으로 충분합니다. 빠르게 반복하는 한 방법은 한 표기법으로 값을 만지고 우리 컬러 변환기로 다른 표기법으로 되읽어 결과를 확인하는 것입니다.

이미지 위 텍스트에는 스크림(scrim)을 더하세요. 이미지와 텍스트 사이 반투명 어두운(또는 밝은) 레이어, 또는 텍스트 블록 뒤에만 두는 그라데이션 오버레이입니다. 이는 사진이 아래에서 무엇을 하든 알려진 배경 휘도를 보장합니다.

마지막으로, 색에만 의존하지 마세요. 이것은 별도의 WCAG 기준(1.4.1, 색의 사용)이지 대비 규칙이 아니지만, 같은 작업과 함께 다닙니다. 빨갛게 변하는 것만으로 표시된 에러 필드, 색조만으로 본문 텍스트와 구별되는 링크, 색만으로 식별되는 차트 계열은 모두 색 차이를 지각하지 못하는 사용자에게 실패합니다. 색과 함께 아이콘, 밑줄, 라벨, 또는 패턴을 더하세요.

모델이 무너지는 곳

WCAG 2 대비 공식이 무엇인지 정직하게 말합시다. 둔한 도구입니다. 계산이 단순하도록 설계됐고, 사람 지각을 특별히 잘 모델링하지 않습니다. 일부 다크 모드 짝에는 너무 관대하고(어두운 배경 위 밝은 텍스트가 가늘고 읽기 어려워 보이면서도 비를 통과할 수 있습니다) 어떤 밝음 위 밝음 조합에는 너무 엄격한 것으로 알려져 있습니다. 단일 "큰 텍스트" 컷오프를 넘는 글꼴 두께와 크기는, 가는 헤어라인 글꼴과 두꺼운 그로테스크가 같은 색 짝에서 매우 다르게 읽히는데도, 전혀 들어가지 않습니다.

제안된 대체물은 APCA(접근성 지각 대비 알고리즘)로, WCAG 3을 위해 개발 중인 대비 방법입니다. APCA는 짝의 극성(어두움 위 밝음 대 밝음 위 어두움이 눈에 다르게 동작)을 고려하고 글꼴 두께와 크기를 반영합니다. 의미 있는 개선이지만 여전히 초안입니다. WCAG 3은 권고가 되려면 수년 남았고, APCA는 규범적이지 않습니다. 오늘 적합 의무가 있다면, WCAG 2.1의 4.5:1 / 3:1 숫자에 대해 테스트합니다. APCA는 경계 사례를 위한 유용한 점검으로 다루되, 인용하는 표준으로 다루지 마세요.

특정 전경/배경 짝을 AA와 AAA 임계값에 대해 확인하려면, 큰 텍스트와 UI 구성요소 기준을 포함해, 우리 색 대비 검사기가 비를 계산하고 어느 수준을 통과하는지 알려줘, 경계 색을 감사에 나타나기 전에 해결할 수 있습니다.