명암비 4.5:1의 뜻 — WCAG AA·AAA 기준과 계산법

디자인 리뷰에서 "명암비가 4.5:1이 안 나온다"는 지적을 받고, 그 숫자가 어디서 나온 건지 몰라 난감했던 분을 위한 글입니다. 결론부터 말하면 명암비는 두 색의 상대 휘도를 정해진 공식에 넣어 얻는 비율이고, 4.5:1은 웹 접근성 지침 WCAG가 정한 AA 등급의 일반 텍스트 최소선입니다.

색을 눈으로 비교해 정하는 값이 아니라, 계산으로 딱 떨어지는 값입니다. 그래서 통과·실패를 다툴 여지가 없고, 반대로 공식만 알면 누구나 직접 검산할 수 있습니다.

요약 ① 명암비 = (밝은 쪽 상대 휘도 + 0.05) ÷ (어두운 쪽 상대 휘도 + 0.05). 값의 범위는 1:1부터 21:1까지입니다. ② AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1. AAA는 일반 텍스트 7:1, 큰 텍스트 4.5:1입니다. ③ "큰 텍스트"는 18pt(약 24px) 이상이거나 14pt(약 18.7px) 이상 굵은 글씨를 뜻합니다.

4.5:1은 어디서 나온 숫자인가

명암비(contrast ratio)는 "글자색과 배경색이 얼마나 벌어져 있는가"를 하나의 숫자로 나타낸 값입니다. 흰 배경에 검은 글자가 가장 벌어진 조합이고, 이때 값이 정확히 21:1입니다.

반대로 글자색과 배경색이 같으면 1:1이 됩니다. 즉 모든 색 조합은 1:1과 21:1 사이 어딘가에 놓입니다.

WCAG(Web Content Accessibility Guidelines)는 이 값에 최소선을 정해 두었습니다. 성공 기준 1.4.3(Contrast Minimum, AA 등급)이 요구하는 일반 텍스트의 최소값이 4.5:1입니다. 회의에서 나오는 "4.5:1"은 거의 항상 이 기준을 가리킵니다.

여기서 자주 어긋나는 지점이 있습니다. 명암비는 밝기 차이만 봅니다. 색상(빨강·파랑 같은 계열)이 아무리 달라도 밝기가 비슷하면 값은 낮게 나옵니다.

도구 없이 직접 계산하는 방법

공식은 두 단계입니다. 색 하나마다 상대 휘도를 구한 뒤, 두 휘도를 비율로 만듭니다.

1단계 — 상대 휘도 구하기

먼저 HEX 색상을 R·G·B 세 값으로 나누고 각각 255로 나눠 0~1 범위로 만듭니다. 그다음 채널마다 아래를 적용합니다.

• 값이 0.04045 이하면 → 값 ÷ 12.92
• 그보다 크면 → ((값 + 0.055) ÷ 1.055)의 2.4제곱

이렇게 나온 세 값을 0.2126 × R + 0.7152 × G + 0.0722 × B 로 더하면 상대 휘도가 됩니다. 계수가 서로 다른 이유는 사람 눈이 초록빛에 가장 민감하고 파란빛에 가장 둔감하기 때문입니다.

그래서 단순히 "RGB 평균"을 비교하면 실제 기준과 다른 답이 나옵니다.

2단계 — 비율로 만들기

두 색의 상대 휘도를 각각 구했다면, 밝은 쪽을 L1, 어두운 쪽을 L2라 할 때 명암비는 다음과 같습니다.

(L1 + 0.05) ÷ (L2 + 0.05)

0.05를 더하는 이유는 화면에 실제로 닿는 주변광 때문입니다. 검정(휘도 0)과 흰색(휘도 1)을 넣으면 1.05 ÷ 0.05 = 21, 즉 21:1이 나옵니다.

회색 #767676 을 흰 배경에 얹은 경우로 따라가 보겠습니다. 118 ÷ 255 = 0.4627이고, 0.04045보다 크므로 ((0.4627 + 0.055) ÷ 1.055)의 2.4제곱 = 약 0.1811입니다. 세 채널이 같은 값이라 상대 휘도도 0.1811입니다.

흰색의 상대 휘도는 1이므로, (1 + 0.05) ÷ (0.1811 + 0.05) = 약 4.54. 4.5:1을 아슬아슬하게 넘겨 AA 일반 텍스트를 통과합니다.

브라우저 개발자 도구(대개 F12) 콘솔에 아래를 붙여 넣으면 같은 값을 확인할 수 있습니다.

const L = (hex) => {
  const c = [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16) / 255)
    .map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
};
const ratio = (a, b) => (Math.max(L(a), L(b)) + 0.05) / (Math.min(L(a), L(b)) + 0.05);
ratio("#767676", "#ffffff");   // 4.5422...

문제는 색을 한 번 바꿀 때마다 이 과정을 다시 돌려야 하고, 나온 숫자를 다시 AA·AAA 네 가지 기준과 대조해야 한다는 점입니다.

저희 도구로 확인하기. 전경색과 배경색을 HEX로 넣으면 명암비와 함께 AA·AAA, 일반·큰 텍스트 네 항목의 통과 여부가 한 번에 표시됩니다.

직접 해보기 →

AA·AAA와 큰 글자 예외 3:1

기준은 네 칸으로 정리됩니다. 등급(AA·AAA)과 글자 크기(일반·큰 텍스트)의 조합입니다.

여기서 큰 텍스트의 기준선이 한 칸 낮다는 점이 핵심입니다. 글자가 크고 획이 두꺼우면 같은 명암비에서도 읽기 쉬워, 지침이 3:1까지 허용합니다.

큰 텍스트의 정의는 18pt 이상, 또는 14pt 이상이면서 굵은 글씨입니다. CSS 기준으로는 각각 약 24px, 약 18.7px에 해당합니다. 한글처럼 CJK 글꼴은 같은 크기로 보이는 값을 적용합니다.

표에서 한 가지가 더 보입니다. AAA의 큰 텍스트 기준(4.5:1)과 AA의 일반 텍스트 기준(4.5:1)이 같은 숫자라는 점입니다. 그래서 명암비가 4.5를 넘기는 순간 두 항목의 통과 여부가 함께 바뀌고, 남는 관문은 AAA 일반 텍스트의 7:1뿐입니다.

자주 막히는 지점

한 단계 차이로 결과가 뒤집히는 일이 실제로 있습니다. 흰 배경 기준으로 #767676 은 4.54:1이라 AA 일반 텍스트를 통과하지만, #777777 은 4.48:1이라 통과하지 못합니다.

예외를 조금 더 풀면, 지침은 비활성 요소·순수 장식·보이지 않는 텍스트, 그리고 의미 있는 다른 시각 요소가 함께 담긴 사진 속 글자에는 명암비를 요구하지 않습니다. 로고와 브랜드명도 여기에 들어갑니다.

한 가지 더 있습니다. 상대 휘도 공식의 갈림 값은 2021년 5월에 0.03928에서 0.04045로 바뀌었습니다. 다만 8비트 색상(0~255)에서는 두 값 사이에 놓이는 채널 값이 없어 계산 결과는 같습니다.

정리

• 명암비는 두 색의 상대 휘도로 계산한 비율이며, (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05) 로 구합니다.
• 값은 1:1(같은 색)부터 21:1(검정과 흰색)까지입니다.
• AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1. AAA는 일반 텍스트 7:1, 큰 텍스트 4.5:1입니다.
• 큰 텍스트는 18pt(약 24px) 이상 또는 14pt(약 18.7px) 이상 굵은 글씨를 말합니다.
• 명암비는 밝기 차이만 보므로, 색상 계열이 달라도 밝기가 비슷하면 낮게 나옵니다.
• 반투명·그라데이션 위 글자는 실제로 합성돼 보이는 색으로 계산해야 합니다.

자주 묻는 질문

4.5:1을 못 맞추면 규정 위반인가요?

WCAG는 법률이 아니라 W3C가 정한 웹 접근성 지침입니다. 다만 여러 나라의 공공 부문 조달·감리 기준이 이 지침을 참조하기 때문에, 실무에서는 AA 통과 여부가 검수 항목으로 쓰이는 경우가 많습니다. 어떤 기준이 적용되는지는 발주처나 감리 문서에서 확인하는 것이 정확합니다.

색상이 전혀 다른데 왜 명암비가 낮게 나오나요?

명암비 공식이 밝기(상대 휘도)만 계산하기 때문입니다. 예를 들어 중간 밝기의 빨강과 중간 밝기의 초록은 색상이 정반대여도 휘도가 비슷해 값이 낮게 나옵니다. 색맹·저시력 사용자에게도 비슷한 문제가 생기기 때문에, 지침은 색상 차이가 아니라 밝기 차이를 기준으로 삼습니다.

아이콘이나 입력창 테두리에도 4.5:1이 필요한가요?

1.4.3은 텍스트와 텍스트 이미지에 적용되는 기준입니다. 아이콘·테두리 같은 비텍스트 요소는 별도의 성공 기준(1.4.11 Non-text Contrast)에서 3:1을 요구합니다. 즉 본문 글자는 4.5:1, UI 구성요소의 시각적 경계는 3:1로 기준이 나뉩니다.

입력한 색상이 서버로 전송되나요?

아니요. 이 도구의 명암비 계산은 전부 브라우저 안에서 처리되며, 입력한 색상 값은 서버로 전송되거나 저장되지 않습니다. 사내 디자인 시스템의 색상 팔레트를 그대로 넣어 봐도 외부로 나가지 않습니다.