WCAG 명암비 4.5:1, 왜 이 숫자가 기준일까
디자인 시안에서 "선명해 보이는데" 웹 접근성 검사 도구에서는 탈락하는 색상 조합을 본 적이 있을 겁니다. 명암비는 사람이 눈으로 "괜찮아 보인다"고 판단하는 감각이 아니라, 정해진 공식으로 계산되는 정확한 숫자이기 때문에 이런 일이 생깁니다.
요약 ① 명암비는 색의 상대 휘도(relative luminance)를 계산해 나오는 정확한 숫자이지, 눈으로 판단하는 감각적 기준이 아닙니다. ② WCAG는 일반 텍스트는 4.5:1(AA), 큰 텍스트는 3:1(AA)로 기준 자체가 다릅니다. ③ 눈으로 또렷해 보여도 계산상 기준에 못 미치는 조합이 있고, 반대의 경우도 있습니다.
명암비를 감으로 판단할 수 없는 이유
같은 색 조합이라도 모니터 밝기, 주변 조명, 보는 사람의 시력에 따라 "잘 보인다/안 보인다"는 인상이 크게 달라집니다. 저시력이나 색각 이상이 있는 사람에게는 일반적인 기준으로 또렷해 보이는 조합도 구분이 어려울 수 있습니다.
이런 개인차와 환경차를 넘어 누구에게나 최소한의 가독성을 보장하려면, 감각이 아니라 계산 가능한 객관적 기준이 필요합니다. WCAG(웹 콘텐츠 접근성 지침)가 명암비를 숫자로 정의해 둔 이유가 여기에 있습니다.
실제 계산 공식: 상대 휘도부터
명암비 계산은 두 단계로 이루어집니다. 먼저 각 색상의 상대 휘도를 구하고, 그다음 두 휘도 값으로 비율을 계산합니다.
상대 휘도는 RGB 각 채널 값을 그대로 더하는 것이 아닙니다. 사람 눈이 빨강·초록·파랑을 서로 다른 민감도로 인식한다는 점을 반영해, 각 채널에 서로 다른 가중치를 곱한 뒤 더합니다. 초록 채널에 가장 큰 가중치가, 파랑 채널에 가장 작은 가중치가 곱해지는 식입니다. 이 계산에 앞서 각 채널 값은 감마 보정이라는 과정을 거쳐 선형화됩니다.
이렇게 구한 두 색의 상대 휘도값을 밝은 쪽을 분자로, 어두운 쪽을 분모로 놓고 각각에 0.05를 더해 나누면 명암비가 나옵니다. 두 색이 완전히 같으면 1:1이 되고, 완전한 검정과 흰색의 조합이면 가장 큰 값인 21:1이 나옵니다.
이 계산을 손으로 직접 하려면 RGB 값을 0~1 범위로 바꾸고, 채널마다 감마 보정 공식을 따로 적용하고, 가중치를 곱해 더하는 과정을 색상 하나당 반복해야 합니다. 비교하고 싶은 조합이 여러 개라면 이 계산을 그만큼 반복해야 해서 계산기 없이는 사실상 손으로 하기 어렵습니다.
글자색·배경색 HEX만 넣으면 명암비를 즉시 계산하고, 기준 미달 시 통과하는 대안 색상까지 추천합니다.
AA·AAA, 그리고 큰 텍스트 기준이 다른 이유
WCAG의 명암비 기준은 하나의 숫자가 아니라 텍스트 크기와 요구 수준에 따라 나뉩니다.
| 구분 | AA(최소 기준) | AAA(강화 기준) |
|---|---|---|
| 일반 텍스트 | 4.5:1 | 7:1 |
| 큰 텍스트 | 3:1 | 4.5:1 |
여기서 "큰 텍스트"의 정의는 임의로 정한 것이 아니라 WCAG가 명시한 구체적인 기준이 있습니다. 18포인트 이상이거나, 굵게(bold) 처리된 경우라면 14포인트 이상인 텍스트가 이 구간에 해당합니다.
같은 글자라도 크기가 크면 획 하나하나의 형태가 더 뚜렷하게 구분되기 때문에, 상대적으로 낮은 명암비에서도 읽는 데 지장이 적습니다. WCAG가 큰 텍스트에 더 낮은 숫자 기준을 허용하는 이유는 여기에 있습니다. 반대로 작은 글자는 획의 두께 자체가 가늘어서, 같은 명암비라도 더 쉽게 뭉개져 보입니다.
자주 놓치는 함정
명암비 계산 자체는 정확하지만, 실제 화면에 적용할 때 자주 놓치는 지점들이 있습니다.
| 상황 | 놓치기 쉬운 점 |
|---|---|
| 배경 이미지 위의 텍스트 | 단색 배경 기준 계산이라, 사진처럼 밝기가 곳곳에서 다른 배경에는 그대로 적용하기 어렵습니다 |
| 그라디언트 배경 | 시작색과 끝색의 명암비가 다르면, 텍스트가 놓이는 가장 대비가 낮은 지점을 기준으로 판단해야 합니다 |
| 마우스 오버·포커스 상태 | 기본 상태 색상만 확인하고, 상태가 바뀔 때의 색상 조합은 그냥 넘어가기 쉽습니다 |
이런 경우는 대표값 하나로 판단하지 말고, 실제로 텍스트가 겹치는 가장 불리한 지점을 기준으로 다시 계산해봐야 합니다.
정리
- 명암비는 감각이 아니라 상대 휘도 공식으로 계산되는 정확한 숫자입니다.
- 일반 텍스트는 AA 4.5:1·AAA 7:1, 큰 텍스트(18pt 이상 또는 굵게 14pt 이상)는 AA 3:1·AAA 4.5:1이 기준입니다.
- 큰 텍스트 기준이 낮은 이유는 글자 크기가 클수록 형태 구분이 쉬워 낮은 명암비에서도 읽기 지장이 적기 때문입니다.
- 배경 이미지, 그라디언트, 마우스 오버 상태처럼 색이 균일하지 않은 상황은 가장 대비가 낮은 지점 기준으로 따로 확인해야 합니다.
글자색·배경색 HEX만 넣으면 명암비를 즉시 계산하고, 기준 미달 시 통과하는 대안 색상까지 추천합니다.
자주 묻는 질문
명암비 몇 대 몇이면 통과인가요?
일반 크기 텍스트는 최소 4.5:1(AA 기준)을 넘어야 합니다. 더 엄격한 AAA 기준을 적용하면 7:1이 필요합니다. 18포인트 이상이거나 14포인트 이상 굵게 처리된 큰 텍스트는 AA 3:1, AAA 4.5:1로 기준이 완화됩니다.
큰 텍스트 기준은 정확히 몇 포인트부터인가요?
WCAG는 18포인트 이상인 텍스트, 또는 굵게(bold) 스타일이 적용된 경우라면 14포인트 이상인 텍스트를 큰 텍스트로 정의합니다. 일반 굵기라면 18포인트, 굵게 처리했다면 14포인트가 기준선입니다.
명암비 계산기 결과와 실제 화면이 다르게 느껴지는 이유가 뭔가요?
계산은 순수하게 두 단색의 상대 휘도 비율만 따집니다. 하지만 실제 화면에서는 모니터 밝기 설정, 주변 조명, 배경이 단색이 아니라 이미지나 그라디언트인 경우처럼 계산에 반영되지 않는 변수들이 체감 가독성에 영향을 줍니다. 배경이 균일하지 않다면 가장 대비가 낮은 지점을 따로 확인해야 합니다.
AA와 AAA 중 어느 기준을 맞춰야 하나요?
WCAG 2.1에서 AA는 웹 접근성의 일반적인 최소 기준으로 다뤄지고, AAA는 그보다 더 엄격한 강화 기준입니다. 상황과 목표 수준에 따라 어느 쪽을 적용할지가 달라지므로, 최소한 AA 기준(일반 텍스트 4.5:1, 큰 텍스트 3:1)은 넘기는 것을 기준점으로 삼고, 더 높은 접근성이 필요하다면 AAA 수치까지 확인하면 됩니다.