APCA 명암비 대비, WCAG 2 숫자가 틀리는 이유
같은 텍스트·배경 색 조합인데 계산 공식만 바꿨을 뿐인데 등급이 정반대로 나오는 경우가 있습니다. 예를 들어 에메랄드색 글자를 짙은 남색 배경에 올리면, 기존 WCAG 2 명암비 공식은 최고 등급인 AAA(7.04:1)를 주지만 새로 제안된 APCA 공식은 '큰 글자에만 쓰라'는 낮은 등급을 줍니다. 어느 쪽 계산이 왜 이런 값을 내는지 공식 구조로 확인해 보겠습니다.
요약 ① WCAG 2 명암비는 두 색의 밝기(휘도)를 단순 나눗셈 비율로 계산하며, 텍스트와 배경을 서로 바꿔도 값이 똑같습니다. ② APCA Lc는 어느 색이 텍스트이고 어느 색이 배경인지에 따라 다른 지수를 적용해 계산하므로, 색을 바꿔 넣으면 값과 부호가 달라집니다. ③ 그래서 WCAG 2 기준으로는 똑같이 '4.5:1 근처(AA 통과)'인 조합이라도, 어느 밝기대에 있느냐에 따라 APCA Lc는 30대부터 70대까지 벌어질 수 있습니다.
문제
디자인 시스템에서 배색을 정할 때 흔히 온라인 명암비 계산기에 텍스트·배경 색을 넣고 4.5:1(AA) 또는 7:1(AAA) 통과 여부만 확인합니다. 이 숫자 하나로 '접근성 통과'를 선언하는 경우가 많습니다.
문제는 WCAG 2 명암비 공식이 밝은 색 영역과 어두운 색 영역에서 똑같은 비율 숫자에 서로 다른 크기의 실제 밝기 차이를 담는다는 점입니다. 다크 모드처럼 어두운 색끼리 배색을 짜는 화면에서 이 격차가 특히 두드러집니다.
실제로 텍스트 #0A0A0A(거의 검정)를 배경 #787878(중간 회색)에 올리면 WCAG 2 비율은 4.48:1로 AA를 통과합니다. 텍스트 #6E6E6E를 배경 #F0F0F0(거의 흰색)에 올려도 비율은 4.47:1로 똑같이 AA를 통과하지만, 두 조합의 실제 가독성은 같지 않습니다.
해결
WCAG 2 명암비: 단순 비율의 한계
WCAG 2 명암비는 두 색의 상대 휘도(L1, L2)를 구한 뒤 (L1 + 0.05) ÷ (L2 + 0.05) 공식에 대입해 나오는 단순 비율입니다. 상대 휘도는 sRGB 감마를 보정한 R·G·B 값에 0.2126·0.7152·0.0722 가중치를 곱해 더한 값입니다.
이 공식은 어느 색이 텍스트이고 어느 색이 배경인지 구분하지 않고, 두 값 중 큰 것을 분자에, 작은 것을 분모에 놓을 뿐입니다. 그래서 텍스트와 배경 색을 서로 바꿔 넣어도 결과 비율은 항상 똑같이 나옵니다.
앞서 든 두 조합(0A0A0A·787878 / 6E6E6E·F0F0F0)이 똑같이 '4.5:1 근처'로 계산되는 이유도 여기 있습니다. 공식이 밝기 차이만 볼 뿐, 그 차이가 어두운 쪽에서 난 건지 밝은 쪽에서 난 건지는 구분하지 않기 때문입니다.
APCA Lc: 텍스트·배경을 구분해 계산하는 공식
APCA는 두 색의 밝기(Y)를 구한 뒤, 어느 색이 더 밝은지에 따라 서로 다른 지수를 적용합니다. 배경이 더 밝으면(어두운 글자·밝은 배경) 배경 밝기의 0.56제곱에서 글자 밝기의 0.62제곱을 빼고, 글자가 더 밝으면(밝은 글자·어두운 배경) 배경 밝기의 0.65제곱에서 글자 밝기의 0.55제곱을 뺀 값에 100을 곱합니다.
이 계산은 나눗셈이 아니라 뺄셈이고 지수도 상황별로 다르기 때문에, 텍스트·배경을 서로 바꿔 넣으면 값의 부호와 크기가 함께 달라집니다. 실제로 앞의 두 조합을 APCA로 계산하면 Lc 30.7과 Lc 72.5로, WCAG 2에서는 거의 같던 숫자가 두 배 넘게 벌어집니다.
또한 APCA는 두 색의 밝기 차이가 절댓값 기준 Lc 7.5 미만이면 사람 눈이 인지하기 어려운 노이즈 수준으로 보고 0으로 처리합니다. 짙은 색 두 개를 붙여 놓았을 때 계산기가 '대비 없음'으로 표시하는 것도 이 규칙 때문입니다.
직접 색을 넣고 두 공식이 얼마나 다른 값을 내는지 계산기로 확인해 보세요.
무료 · 회원가입 없음 · 텍스트/배경 색상만 넣으면 APCA Lc 값과 WCAG 2 대비율을 동시에 확인
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| 색을 하나도 안 바꿨는데 결과가 0으로 나온다 | 두 색의 밝기 차이가 APCA 노이즈 기준(Lc 7.5) 아래라 대비 없음으로 처리됩니다 |
| 텍스트·배경 색을 서로 바꿔 넣었더니 값이 달라진다 | APCA는 어느 색이 텍스트인지에 따라 다른 지수를 쓰는 공식이라 원래 다르게 나옵니다(WCAG 2는 항상 동일) |
| WCAG 2는 AAA인데 APCA 등급은 낮게 나온다 | 두 공식이 서로 다른 방식으로 밝기 차이를 계산한 결과이며, 어느 한쪽이 틀렸다는 뜻은 아닙니다 |
| 미리보기에서 글자 크기·굵기를 바꿔도 Lc 숫자가 그대로다 | Lc 값은 색상 조합만으로 계산되며, 글자 크기·굵기는 그 값을 어떤 기준에 대입해 볼지 눈으로 확인하는 용도입니다 |
| 작은 글자에는 Lc가 어느 정도 필요한지 궁금하다 | 도구 등급 기준상 Lc 75 이상이라야 14px 이상 일반 본문에 안전하고, Lc 60대는 18px 이상 큰 글자·굵은 글자에만 해당됩니다 |
정리
WCAG 2 명암비와 APCA Lc는 같은 두 색을 놓고도 서로 다른 계산 방식을 쓰기 때문에 다른 숫자를 냅니다. WCAG 2는 밝기 비율만 보는 대칭적 공식이고, APCA는 어느 색이 텍스트인지까지 반영하는 비대칭 공식입니다.
어느 기준을 따라야 하는지는 프로젝트가 지켜야 하는 접근성 요구사항에 따라 달라지는 문제입니다. 다만 색을 정할 때 두 값을 함께 확인하면, 숫자상 통과선을 넘겼는데도 실제로는 읽기 어려운 조합을 미리 걸러내는 데 도움이 됩니다.
무료 · 회원가입 없음 · 텍스트/배경 색상만 넣으면 APCA Lc 값과 WCAG 2 대비율을 동시에 확인
자주 묻는 질문
WCAG 2 대비율과 APCA Lc 중 어떤 걸 기준으로 삼아야 하나요?
이건 두 공식 중 무엇이 '더 정확한가'의 문제가 아니라 어떤 기준을 따라야 하는 프로젝트인가의 문제입니다. WCAG 2.1/2.2 AA·AAA는 현재 통용되는 공식 웹 접근성 지침이고, APCA는 차세대 표준(WCAG 3) 초안에서 후보로 논의되는 산식으로 아직 WCAG 2를 대체하는 공식 기준은 아닙니다.
법률·기관 심사에서 명암비 통과 여부를 요구한다면 현재는 WCAG 2 기준을 따라야 하고, APCA Lc 값은 실제 가독성을 더 세밀하게 들여다보는 보조 지표로 함께 확인하는 방식이 안전합니다.
텍스트·배경 색을 서로 바꿨더니 APCA Lc 부호가 반대로 나오는 이유는 무엇인가요?
계산기에 표시되는 Lc 부호는 어느 쪽 공식이 적용됐는지를 나타냅니다. 배경이 텍스트보다 밝을 때(어두운 글자 위에 밝은 배경)는 양수(+)로, 텍스트가 배경보다 밝을 때(밝은 글자 위에 어두운 배경)는 음수(-)로 표시됩니다.
색을 서로 바꿔 넣으면 어느 쪽이 더 밝은지도 뒤바뀌므로 적용되는 지수 자체가 달라지고, 그 결과 부호와 값 크기가 함께 달라집니다. 등급을 볼 때는 부호를 뗀 절댓값 기준으로 판정합니다.