대비율은 어떻게 계산되나
WCAG는 두 색의 상대 휘도 L1, L2(밝은 쪽이 L1)로 (L1 + 0.05) / (L2 + 0.05)를 계산합니다. 휘도는 RGB 각 채널을 감마 보정으로 선형화한 뒤 0.2126·0.7152·0.0722로 가중합한 값이며 흰색이 1, 검정이 0입니다. 그래서 흰 배경에 검은 글자는 21:1, 같은 색끼리는 1:1입니다. 사람 눈이 초록에 민감한 점을 반영하기 때문에 같은 명도로 보여도 파란 글자가 초록 글자보다 대비율이 높게 나옵니다. 계산은 브라우저 안에서만 이루어집니다.
AA와 AAA, 큰 텍스트의 기준
AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1이며 대부분의 법규와 가이드라인(한국 웹 접근성 지침 포함)이 요구하는 수준입니다. AAA는 각각 7:1과 4.5:1로 저시력 사용자까지 고려한 권장 수준입니다. 큰 텍스트는 18pt(24px) 이상이거나 굵은 14pt(18.66px) 이상을 뜻합니다. WCAG 2.1부터는 아이콘·입력창 테두리·포커스 표시 같은 UI 구성요소도 인접 색과 3:1 이상이어야 합니다(1.4.11). 비활성(disabled) 상태 요소, 순수 장식, 로고는 기준에서 제외됩니다.
제안 색은 어떻게 고르나
글자색을 HSL로 바꾼 뒤 색상(H)과 채도(S)는 고정하고 명도(L)만 0~100%로 훑어, 목표 대비율을 넘기면서 원래 명도와 가장 가까운 값을 고릅니다. 배경이 중간 밝기(회색 50% 부근)면 글자를 아무리 밝히거나 어둡게 해도 4.5:1에 못 미칠 수 있는데, 그때는 배경 쪽을 조정한 제안을 함께 보여 줍니다. 제안 색은 시작점일 뿐이며 브랜드 색상 팔레트 안에서 다시 고르는 것이 보통입니다.
투명도와 그라데이션
이 도구는 불투명한 두 색만 비교합니다. 반투명 글자나 배경, 그라데이션·사진 위의 글자는 실제로 합성된 색을 기준으로 봐야 하므로 가장 대비가 낮은 지점의 색을 스포이드로 찍어 넣어야 합니다. 텍스트에 그림자나 외곽선을 넣어도 WCAG 계산에는 반영되지 않습니다.
자주 묻는 질문
4.5:1을 넘는데도 읽기 힘들어요.
대비율은 명도 차이만 봅니다. 빨강-초록처럼 색상 차이만 큰 조합이나 채도가 높은 색끼리는 수치와 별개로 눈이 피로할 수 있습니다. 색약 시뮬레이터로 함께 확인하는 것이 좋습니다.
다른 도구와 소수점이 조금 달라요.
HSL을 거치면서 RGB가 1 정도 달라지면 둘째 자리가 바뀝니다. HEX를 직접 입력하면 정확합니다.
APCA는 지원하나요?
현재는 WCAG 2.x 대비율만 계산합니다. APCA는 WCAG 3 초안의 새 방식으로 아직 법적 기준이 아닙니다.