색상 대비 4.5:1, 실제로 어떻게 맞추나

명도 대비 실무 가이드 · WCAG 2.1 성공기준 1.4.3 · 1.4.1 · 1.4.11 · 2026년 9월

"연한 회색 글씨가 예쁘다"와 "그 글씨를 못 읽는 사람이 있다"는 자주 충돌합니다. 노안이 시작된 40대, 백내장이 있는 고령자, 밝은 야외에서 폰을 보는 사람, 저품질 디스플레이 사용자 — 이들에게 대비가 낮은 텍스트는 그냥 안 보입니다. 다행히 이 항목은 기준이 숫자로 딱 떨어지고, 자동으로 검사하기 좋은 영역입니다.

1. 명도 대비 비율이란

두 색의 상대 밝기(luminance)를 비교한 값입니다. 완전한 검정과 완전한 흰색이 21:1, 같은 색끼리가 1:1입니다. 공식은 (밝은색 + 0.05) / (어두운색 + 0.05)이며, 각 색의 밝기는 sRGB 값을 감마 보정해 가중합(0.2126 R + 0.7152 G + 0.0722 B)으로 구합니다. 초록이 가중치가 큰 이유는 사람 눈이 초록에 가장 민감하기 때문입니다 — 그래서 노란 글씨는 흰 배경에서 유독 대비가 안 나옵니다.

2. 기준값

대부분의 사이트는 본문 4.5:1, 큰 제목·아이콘·테두리 3:1만 지켜도 통과합니다.

3. 자주 나오는 미달 사례

• 흰 배경 위 #999999 회색 본문 — 2.85:1. 매우 흔한 실패입니다. 흰 배경에서 4.5:1을 넘기려면 #767676보다 어두워야 합니다.
• 브랜드 컬러 버튼의 흰 글씨 — 파스텔·라임·하늘색 계열 배경이면 흰 글씨가 3:1도 안 나오는 경우가 많습니다. 글자를 진하게 하거나 배경을 어둡게 조정합니다.
• placeholder 텍스트 — 브라우저 기본 placeholder는 대비가 낮습니다. placeholder에 중요한 정보를 넣지 말고(안내는 label이나 별도 설명으로), 색을 직접 지정해 4.5:1을 맞춥니다.
• 이미지·그라디언트 위 텍스트 — 배경이 위치마다 밝기가 달라 최악 지점 기준으로 봐야 합니다. 반투명 오버레이(rgba(0,0,0,.45))나 텍스트 그림자, 글자 뒤 단색 박스로 보장합니다.
• 비활성처럼 보이는 실제 링크 — 연한 회색 링크는 "못 누르는 것"으로 오해받습니다.
• 회색 위 회색 보더 — #f7f7f7 카드에 #e8e8e8 테두리는 1.1:1 수준. 구분이 안 됩니다.

4. 색만으로 정보를 전달하지 않기 (1.4.1)

대비와는 별개의 기준입니다. 색맹·색약은 남성 약 8%, 여성 약 0.5%. 이들에게 "빨강=오류, 초록=정상"은 구별되지 않습니다. 색 + 두 번째 단서를 항상 함께 씁니다.

<!-- 색만 -->
<span style="color:red">이메일 형식이 아닙니다</span>

<!-- 색 + 아이콘 + 접두 문구 -->
<span class="field-error">
  <svg aria-hidden="true">...</svg> 오류: 이메일 형식이 아닙니다
</span>

• 필수 입력 표시를 빨간 별(*)로만 하지 말고 "(필수)" 텍스트도 넣습니다.
• 그래프의 선을 색으로만 구분하지 말고 점선·실선·마커 모양이나 직접 라벨을 붙입니다.
• 링크를 본문에서 색으로만 구분하지 말고 밑줄을 함께 씁니다(문단 안 링크는 특히).

5. 다크모드에서 자주 놓치는 것

• 순수 검정 배경 + 순수 흰 글씨(21:1)는 눈부심(halation)을 유발합니다. 난독증·난시 사용자에게 특히 피로합니다. 배경 #121212~#1a1a1a, 글자 #e6e6e6 정도로 대비를 12~16:1 수준에 두는 편이 편합니다.
• 라이트모드에서 통과하던 브랜드 컬러가 다크 배경에서는 대비가 무너집니다. 두 테마를 각각 측정하세요.
• 다크모드 전용 색을 별도 토큰으로 관리하면 유지보수가 쉽습니다(예: --text, --text-dim을 테마별로 재정의).

6. 측정 도구

• 브라우저 개발자도구 — 요소 검사 → Styles의 색상 스와치를 클릭하면 대비 비율과 AA/AAA 통과 여부가 표시됩니다(Chrome·Firefox·Edge 공통).
• WebAIM Contrast Checker — 두 색의 HEX를 넣으면 비율과 등급을 보여 줍니다.
• 디자인 툴 플러그인 — Figma의 대비 검사 플러그인으로 디자인 단계에서 거릅니다.
• 이 도구 — 페이지 주소를 넣으면 CSS를 해석해 계산 가능한 대비 미달을 한 번에 목록화합니다.

자동 계산은 "CSS로 색이 정해진 텍스트"에만 정확합니다. 배경 이미지·그라디언트·스크립트로 바뀌는 색은 사람이 스크린샷으로 확인해야 합니다.

7. 실무 팁 — 팔레트를 만들 때

1. 본문 색은 흰 배경에서 최소 #595959(7:1, AAA)를 기본값으로 잡으면 여유가 생깁니다.
2. 회색 단계는 4~5단계면 충분합니다. 너무 촘촘하면 인접 단계끼리 구분이 안 됩니다.
3. "보조 텍스트"라고 무조건 연하게 하지 말고, 4.5:1은 지키면서 크기·굵기·여백으로 위계를 만듭니다.
4. 상태 색(성공/경고/오류)은 배경에 얹었을 때의 대비까지 미리 정의해 둡니다.

이 도구로 검사하면 "치명적/높음"으로 분류된 대비 문제부터 수정 코드와 함께 제시됩니다.