WCAG 색상 대비 가이드 — 접근성 좋은 디자인의 기본

웹사이트를 만들 때 가장 자주 간과되는 영역이 색상 접근성입니다. 디자이너는 미적인 균형을 우선시하다 보니 본인의 시력으로는 잘 보이는 색 조합이 시력이 약하거나 색각이 다른 사용자에게는 거의 보이지 않을 수 있습니다. 밝은 햇빛 아래의 스마트폰, 저가형 모니터, 밝기를 낮춘 야간 모드처럼 보는 환경이 나빠지면 비장애인도 같은 문제를 겪습니다. WCAG(Web Content Accessibility Guidelines)는 이런 문제를 해결하기 위해 색상 대비 기준을 제시합니다. 이 글에서는 대비 비율의 정확한 계산 공식, 등급별 기준과 예외, 비텍스트 요소의 대비, 브랜드 컬러를 기준에 맞게 보정하는 방법, 도구별 검사법까지 실무에 바로 쓸 수 있는 내용을 정리합니다.

WCAG는 무엇인가?

WCAG는 W3C에서 만든 웹 접근성 가이드라인입니다. 현재 가장 널리 사용되는 버전은 WCAG 2.1·2.2이며, A · AA · AAA의 3등급으로 나뉩니다.

• A: 기본 (최소 요구사항)
• AA: 표준 (대부분의 법적 요구사항)
• AAA: 향상 (고도 접근성)

가이드라인은 인식 가능(Perceivable), 운용 가능(Operable), 이해 가능(Understandable), 견고함(Robust)의 네 원칙 아래 번호가 붙은 「성공 기준」으로 구성됩니다. 색상과 관련된 성공 기준은 다음 넷이 핵심입니다.

• 1.4.1 색상 사용 (A): 정보를 색상만으로 전달하지 않기
• 1.4.3 대비 최소 (AA): 텍스트 4.5:1, 큰 텍스트 3:1
• 1.4.6 대비 향상 (AAA): 텍스트 7:1, 큰 텍스트 4.5:1
• 1.4.11 비텍스트 대비 (AA): UI 구성요소와 그래픽 3:1

한국에는 WCAG를 바탕으로 만든 한국형 웹 콘텐츠 접근성 지침(KWCAG)이 있으며, 텍스트와 배경의 명도 대비 4.5:1 이상을 같은 방식으로 요구합니다. 장애인차별금지법에 따라 공공기관과 일정 규모 이상의 사업자는 웹 접근성을 보장할 의무가 있어, 국내에서도 AA 수준은 「권장」이 아니라 사실상 「기본」으로 취급됩니다.

색상 대비 비율(Contrast Ratio)

두 색상의 밝기 차이를 1:1 ~ 21:1 비율로 나타냅니다. 1:1은 같은 색(대비 없음), 21:1은 검정 vs 흰색(최대 대비)입니다.

WCAG 기준

대비 비율은 어떻게 계산할까?

대비 비율은 단순히 RGB 값의 차이가 아니라, 사람 눈이 느끼는 밝기인 상대 휘도(relative luminance)를 기준으로 계산합니다. 계산은 세 단계입니다.

• 1단계 · 채널 선형화: R, G, B 각 값을 255로 나눈 뒤, 0.03928 이하이면 12.92로 나누고, 그보다 크면 ((c + 0.055) / 1.055) ^ 2.4를 적용합니다. 모니터의 감마 곡선을 되돌려 실제 빛의 양으로 바꾸는 과정입니다.
• 2단계 · 휘도 합산: L = 0.2126 R + 0.7152 G + 0.0722 B. 사람 눈은 초록에 가장 민감하고 파랑에 가장 둔감하기 때문에 가중치가 크게 다릅니다.
• 3단계 · 비율: (L1 + 0.05) / (L2 + 0.05). L1은 더 밝은 색의 휘도, L2는 더 어두운 색의 휘도입니다.

양쪽에 더하는 0.05는 화면 표면에 반사되는 주변광을 흉내 낸 값입니다. 실제 환경에서는 완전한 검정도 약간의 빛을 반사하므로 순수 검정의 휘도 0을 그대로 쓰면 비율이 무한대로 발산합니다. 이 보정 덕분에 최대 비율이 (1 + 0.05) / (0 + 0.05) = 21이 되어, 검정과 흰색이 21:1이 되는 것입니다.

예제 계산: 회색 #767676 위의 흰 배경

#767676은 R, G, B가 모두 118인 무채색입니다. 118 ÷ 255 = 0.4627이고, 0.03928보다 크므로 ((0.4627 + 0.055) / 1.055)의 2.4제곱을 구하면 약 0.1812가 나옵니다. 세 채널이 같으므로 가중 합산 결과도 그대로 L = 0.1812입니다. 흰색의 휘도는 1이므로 비율은 (1 + 0.05) / (0.1812 + 0.05) = 1.05 / 0.2312 ≈ 4.54:1. AA 본문 기준을 아슬아슬하게 통과하는 값이며, 이 때문에 #767676은 「흰 배경에서 쓸 수 있는 가장 밝은 회색」으로 자주 인용됩니다. 한 단계만 밝은 #777777은 4.48:1로 탈락합니다.

여기서 알 수 있는 실무 감각은 두 가지입니다. 첫째, 대비는 선형이 아니어서 RGB 값을 조금만 바꿔도 경계 근처에서는 통과·탈락이 뒤집힙니다. 둘째, 파랑 채널은 휘도 기여가 7%에 불과해 파란색은 어두워 보여도 휘도가 낮고, 반대로 초록·노랑은 밝게 계산됩니다. 순수한 노랑 텍스트가 흰 배경에서 전혀 읽히지 않는 이유입니다.

왜 4.5:1인가?

4.5:1은 약한 시력(20/40 정도)의 사용자도 텍스트를 명확하게 읽을 수 있는 최저 기준입니다. WCAG 해설 문서는 이 정도의 시력 저하가 대비 감도 손실로 이어지는 폭을 보상하기 위해 4.5:1을 정했다고 설명합니다. 고령화로 노안과 백내장 초기 증상을 가진 사용자가 늘고 있고, 시력이 정상인 사람도 어두운 조명이나 반사가 심한 환경에서는 같은 어려움을 겪기 때문에 AA 기준 충족은 사실상 필수입니다. AAA의 7:1은 20/80 수준의 시력 저하까지 감안한 값으로, 본문 전체에 적용하기보다 고령층 대상 서비스나 핵심 안내문에 우선 적용하는 경우가 많습니다.

큰 텍스트 예외와 적용 제외 항목

글자가 크면 같은 대비에서도 훨씬 잘 읽히기 때문에 WCAG는 큰 텍스트에 완화된 기준(AA 3:1)을 둡니다. 큰 텍스트의 정의는 18pt(약 24px) 이상이거나 14pt(약 18.7px) 이상의 굵은 글씨입니다. CSS의 px와 pt는 1pt = 1.333px로 환산하므로, 24px 제목이나 19px 굵은 소제목까지가 큰 텍스트에 해당합니다. 본문에 흔히 쓰는 14~16px는 아무리 굵게 해도 큰 텍스트가 아니므로 4.5:1을 지켜야 합니다.

다음은 1.4.3 성공 기준에서 대비 요구가 적용되지 않는 항목입니다.

• 비활성 UI 구성요소: 눌 수 없는 회색 버튼의 라벨
• 순수한 장식: 정보 전달 목적이 없는 배경 문양 속 글자
• 우연히 포함된 텍스트: 사진 속 간판처럼 의도치 않게 찍힌 글자
• 로고타입: 브랜드 이름이나 로고에 포함된 텍스트

주의할 점은 플레이스홀더 텍스트나 도움말 문구처럼 「덜 중요해 보이는」 텍스트는 예외가 아니라는 것입니다. 입력창의 흐린 안내 문구도 사용자가 읽어야 하는 텍스트이므로 4.5:1을 충족해야 합니다.

비텍스트 대비: UI 요소도 3:1

WCAG 2.1에서 추가된 1.4.11 비텍스트 대비는 텍스트가 아닌 요소에도 최소 3:1을 요구합니다. 대상은 두 가지입니다.

• UI 구성요소: 입력창의 테두리, 체크박스와 라디오 버튼의 외곽선, 토글 스위치, 슬라이더 손잡이, 포커스 링 등 사용자가 상태를 알아보거나 조작해야 하는 시각적 경계
• 그래픽 객체: 아이콘, 차트의 선과 막대, 지도 위의 경로처럼 내용을 이해하는 데 필요한 그래픽의 각 부분

흔한 위반 사례는 흰 배경 위의 아주 연한 회색 입력창 테두리입니다. 예를 들어 #D1D5DB 테두리는 흰 배경과 1.47:1밖에 되지 않아 입력창이 어디 있는지 알아보기 어렵습니다. 테두리를 #9CA3AF(2.54:1)로 바꿔도 부족하고, #6B7280(4.83:1) 정도로 내려야 여유 있게 통과합니다. 차트에서는 인접한 두 막대의 색이 서로 3:1을 넘지 못하면 패턴이나 라벨로 구분을 보조해야 합니다. 포커스 링 역시 배경과 3:1 이상이어야 키보드 사용자가 현재 위치를 놓치지 않습니다.

실무 예시

좋은 예 (AA 통과)

• 검정 텍스트 (#000000) + 흰색 배경 (#FFFFFF) → 21:1 (최대)
• 진한 회색 (#374151) + 흰색 배경 (#FFFFFF) → 10.31:1
• 흰색 텍스트 (#FFFFFF) + 어두운 파랑 (#1E3A8A) → 10.36:1

나쁜 예 (AA 미달)

• 연한 회색 텍스트 (#9CA3AF) + 흰색 배경 → 2.54:1 (미달)
• 분홍색 (#FBCFE8) + 흰색 배경 → 1.38:1 (미달)
• 노란색 (#FACC15) + 흰색 배경 → 1.53:1 (미달)

“디자인이 예쁘다” ≠ “잘 읽힌다”. 대비 검사 도구로 항상 확인하세요.

회색 단계별 대비표 (흰 배경 기준)

디자인 시스템에서 자주 쓰는 회색 팔레트를 흰 배경 위에 놓았을 때의 값입니다. 어느 단계부터 텍스트에 써도 되는지 감을 잡는 데 유용합니다.

「보조 텍스트는 연한 회색」이라는 관행 때문에 #9CA3AF 수준의 회색이 캡션이나 날짜 표기에 자주 쓰이지만, 이 색은 큰 텍스트 기준조차 통과하지 못합니다. 위계를 표현하고 싶다면 색을 흐리게 하는 대신 글자 크기나 굵기를 줄이고, 색은 #6B7280 이상으로 유지하는 것이 안전합니다.

브랜드 컬러 보정 사례

실무에서 가장 자주 부딪히는 문제는 「브랜드 컬러가 대비 기준을 못 넘는다」는 것입니다. 채도가 높은 오렌지·연두·하늘색 계열은 흰색 텍스트를 얹으면 거의 예외 없이 탈락합니다. 브랜드 컬러를 버릴 필요는 없고, 어디에 쓰는지를 조정하면 됩니다.

사례: 오렌지 #F97316

• 문제: #F97316 배경 위 흰색 텍스트는 2.80:1로 본문은 물론 큰 텍스트 기준(3:1)도 통과하지 못합니다.
• 해법 1 · 어두운 텍스트로 교체: 같은 오렌지 배경에 진한 남색 계열 #111827 텍스트를 쓰면 6.33:1로 AA를 여유 있게 통과합니다. 채도 높은 밝은 색 위에는 흰색보다 어두운 글자가 거의 항상 유리합니다.
• 해법 2 · 텍스트용 어두운 변형 만들기: 흰 배경에 오렌지색 글자를 써야 한다면 색상(hue)은 유지하고 명도만 낮춘 #C2410C를 텍스트 전용 색으로 정합니다. 흰 배경과 5.18:1로 통과하며 브랜드의 인상은 그대로 유지됩니다.
• 해법 3 · 큰 텍스트에만 사용: 한 단계 어두운 #EA580C는 흰색과 3.56:1로 24px 이상의 제목이나 큰 버튼 라벨에는 쓸 수 있지만 본문에는 여전히 부족합니다.

사례: 파랑과 초록

많은 UI 라이브러리의 기본 파랑인 #3B82F6은 흰색 텍스트와 3.68:1로 큰 텍스트만 통과합니다. 버튼 라벨이 14~16px라면 한 단계 어두운 #2563EB(5.17:1)를 배경으로 쓰는 것이 정답입니다. 초록은 더 극단적입니다. 성공 메시지에 흔히 쓰는 #22C55E는 흰 배경에서 2.28:1에 불과해 「저장되었습니다」 같은 텍스트를 이 색으로 쓰면 읽히지 않습니다. 텍스트는 #15803D(5.02:1) 이상으로 내리고, 밝은 초록은 아이콘 배경이나 굵은 테두리처럼 3:1 기준이 적용되는 곳에 쓰는 편이 좋습니다.

정리하면 브랜드 컬러는 강조용(배경·아이콘·장식)과 텍스트용(명도를 낮춘 변형)으로 나누어 두 가지 토큰을 갖는 것이 디자인 시스템의 표준적인 해법입니다. HSL로 보면 명도(L)를 10~20포인트 낮추는 것만으로 대부분 해결되며, 색상 값은 그대로이므로 사용자는 같은 브랜드로 인식합니다.

비결: 색상은 보조 수단으로만 사용

WCAG 1.4.1 가이드라인은 “정보 전달에 색상만 사용하지 말 것”을 명시합니다. 예를 들어 빨간색만으로 “오류”를 표시하면 색각이 다른 사용자는 인지하지 못합니다. 적록 색각 이상은 흔히 남성의 약 8%, 여성의 약 0.5% 정도로 알려져 있으며, 동아시아인은 이보다 조금 낮은 비율로 보고됩니다. 어느 쪽이든 서비스 사용자 수십 명 중 한 명은 빨강과 초록을 구분하지 못한다고 보아야 합니다.

• 나쁜 예: 빨간색 입력 박스로만 에러 표시
• 좋은 예: 빨간색 + 경고 아이콘 + 텍스트 “이메일 형식이 올바르지 않습니다”

다크 모드와 대비

다크 모드에서도 같은 기준이 적용됩니다. 검정 배경(#000000)에 너무 밝은 흰색을 쓰면 눈부심이 심하므로, 보통 약간 어두운 흰색 (#E2E8F0 등)이나 회색이 섞인 배경(#1F2937)을 사용합니다.

수치로 보면 #1F2937 배경 위 순백 텍스트는 14.68:1, #E2E8F0 텍스트는 11.91:1로 둘 다 AAA를 크게 넘습니다. 즉 다크 모드에서는 텍스트를 약간 어둡게 낮춰 눈부심을 줄일 여유가 충분합니다. 반대로 주의할 점은 채도가 높은 색입니다. 어두운 배경 위의 선명한 빨강이나 보라는 글자 주변이 번져 보이는 현상(할레이션)이 생기기 쉬우므로, 라이트 모드보다 채도를 낮추고 명도를 살짝 올린 변형을 별도로 두는 것이 일반적입니다. 이 사이트가 어두운 배경 위 보라색 #A855F7을 텍스트가 아닌 버튼 배경과 장식에만 쓰는 것도 같은 이유입니다.

색맹 시뮬레이션

가장 흔한 색각 이상은 적록색맹(빨강·초록 구분 어려움)입니다. Chrome DevTools의 Rendering 탭에서 Emulate vision deficiencies 기능으로 시뮬레이션할 수 있습니다. 적색맹(protanopia)·녹색맹(deuteranopia)·청색맹(tritanopia)·전색맹 (achromatopsia)과 흐린 시야(blurred vision)를 차례로 켜 보면서, 색만으로 구분해 둔 요소가 사라지는지 확인하는 것이 핵심입니다.

도구별 검사 방법

• Chrome DevTools 색상 피커: Elements 패널에서 색상 견본을 클릭하면 배경과의 대비 비율과 AA·AAA 통과 여부가 표시되고, 피커 안에 기준선이 그려져 통과하는 색을 바로 고를 수 있습니다.
• Lighthouse: DevTools의 Lighthouse 탭에서 Accessibility 감사를 실행하면 대비가 부족한 요소 목록이 나옵니다. 배포 전 자동 점검용으로 적합합니다.
• axe DevTools·WAVE 확장 프로그램: 페이지 전체를 스캔해 위반 요소를 하이라이트하고 관련 성공 기준 번호를 알려 줍니다.
• WebAIM Contrast Checker: 두 색상 코드를 입력하면 비율과 등급별 통과 여부를 보여 주는 웹 도구로, 디자이너와 개발자가 색상 값을 주고받을 때 기준으로 삼기 좋습니다.
• FunAppBox 컬러 크래프트: 브라우저에서 두 색을 고르면 대비 비율과 AA·AAA 통과 여부를 보여 주고, 부족할 때 보정 색상을 추천합니다.

자동 도구가 잡지 못하는 영역도 있습니다. 그라디언트나 사진 위에 올린 텍스트, 반투명 오버레이는 배경이 한 가지 색이 아니어서 도구가 계산하지 못하거나 잘못 계산합니다. 이런 경우는 텍스트 뒤에 단색 띠를 깔거나 가장 밝은 지점과 가장 어두운 지점을 각각 골라 수동으로 확인해야 합니다.

실무 체크리스트

• 본문 텍스트는 최소 AA 기준(4.5:1) 충족
• 플레이스홀더·캡션·날짜 같은 보조 텍스트도 4.5:1 적용
• 입력창 테두리·체크박스·아이콘·포커스 링은 배경과 3:1 이상
• 중요한 정보는 색상 외에 텍스트·아이콘도 함께 사용
• 링크는 밑줄 또는 굵게 등 색상 외 표시 추가
• 버튼의 활성/비활성 상태를 색상만으로 구분하지 않기
• 입력 폼의 에러 상태를 빨간 테두리 + 에러 메시지로 함께 표시
• 호버·포커스 상태도 충분한 대비 유지
• 브랜드 컬러는 강조용과 텍스트용 토큰으로 분리
• 라이트·다크 모드 각각 따로 검사

자주 묻는 질문

Q. 반투명 텍스트(opacity)는 어떻게 검사하나요?

투명도가 적용된 색은 배경과 합성된 최종 색으로 계산해야 합니다. 예를 들어 흰 배경 위에 검정 60% 투명도 텍스트는 실제로는 #666666에 가까운 회색이 됩니다. DevTools에서 계산된 스타일 대신 화면을 캡처해 실제 픽셀 색을 추출하거나, 처음부터 투명도 대신 불투명한 색상 토큰을 쓰는 것이 안전합니다.

Q. 사진 위에 올린 텍스트는 어떤 지점을 기준으로 하나요?

텍스트가 겹치는 모든 영역이 기준을 만족해야 합니다. 사진은 밝은 부분과 어두운 부분이 섞여 있어 어느 한 지점만 통과해서는 부족합니다. 실무에서는 사진 위에 반투명 어두운 오버레이를 깔거나, 텍스트 뒤에 단색 상자나 그림자를 넣어 배경을 사실상 균일하게 만드는 방법이 널리 쓰입니다.

Q. 큰 글씨 기준의 굵은 글씨는 어느 정도를 말하나요?

WCAG는 font-weight 700(bold) 이상을 굵은 글씨로 봅니다. 500이나 600 같은 중간 굵기는 굵은 글씨에 해당하지 않으므로, 18.7px 크기의 세미볼드 텍스트는 큰 텍스트가 아니라 일반 텍스트로 4.5:1을 적용합니다.

Q. WCAG 3에서는 대비 기준이 바뀐다고 들었습니다.

W3C가 작업 중인 WCAG 3.0 초안에서는 글자 크기와 굵기, 배경의 밝기 방향까지 반영하는 새로운 지각 기반 대비 모델(APCA)이 검토되고 있습니다. 다만 아직 초안 단계이며 법적 준거 기준은 여전히 WCAG 2.x입니다. 현재 프로젝트는 2.x 기준으로 검사하되, 새 모델이 지적하는 「밝은 배경의 어두운 글자와 어두운 배경의 밝은 글자는 같은 비율이라도 체감 대비가 다르다」는 점은 참고할 가치가 있습니다.

마치며

색상 접근성은 한 번 익히면 자연스럽게 적용할 수 있는 영역입니다. 공식은 복잡해 보이지만 실무에서 기억할 것은 「본문 4.5:1, 큰 글씨와 UI 요소 3:1, 색만으로 정보를 전달하지 않기」 세 가지입니다. FunAppBox의 컬러 크래프트 도구로 본인의 색상 조합이 WCAG AA/AAA 기준을 통과하는지 즉시 확인해보세요. 부족한 대비라면 자동으로 보정 색상도 추천해드립니다.