웹 접근성을 위한 색상 대비(WCAG) 이해하기

색상 가이드 · ← 목록으로

아무리 예쁜 색을 골라도 텍스트가 배경에 묻혀 읽히지 않으면 소용이 없습니다. 색상 대비는 "보기 좋다"의 문제가 아니라 "읽을 수 있다"의 문제이며, 시력이 약하거나 색을 구분하기 어려운 사용자, 햇빛 아래에서 화면을 보는 사용자 모두에게 영향을 줍니다.

명암비란 무엇인가

명암비(contrast ratio)는 두 색의 상대 밝기 차이를 1:1에서 21:1 사이의 비율로 나타낸 값입니다. 흰색 위의 검정 글씨가 최대값인 21:1이고, 두 색이 같으면 1:1입니다. 비율이 높을수록 글자가 또렷하게 보입니다. 핵심은 색조가 아니라 밝기 차이라는 점입니다. 빨강과 초록처럼 색은 전혀 다르지만 밝기가 비슷하면 대비가 낮아 잘 안 읽힙니다.

WCAG 기준 — 4.5:1과 3:1

웹 접근성 지침(WCAG)은 텍스트 가독성에 대해 명확한 기준을 제시합니다.

일반 텍스트(본문 크기) — 최소 4.5:1 이상 (AA 등급).
큰 텍스트(약 18.66px 굵게 또는 24px 이상) — 최소 3:1 이상.
더 엄격한 AAA 등급 — 일반 텍스트 7:1, 큰 텍스트 4.5:1.
UI 요소·아이콘(버튼 테두리, 입력창 경계 등) — 인접 색과 최소 3:1.

왜 색조만 보면 안 될까

사람의 눈은 색조보다 밝기에 훨씬 민감합니다. 그래서 명암비 계산은 각 색의 RGB 값을 밝기(상대 휘도)로 환산한 뒤 비교합니다. 연한 회색 배경에 연한 노란 글씨처럼 둘 다 밝으면, 색은 달라도 대비가 부족해 읽기 힘듭니다. 반대로 짙은 남색 배경에 흰 글씨는 색조와 무관하게 대비가 충분합니다.

실전에서 대비를 확보하는 법

밝기 차를 먼저 확보하세요. 색을 고른 뒤 명도(HSL의 L)를 양쪽으로 충분히 벌리면 대비가 자연스럽게 올라갑니다.
색만으로 정보를 전달하지 마세요. "빨간 항목은 오류"처럼 색에만 의존하면 색각 이상 사용자가 구분하지 못합니다. 아이콘·라벨·밑줄을 함께 쓰세요.
실제 색을 추출해 검증하세요. 디자인 시안의 배경색과 글자색을 색상 추출 도구로 뽑아 명암비 계산기에 넣어 4.5:1을 넘는지 확인하면 확실합니다.
호버·비활성 상태도 점검하세요. 기본 상태만 통과하고 흐려진 비활성 텍스트가 기준에 못 미치는 경우가 흔합니다.

내 배색의 명암비 직접 확인하기

WCAG 공식은 각 색의 상대 휘도(relative luminance)를 먼저 구한 뒤, (밝은 색 휘도 + 0.05) / (어두운 색 휘도 + 0.05)로 명암비를 계산합니다. 손으로 계산하는 대신, 아래 위젯에 배경색과 글자색을 넣으면 실시간으로 명암비와 AA·AAA 통과 여부를 확인할 수 있습니다.

명암비 계산기

이렇게 보입니다 — Pixel Color Pick

기본값인 인디고 #4F46E5 배경에 흰 텍스트는 명암비 약 6.3:1로 AA 기준(4.5:1)은 통과하지만 AAA 기준(7:1)에는 못 미칩니다. 디자인 시안의 실제 색은 색상 추출 도구로 뽑아 이 위젯에 그대로 넣어 검증하세요.

자주 묻는 질문

매번 이렇게 손으로 계산해야 하나요?: 아닙니다. 원리를 알면 충분하고, 실제 작업에서는 온라인 명암비 계산기에 두 색의 HEX 코드만 입력하면 즉시 비율이 나옵니다. 위 계산은 그 결과가 어떻게 나오는지 이해하기 위한 예시입니다.
색각 이상(색맹) 사용자를 위해서는 무엇을 더 신경 써야 하나요?: 명암비를 지키는 것과 별개로, 적록색맹처럼 특정 색 조합 자체를 구분하기 어려운 경우가 있습니다. 상태를 색으로만 표시하지 않고 아이콘·텍스트 라벨을 함께 제공하는 것이 안전합니다.
다크 모드에서도 같은 기준(4.5:1)이 적용되나요?: 네, WCAG 기준은 라이트·다크 모드를 구분하지 않습니다. 다크 배경에서도 텍스트와 배경의 명암비를 동일하게 4.5:1 이상 확보해야 합니다.
로고나 장식용 텍스트도 명암비 기준을 지켜야 하나요?: WCAG는 로고에 포함된 텍스트와 순수 장식용 텍스트를 예외로 둡니다. 다만 버튼 라벨, 안내 문구처럼 정보를 전달하는 텍스트는 반드시 기준을 지켜야 합니다.
비활성화(disabled) 상태의 흐린 텍스트도 검사 대상인가요?: 비활성 상태는 WCAG 예외로 인정되는 경우가 많지만, 사용자가 실제로 읽어야 하는 안내 텍스트라면 가능한 한 기준을 지키는 것이 좋습니다. 흐린 회색 텍스트가 배경과 거의 구분되지 않는 경우가 흔한 실수입니다.

디자인 시안이 이미 있다면 배경·글자 색을 색상 추출 도구로 뽑아 위 계산기에 그대로 넣어 통과 여부를 확인하세요. 팔레트를 처음부터 짜는 단계라면 브랜드 팔레트 만드는 법을 먼저 보는 것을 권합니다.