색상 대비와 접근성: 실전 가이드

모니터에서 멋져 보이는 색상을 골라. 배포해. 그러면 누군가가 텍스트를 읽을 수 없다고 해.

이게 생각보다 자주 일어나. 남성 약 12명 중 1명, 여성 약 200명 중 1명이 어떤 형태의 색각 이상을 가지고 있어. 거기에 저대비 화면, 밝은 햇빛, 노화된 눈을 더하면 갑자기 네 색상 선택이 많은 사람에게 영향을 미쳐.

좋은 소식: 이에 대한 명확한 규칙이 있어. WCAG 대비 요구 사항이라고 하고, 들리는 것보다 간단해.

대비율이 뭐야?

대비율은 두 색상이 밝기에서 얼마나 다른지를 설명하는 숫자야. 1:1(대비 없음 — 같은 색)부터 21:1(최대 대비 — 흰색에 검정)까지야.

눈은 모든 색상 차이를 똑같이 보지 않아. 대비율은 수학적 색상 차이가 아니라 인간의 시각이 실제로 밝기를 어떻게 인식하는지를 반영해.

빠른 참고표:

| 대비율 | 어떻게 보이나 | 통과? | |---|---|---| | 1:1 – 2:1 | 거의 안 보임 | 아니오 | | 3:1 | 읽을 수 있지만 눈 피로 | 큰 텍스트에만 AA | | 4.5:1 | 편안하게 읽기 | 일반 텍스트 AA | | 7:1 | 매우 선명 | 일반 텍스트 AAA | | 21:1 | 최대 (흰색에 검정) | 전부 |

AA vs. AAA: 차이가 뭐야?

WCAG는 색상에 중요한 두 가지 적합성 수준을 정의해:

레벨 AA (대부분의 사이트가 목표로 하는):

• 일반 텍스트 (18pt 미만): 4.5:1 대비율 필요
• 큰 텍스트 (18pt+ 또는 14pt+ 볼드): 3:1 대비율 필요
• UI 구성요소와 그래픽 객체: 3:1 대비율 필요

레벨 AAA (최고 기준):

• 일반 텍스트: 7:1 대비율 필요
• 큰 텍스트: 4.5:1 대비율 필요

대부분의 조직은 AA를 목표로 해. AAA가 이상적이지만 디자인에 제약이 있어 — 7:1을 맞추면서 보기 좋은 색상 조합이 많지 않아.

흔한 대비 실패

실제 프로젝트에서 항상 나오는 것들:

흰색 배경에 밝은 회색 텍스트: 미묘하고 "우아한" 회색 텍스트? 종종 대비를 통과 못 해. 흰색에 #999999는 2.85:1밖에 안 돼 — 큰 텍스트에도 실패야.

색상 배경에 색상 텍스트: 보라색에 파란색, 파란색에 초록색, 진한 회색에 빨간색. 너한테는 구분되어 보일 수 있지만 대비율에서 부족해.

양식의 플레이스홀더 텍스트: 밝은 회색 플레이스홀더 텍스트는 웹 디자인에서 거의 보편적인데, 거의 항상 대비 요구 사항을 통과 못 해. 저시력 사용자는 필드에 뭘 입력해야 하는지 읽을 수 없어.

이미지 위 텍스트: 어두운 오버레이나 텍스트 그림자를 추가하지 않으면, 사진 위 텍스트가 일관되게 대비 기준을 충족하는 경우는 드물어.

색각 이상 고려 사항

대비율이 도움이 되지만 모든 걸 해결하진 않아. 색각 이상은 일부 사용자가 말 그대로 특정 색상 쌍을 구분할 수 없다는 의미야.

정보를 전달할 때 색상에만 의존하지 마:

• 오류/성공에 빨강/초록? 아이콘이나 텍스트 라벨도 추가해
• 색상으로 구분된 차트? 패턴, 라벨, 또는 다른 모양 추가
• 빨간색으로만 표시된 필수 필드? 별표나 "(필수)" 텍스트 추가

가장 흔한 유형:

• 제2색각 이상 (적록, 남성 ~6%): 빨강과 초록이 비슷하게 보임
• 제1색각 이상 (적록, 남성 ~2%): 빨강이 어둡게/갈색으로 보임
• 제3색각 이상 (청황, 드물게): 파랑과 노랑을 구분하기 어려움

색상 수정을 위한 실전 단계

1단계: 브랜드 색상을 색상 변환기로 16진수로 변환해. 대비를 확인하려면 정확한 값이 필요해.

2단계: 모든 텍스트/배경 조합을 테스트해. 기본 텍스트만 확인하지 마 — 버튼, 링크, 캡션, 양식 라벨, 오류 메시지를 확인해.

3단계: 밝기를 조정해서 실패를 수정해. 보통 같은 색조와 채도를 유지하면서 어둡게 하거나 밝게 해서 비율을 맞출 수 있어.

4단계: 시뮬레이터로 테스트해. Chrome DevTools에 내장 시각 장애 시뮬레이터가 있어 (렌더링 패널 > 시각 결함 에뮬레이션).

5단계: SVG 그래픽과 이미지도 확인해. 대비가 나쁜 아이콘은 텍스트만큼 문제가 돼.

바로 쓸 수 있는 팁

급하다면, 이 안전한 조합은 AA에 항상 통과해:

• 검정 (#000000) + 흰색 (#FFFFFF) — 21:1
• 진한 회색 (#333333) + 흰색 — 12.6:1
• 흰색 텍스트 + 진한 파랑 (#003366) — 9.9:1
• 검정 텍스트 + 밝은 노랑 (#FFF9C4) — 18.1:1
• 진한 초록 (#2E7D32) + 흰색 — 5.1:1

그리고 이것들은 흔히 실패해:

• 중간 회색 (#808080) + 흰색 — 3.9:1 (AA 일반 텍스트 실패)
• 빨강 (#FF0000) + 검정 — 5.25:1 (AA 통과하지만 AAA 실패)
• 오렌지 (#FF8C00) + 흰색 — 3.0:1 (AA 일반 텍스트 실패)

---

접근성은 단순한 규정 준수가 아니야 — 네가 만든 걸 모든 사람이 실제로 사용할 수 있게 하는 거야. 텍스트 대비율 확인부터 시작해. 명확한 실패부터 고쳐. 그다음 버튼, 아이콘, 보조 텍스트로 넘어가. 작은 변화, 큰 영향.