글자색과 배경색 조합이 WCAG 대비 기준을 통과하는지 확인하고, 통과하지 못하면 어울리는 대안을 제안합니다. 접근성 감사에서 가장 많이 지적되는 항목이 대비입니다.
WCAG 명도 대비는 두 색의 상대 휘도 비율이며 1:1에서 21:1 사이입니다. 실무에서 의미 있는 기준은 본문 텍스트 AA의 4.5:1, 큰 텍스트(18pt 또는 14pt 굵게)와 UI 구성요소의 3:1, 그리고 AAA의 7:1입니다. 접근성 심사와 점점 늘어나는 조달 체크리스트가 검사하는 숫자도 이것입니다.
휘도는 사람이 느끼는 밝기와 다릅니다. 그래서 선명해 보이는 노란색이 흰 배경에서 기준에 미달하고 중간 회색이 통과하는 일이 생깁니다. 이 페이지는 입력한 색 조합의 비율을 계산해 기준별 통과·미달을 표시합니다. 다 만들어 놓고 심사에서 지적받기 전에, 색을 정하는 단계에서 판단할 수 있습니다.
사람들이 가장 자주 틀리게 기억하는 규칙이 3:1입니다. 이 값은 큰 글자에 적용되고, 큰 글자란 18pt, 픽셀로는 약 24px이거나 14pt 굵은 글자를 뜻합니다. 본문보다 크기만 하면 되는 것이 아닙니다. 20픽셀로 잡은 제목은 지침이 보기에 일반 텍스트이므로 4.5:1을 온전히 충족해야 합니다. 같은 3:1 기준은 인터페이스 구성 요소와 의미를 가진 그래픽에도 적용됩니다. 아이콘만 있는 버튼, 포커스 링, 입력 필드의 테두리를 잡아내는 조항이고, 하나같이 디자인 리뷰에서 건너뛰기 쉬운 것들입니다.
대비는 상대 휘도로 계산되는데, 휘도는 사람이 느끼는 밝기와 다릅니다. 공식은 초록을 빨강이나 파랑보다 훨씬 무겁게 잡습니다. 사람의 시각이 그렇기 때문이고, 가중치를 적용하기 전에 감마 보정도 거칩니다. 그 결과가 실무에서 뜻하는 바는 이렇습니다. 휘도가 흰색에 가까운 진한 노랑은 선명해 보여도 흰 배경에서 기준을 통과하지 못하고, 평범해 보이는 중간 회색은 여유 있게 통과합니다. 팔레트를 눈으로 판단할 수 없는 이유이고, 딱 봐도 구분되는 조합이 감사에서 탈락하는 이유입니다.
색만으로 의미를 전달하지 말라는 것은 대비의 결과가 아니라 별개의 요구사항입니다. 오류는 빨강, 성공은 초록으로만 구분하는 화면은 색각 이상이 있는 적지 않은 사용자에게 구분되지 않고, 인쇄물이나 흑백 화면에서도 똑같아집니다. 아이콘이나 글자, 모양을 함께 쓰면 색을 빼지 않고도 정보를 지킬 수 있습니다. 인터페이스를 만들기 전에 여기서 팔레트를 확인하는 편이, 접근성 검토에서 두 문제를 한꺼번에 발견하는 것보다 훨씬 쌉니다.
사진이나 그러데이션 위에 얹힌 글자에는 대비 비율이 하나로 정해지지 않습니다. 대비 검사기가 스스로 답할 수 없는 경우입니다. 기준은 글자 뒤의 평균이 아니라 가장 나쁜 지점에 적용되므로, 이미지의 어두운 쪽에서 통과하는 캡션이 밝은 쪽에서 탈락하면 그 페이지는 전체로서 기준을 충족하지 못합니다. 보통의 해법은 글자 뒤에 불투명하거나 반투명한 판을 깔거나, 그 아래 이미지를 어둡게 덮는 막을 두거나, 분리가 보장될 만큼 충분히 진한 글자 그림자를 주는 것입니다. 셋 다 확정된 두 색을 만들어 내므로 그다음에는 여기서 확인할 수 있습니다.