contrast WCAG 명암 대비 검사기 star

비율은 어떻게 계산되는가

WCAG 공식은 (L1 + 0.05) / (L2 + 0.05)이며, 여기서 L1은 더 밝은 색의 상대 휘도, L2는 더 어두운 색의 상대 휘도입니다. 따라서 결과값은 항상 1:1(동일한 색상)에서 21:1(순백 위의 순흑) 사이에 위치합니다. 상대 휘도는 RGB 채널의 단순 평균이 아니라 지각적으로 가중된 합, 즉 L = 0.2126R + 0.7152G + 0.0722B로 계산되며, 이는 각 채널을 sRGB 감마 곡선을 역산하여 선형화한 뒤에 적용됩니다(0.03928 미만의 값은 12.92로 나누고, 나머지는 ((c+0.055)/1.055)^2.4를 거칩니다). 녹색은 파란색보다 약 열 배 더 많은 지각적 밝기 기여도를 가지므로, 원시 밝기 값은 그대로여도 어떤 색의 녹색과 파랑 채널을 서로 바꾸면 눈에 보이는 밝기 비중이 크게 달라질 수 있습니다.

구체적인 예: 흰색 배경 위의 순수한 중간 회색 #767676은 정확히 4.54:1을 기록하며, 일반 텍스트에 대한 WCAG AA 기준인 4.5:1을 아주 살짝 넘습니다. 이를 한 단계 더 어둡게 조정한 #757575는 4.48:1로 떨어지며 AA 기준을 통과하지 못합니다. 수많은 회색-흰색 조합 디자인이 감사에서 조용히 탈락하는 이유가 여기에 있습니다: 통과와 탈락을 가르는 회색의 시각적 차이는 RGB 값 단 한 단계에 불과해, 대부분의 눈에는 보이지 않지만 자동 검사 도구나 밝은 대낮의 저시력 사용자에게는 뚜렷하게 드러납니다.

알아두어야 할 사항

WCAG 2.1은 텍스트 크기에 따라 두 가지 AA 기준을 정합니다: 일반 텍스트에는 4.5:1, 그리고 더 완화된 큰 텍스트에는 3:1입니다. 큰 텍스트는 18pt(24px) 일반 굵기 또는 14pt(18.7px) 굵게 이상으로 정의되며, 이는 굵은 획이 낮은 대비에서도 가독성을 유지하기 때문입니다. 더 엄격한 AAA 등급은 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다. 아이콘, 입력란 테두리, 포커스 표시자 같은 텍스트가 아닌 UI 요소는 WCAG 2.1 SC 1.4.11에 따라 인접한 배경 색상 대비 3:1이라는 별도의 요구 사항을 갖습니다.

이 수치는 임의로 정해진 것이 아니라 저시력, 색각 이상, 노화로 인한 대비 감도 저하를 겪는 사용자를 대상으로 한 연구에서 비롯되었으며, ADA(미국 장애인법)와 유럽 접근성법의 근거가 되는 유럽 표준 EN 301 549 같은 접근성 규정에서도 법적 참고 기준으로 사용됩니다. 명암비 실패는 자동화된 웹 접근성 감사에서 가장 자주 지적되는 문제 중 하나이며, 그래서 많은 디자인 시스템은 이 검사를 개별 디자이너에게 맡기는 대신 4.5:1 최소 기준을 색상 토큰 자체에 내장해둡니다.