it-box

텍스트 명도 대비 기준과 실패하는 색 조합

WCAG 명도 대비 비율의 의미와 AA, AAA 기준, 상대 휘도 계산 방법, 회색 글자와 브랜드 색 버튼에서 자주 실패하는 조합, 다크 모드 점검 방법을 정리합니다.

디자인 시안에서는 멀쩡해 보이는 회색 안내 문구가 실제 화면에서는 잘 안 읽히는 경우가 많습니다. 모니터의 밝기, 외부 조명, 나이, 시력 상태에 따라 같은 색이 다르게 보이기 때문입니다. 색맹인 사용자만 영향을 받는 문제가 아니라, 밝은 햇빛 아래에서 휴대폰을 보는 모든 사용자가 겪는 문제입니다.

명도 대비는 글자 색과 배경 색의 밝기 차이를 수치로 나타낸 값입니다. 이 값이 기준보다 낮으면 글자와 배경의 경계가 흐려져 읽기 비용이 커집니다. 이 글은 대비 비율이 무엇을 재는지, 기준이 어떻게 나뉘는지, 비율을 손으로 어떻게 계산하는지, 실무에서 어떤 조합이 자주 떨어지는지 정리합니다. 값을 직접 넣어 확인하려면 명도 대비 검사기를 쓰면 됩니다. 색을 HSL이나 RGB로 받았다면 먼저 색상 변환기로 HEX로 바꾸는 것이 편합니다.

대비 비율의 의미

대비 비율은 두 색의 상대 휘도를 비교한 값입니다. 흰색과 검은색이 만나면 21:1이 나오고, 같은 색끼리는 1:1이 나옵니다. 값이 클수록 두 색의 밝기 차이가 큽니다.

공식은 다음과 같습니다. 두 색 가운데 밝은 쪽의 상대 휘도를 L1, 어두운 쪽을 L2라고 하면 다음과 같습니다.

대비 비율 = (L1 + 0.05) / (L2 + 0.05)

0.05를 더하는 이유는 완전한 검은색의 휘도가 0이라서 나눗셈이 깨지는 것을 막기 위해서입니다. 비율은 밝은 쪽이 분자에 오도록 계산합니다. 그래서 글자와 배경의 순서를 바꿔도 같은 값이 나옵니다. 이 도구도 이 점을 테스트로 확인합니다. 같은 쌍을 앞뒤로 바꿔 넣어도 비율과 판정이 동일하게 나옵니다.

기준 수치

WCAG 2.x는 텍스트 대비의 최소 기준을 두 단계로 나눕니다. AA는 일반적인 최소 기준이고, AAA는 더 높은 기준입니다.

등급 일반 글자 큰 글자
AA 4.5:1 이상 3:1 이상
AAA 7:1 이상 4.5:1 이상

큰 글자의 정의는 기준 문서에 있습니다. 보통 굵지 않은 글자는 24px, 즉 18pt 이상이거나, 굵은 글자는 약 18.66px, 즉 14pt 이상인 경우를 가리킵니다. 실무에서는 제목과 큰 숫자에만 큰 글자 기준을 적용하고, 나머지 본문에는 일반 기준을 적용하는 편이 안전합니다. 큰 글자라는 이유로 본문 크기를 줄이면 기준을 우회하는 것이 되어 의미가 없습니다.

이 도구는 같은 결과를 네 가지 행으로 보여 줍니다. AA 일반 글자, AA 큰 글자, AAA 일반 글자, AAA 큰 글자입니다. 판정은 반올림하지 않고 계산한 값으로 비교합니다. 4.47은 4.5 미만이므로 실패로 나옵니다.

상대 휘도 계산 개요

상대 휘도는 sRGB 값을 그대로 쓰지 않고 선형 값으로 바꾼 뒤 가중 합으로 계산합니다. 채널 값 c는 0부터 1 사이의 값으로 바꾼 뒤 다음처럼 변환합니다.

c_lin = c / 12.92                       (c <= 0.03928)
c_lin = ((c + 0.055) / 1.055) ^ 2.4     (그 밖의 경우)
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin

사람의 눈은 녹색에 가장 민감하고 파란색에 가장 둔감합니다. 가중치가 이 차이를 반영합니다. 감마 값을 풀지 않은 상태에서 평균을 내면 실제 밝기 차이와 어긋나기 때문에 선형화 과정이 필요합니다.

직접 계산해 보겠습니다. 회색 #777777을 흰 배경에 놓은 경우입니다. 채널 값은 119입니다. 119를 255로 나누면 약 0.4667이고, 선형화하면 약 0.1845가 됩니다. 세 채널이 같으므로 L은 약 0.18447입니다. 흰색의 L은 1이므로 비율은 1.05 / 0.23447이 되어 약 4.478입니다.

여기서 중요한 점은 도구의 표시 방식입니다. 이 도구는 색상 라이브러리가 돌려준 값을 소수 둘째 자리 아래에서 잘라서 보여 줍니다. 계산 결과 4.478은 반올림하면 4.48이지만 화면에는 4.47로 나옵니다. 판정은 어느 쪽이든 실패이지만, 문서에 값을 옮길 때는 도구가 보여 주는 값을 그대로 적어야 혼선이 없습니다.

자주 실패하는 조합

아래 값은 모두 같은 계산 방식으로 확인한 결과입니다.

흰 배경의 회색 글자는 가장 흔한 실패 사례입니다. #999999를 흰 배경에 쓰면 비율은 2.84입니다. 일반 글자 기준과 큰 글자 기준 모두 실패합니다. #888888은 3.54입니다. 큰 글자 기준은 통과하지만 본문에는 쓸 수 없습니다. 흔히 흰 배경의 최소 회색으로 언급되는 #767676은 4.54로 AA 일반 글자 기준을 간신히 넘깁니다. 이 값에서 한 단계만 밝아져도 실패하므로, 회색 문구는 여유를 두고 더 어둡게 잡는 편이 낫습니다.

브랜드 색 버튼은 더 자주 실패합니다. 흰 글자를 밝은 채도 색 위에 올리는 경우가 많기 때문입니다. 흰 글자와 #22c55e는 2.27입니다. 흰 글자와 #f5a623은 2.02입니다. 흰 글자와 #0ea5e9는 2.77이라 큰 글자 기준도 실패합니다. 같은 하늘색 계열에서 #0284c7은 4.09로 일반 글자 기준에 못 미칩니다. #0369a1로 한 단계 어둡게 하면 5.93이 되어 AA 일반 글자 기준을 통과합니다.

반대로 어두운 글자를 노란 버튼에 얹는 방식도 가능합니다. #1c1917 글자와 #f5a623 배경은 8.62로 AAA 일반 글자 기준까지 통과합니다. 같은 브랜드 색이라도 글자 색을 바꾸는 것만으로 결과가 달라집니다.

밝은 경고 색도 주의가 필요합니다. 노란색이나 주황색 배경에 흰 글자를 쓰면 대부분 실패합니다. 색의 의미를 전달하는 아이콘이나 테두리를 함께 쓰면 색 자체에 의존하지 않을 수 있습니다.

다크 모드 점검

다크 모드는 색을 뒤집는 것으로 끝나지 않습니다. 밝은 배경에서 통과하던 회색이 어두운 배경에서는 실패할 수 있고, 그 반대도 있습니다. #888888은 흰 배경에서 3.54로 본문 기준에 못 미치지만, #121212 배경 위에서는 5.28로 AA 일반 글자 기준을 통과합니다. 같은 회색 토큰이 테마에 따라 판정이 바뀌는 셈입니다.

점검은 테마별로 해야 합니다. 라이트 모드와 다크 모드에서 각각 본문, 보조 문구, 링크, 입력란 테두리, 버튼 글자를 확인하세요. 색 토큰을 공유한다면 토큰 이름이 같아도 배경 조합이 다르므로, 실제로 쓰이는 전경과 배경 쌍을 모두 넣어 봐야 합니다.

투명도도 문제가 됩니다. 반투명한 글자 색은 아래에 깔린 배경에 따라 실제 색이 달라집니다. 이 도구는 알파 값이 1보다 작은 색을 거부합니다. 투명한 색을 기준으로 계산하면 결과가 배경에 따라 바뀌기 때문입니다. 반투명 글자를 쓴다면 배경과 합성한 불투명 색을 따로 만들어 확인하세요.

점검 목록

  • 본문 글자와 배경의 대비가 4.5:1 이상인지 확인합니다.
  • 큰 글자로 분류할 수 있는 요소만 3:1 기준을 적용했는지 확인합니다.
  • 회색 보조 문구는 흰 배경 기준으로 #767676보다 어두운지 확인합니다.
  • 흰 글자를 밝은 브랜드 색 버튼에 올렸다면 실제 비율을 계산합니다.
  • 반투명 색 대신 배경과 합성한 불투명 색으로 확인했는지 확인합니다.
  • 라이트 모드와 다크 모드에서 같은 전경과 배경 쌍을 각각 검사했는지 확인합니다.
  • 도구가 소수 둘째 자리에서 값을 자르므로, 기준 근처 값은 여유를 두고 고릅니다.
  • 색상 형식이 다르면 색상 변환기로 HEX를 먼저 맞춘 뒤 명도 대비 검사기에 넣습니다.

관련 도구