색 대비비 기초 — 정의와 WCAG 기준 읽는 법

색상2026년 8월 30일

같은 회색인데 왜 하나는 되고 하나는 안 되나

디자인 시안에서는 둘 다 그냥 “회색 본문”이지만, 위 색은 웹 접근성 기준에 실패하고 아래 색은 통과합니다. 눈대중으로는 잘 안 갈리는 이 경계를 숫자로 딱 잘라 주는 게 색 대비비(contrast ratio)입니다.

이 글에서는 “흰 배경에 회색 글자, 어디까지 연하게 써도 되나?“를 예제로 끝까지 끌고 갑니다.

대비비란 무엇인가

색 대비비(contrast ratio)는 두 색의 밝기 차이를 1:1에서 21:1 사이 숫자로 나타낸 값입니다. 검정과 흰색이 최대인 21:1, 같은 색끼리는 1:1.

이 값은 색상(빨강·파랑 같은 hue)이 아니라 밝기로만 결정됩니다. 아래 두 줄을 보면 바로 감이 옵니다.

위아래 배경은 같은 빨강입니다. 초록 글자는 색은 강렬해도 빨강과 밝기가 비슷해 글자가 배경에 잠기고, 흰 글자는 밝기 차이가 커서 또렷합니다. 대비비는 색이 얼마나 화려한지가 아니라 이 밝기 차이만 봅니다.

WCAG 기준: AA와 AAA

대부분의 서비스는 AA를 목표로 잡습니다. AAA는 공공 사이트나 접근성을 강하게 요구하는 프로젝트에서 봅니다.

“큰 텍스트”의 정확한 기준은:

• 일반 굵기 24px(18pt) 이상
• 굵은 글씨 18.66px(14pt) 이상

본문은 보통 16px 안팎이라, 사실상 본문에는 4.5:1을 적용한다고 생각하면 됩니다.

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

20/40 정도의 시력(정상보다 대비 감도가 약 1.5배 낮은 상태)을 가진 사용자가 읽을 수 있는 지점에서 잡은 값입니다. 노안이나 저시력 사용자, 그리고 햇빛 아래에서 화면을 보는 상황까지 함께 고려한 숫자죠. 큰 텍스트는 획이 굵어 조금 흐려도 읽히기 때문에 3:1로 완화했고요.

대비비는 어떻게 계산되나

공식만 놓고 보면 나눗셈 하나입니다.

대비비 = (밝은 색 밝기 + 0.05) / (어두운 색 밝기 + 0.05)

• 밝기는 0(검정)에서 1(흰색) 사이의 “상대 휘도” 값입니다.
• + 0.05는 화면에 늘 존재하는 주변 반사광을 감안한 보정치입니다. 덕분에 완전한 검정(0)이라도 분모가 0이 되지 않습니다.

한 가지 주의할 점은, 색의 밝기를 구할 때 R·G·B를 그냥 평균내지 않는다는 것입니다. 초록에 가장 큰 가중치가 붙습니다(대략 R 21%, G 72%, B 7%). 사람 눈이 초록 빛에 제일 민감하기 때문입니다. 그래서 순수 파랑 #0000FF는 같은 채도의 초록보다 훨씬 어둡게 계산됩니다.

계산은 도구에 맡기세요. 색상 대비 검사기에 글자색과 배경색을 넣으면 대비비와 AA·AAA 통과 여부가 바로 나옵니다. 아래는 예제 결과만 확인하는 내용입니다.

예제로 돌아가서, 흰 배경에 회색 글자를 점점 진하게 넣어 보겠습니다. 코드는 이렇게 단순합니다.

<p style="color: #999999; background: #ffffff;">본문 텍스트</p>

color 값만 바꿔 가며 실제로 렌더링하면:

위 두 줄은 흰 화면에서 눈에 띄게 흐리고, 세 번째 줄 #767676부터 또렷해집니다. 이 지점이 대비비 4.5:1, 즉 흰 배경에서 본문으로 쓸 수 있는 가장 연한 회색입니다. 흔히 쓰는 #999는 첫 줄이라 확실한 실패고요.

요약

• 대비비는 두 색의 밝기 차이를 1:1~21:1로 나타낸 값 (색상 아닌 밝기)
• AA는 본문 4.5:1 / 큰 텍스트·UI 3:1, AAA는 7:1 / 4.5:1
• 큰 텍스트 = 24px 이상 또는 굵은 18.66px 이상, 본문은 사실상 4.5:1 적용
• 흰 배경에서 본문용 최연한 회색은 약 #767676, #999는 실패
• 계산은 검사기에 맡기고 통과 여부만 확인

다음 편에서는 실무에서 대비가 자주 무너지는 곳과, 브랜드색을 유지하면서 기준을 통과시키는 방법을 다룹니다.