실제 제품 디자인에서의 WCAG 대비비 — 사례와 함정

대비비가 실제로 측정하는 것

WCAG 대비비는 두 색 — 텍스트와 그 배경 — 의 상대 휘도(relative luminance)를 1:1(동일)부터 21:1(순흑에 순백)까지의 척도로 비교합니다. 공식은 (L1 + 0.05) / (L2 + 0.05)이며, L1은 더 밝은 색의 휘도, L2는 더 어두운 색의 휘도입니다. 핵심어는 색상이 아니라 휘도입니다: 대비는 색이 얼마나 밝거나 어두운가에 관한 것이지, 얼마나 달라 보이는가가 아닙니다.

그래서 선명하고 명백히 다른 두 색도 여전히 실패할 수 있습니다. 중간 빨강과 중간 초록은 거의 같은 휘도를 가질 수 있어 1:1에 가까운 비를 냅니다 — 한쪽의 텍스트를 다른 쪽 배경에 두면 '다른 색'이어도 거의 읽을 수 없습니다. 대비와 색의 화려함은 같은 것이 아닙니다.

임계값, 정확히

WCAG 2의 AA 레벨은 일반 텍스트에 4.5:1, 큰 텍스트에 3:1을 요구합니다. 큰 것은 적어도 24px(18pt), 또는 굵을 때 18.66px(14pt)로 정의됩니다 — 더 작은 픽셀 크기는 굵을 때만 '큰' 것으로 셉니다. AAA 레벨은 이를 일반 7:1, 큰 4.5:1로 올립니다.

사람들이 잊는 별도의 규칙이 있습니다: 성공 기준 1.4.11(비텍스트 대비)은 UI 컴포넌트와 의미 있는 그래픽 — 버튼 테두리, 입력 윤곽, 아이콘, 포커스 표시 — 에 대해 인접 색과 3:1을 요구합니다. 비활성 컨트롤은 대비 최소값에서 면제되지만, 그 면제는 보기 어려운 비활성 상태를 정당화하는 데 널리 남용됩니다.

실제 디자인이 어디서 실패하는가

가장 흔한 실패는 '우아함'의 이름으로 흰 바탕에 옅은 회색 본문을 두는 것입니다. #999999 같은 중간 회색은 흰색에 대해 약 2.8:1뿐 — AA를 대놓고 떨어뜨립니다. 플레이스홀더 텍스트는 보통 더 옅고 거의 통과하지 못하는데, 팀은 일상적으로 진짜 지시를 거기에 넣습니다.

브랜드 색은 또 다른 함정입니다: 많은 중간 톤 브랜드 팔레트는 흰 필드 위 버튼 레이블에서 AA를 떨어뜨려, 레이블을 어둡게 하거나 버튼을 어둡게 해야 합니다. 히어로 이미지나 그라디언트 위의 텍스트는 가장 미묘한 경우입니다 — 대비비가 픽셀마다 바뀌므로, 캡션이 사진의 어두운 부분에서 통과하고 밝은 부분에서 실패할 수 있습니다. 다크 모드도 잊힙니다: 검정 위의 낮은 대비 짙은 회색은 라이트 모드 사촌만큼 불합격입니다.

체커가 잡지 못하는 함정

대비 체커는 두 평평한 색을 비교하지만, 실제 텍스트는 평평하지 않습니다. 보통 굵기로 통과하는 비도 헤어라인이나 가는 폰트에서는 잘 안 읽힐 수 있습니다. 수학이 획 두께를 무시하기 때문입니다 — 가는 글리프는 비가 시사하는 것보다 화면에 잉크를 덜 놓습니다. 작은 안티앨리어싱 텍스트도 가장자리에서 대비를 실질적으로 낮춥니다.

함정 둘 더: 큰 텍스트 면제를 굵지만 여전히 작은 텍스트에 적용하기(크기 임계값을 충족해야 합니다), 그리고 통과한 비를 완전한 접근성으로 취급하기. 대비(1.4.3)와 색에만 의존하지 않기(1.4.1)는 별개의 요구입니다 — 대비는 통과하지만 본문과 색으로만 구별되는 링크는 여전히 실패합니다. 이미지와 그라디언트 위의 텍스트는 평균이 아니라 항상 최악의 픽셀에서 테스트하세요.

오늘은 WCAG 2, 내일은 APCA

WCAG 2의 비는 유용하지만 불완전합니다. 폰트 크기, 굵기, 또는 인간 시각이 밝은-위-어두운 대 어두운-위-밝은을 실제로 어떻게 지각하는지를 모델링하지 않기 때문에, 어떤 밝은 텍스트 조합에는 너무 엄격하고 어떤 어두운 조합에는 너무 관대할 수 있습니다. 디자이너는 어떤 쌍이 '괜찮아 보이는데' 실패하거나 '가늘어 보이는데' 통과할 때 이를 느낍니다.

제안된 대체는 APCA(Accessible Perceptual Contrast Algorithm)로, 미래의 WCAG 3을 위해 탐색되고 있습니다. APCA는 텍스트 크기, 굵기, 대비 극성에 가중치를 두어 지각에 더 가깝게 맞추려 합니다. 그것은 아직 규범적이지 않습니다 — 그것에 대해 적합성을 주장할 수 없습니다. 실용적 입장: 오늘은 WCAG 2 AA로 출시하고, 표준이 어디로 향하는지 보려면 APCA를 주시하세요.

요점

두 숫자를 외우세요: 본문에 4.5:1, 큰 텍스트와 UI 컴포넌트에 3:1. 대부분의 결정이 그리로 돌아옵니다.

회색-위-흰색 '우아함'을 믿지 마세요 — #999를 흰색에 두면 AA를 떨어뜨립니다; 출시 전에 확인하세요.

이미지와 그라디언트 위의 텍스트는 최악의 픽셀에서 테스트하세요 — 평균이 아니라. 비가 영역에 걸쳐 변하기 때문입니다.

헤어라인 폰트로 통과한 비도 실제 독자에게는 여전히 실패합니다 — 숫자만이 아니라 굵기와 크기를 고려하세요.

대비와 색 독립성은 별개의 요구입니다 — 색을 유일한 신호로 쓰지 마세요. 이 사이트의 색 대비 체커는 임의의 쌍에 대해 WCAG 2 비와 AA/AAA 결과를 계산합니다.