색 대비 실무 — 흔한 실패와 통과시키는 법
대비비의 정의와 WCAG 기준은 색 대비비 기초에서 다뤘습니다. 이번 편은 실제 화면에서 대비가 어디서 자주 무너지고, 어떻게 고치느냐입니다.
대비가 자주 무너지는 곳
실무에서 마주치는 건 대개 이 세 가지입니다. 나쁜 예(✗)와 고친 예(✓)를 나란히 놓고 보겠습니다.
1. 연한 회색 본문
“연하고 세련되게”를 노리다 가장 많이 나오는 실패입니다. 본문 회색은 #767676(4.5:1)이 하한선이고, 여유 있게 가려면 #5f5f5f 근처를 씁니다.
2. 컬러 버튼 위 흰 글자
파스텔·중간 밝기 파랑에 흰 글자를 얹으면, 큰 글자(3:1)는 통과해도 버튼 글자 크기에서는 4.5:1을 못 넘기는 경우가 많습니다. 배경 파랑을 한두 단계 어둡게 하면 hue는 그대로 두고 통과합니다.
3. 본문 속 링크 색
링크 색은 먼저 배경과 4.5:1 이상이어야 합니다. 여기에 더해, 밑줄 없이 색만으로 링크를 표시할 거라면 주변 본문 글자와도 3:1 이상 차이가 나야 하는데 이건 실제로 맞추기 까다롭습니다. 밑줄을 같이 쓰면 이 3:1 요건이 사라지므로, 밑줄이 가장 간단한 해법입니다. 다만 배경과의 4.5:1은 밑줄이 있어도 그대로 지켜야 합니다.
이 밖에 자주 놓치는 것
- 플레이스홀더 — 연하게 두는 게 관례처럼 굳어 있지만, WCAG 대비 기준의 예외 목록에 플레이스홀더는 없습니다. 글자이므로 4.5:1 대상으로 보는 게 맞습니다. 필수 안내를 플레이스홀더에만 넣지 말고 라벨로 빼 두면, 플레이스홀더 색을 정하기도 한결 편해집니다.
- 비활성(disabled) 버튼 — 요건 제외 대상이지만 “비활성처럼 보이되 글자는 읽히게” 하려면 3:1 근처가 적당합니다.
- 배경 이미지·그라데이션 위 텍스트 — 이미지에서 가장 밝은 부분 기준으로 대비를 봐야 합니다. 반투명 검정 오버레이를 깔거나 글자에 그림자를 줍니다.
저도 시안에서는 괜찮아 보였는데 모니터마다 색감이 달라 곤란했던 적이 있습니다. 그때 사이트 전체의 색을 한 번에 검사했습니다. 눈으로 보는 판단은 화면에 따라 달라지지만, 대비비는 숫자라서 어느 모니터에서 확인하든 결과가 같습니다.
브랜드색이 기준 미달일 때
브랜드 파랑이 #3B82F6인데 흰 배경에서 약 3.7:1이라 본문·링크로 못 쓴다고 해봅시다. 이때 hue(파랑다움)는 건드리지 말고 밝기만 낮춥니다.
- HSL로 바꿔 L(명도)만 5~15%씩 내려 보며 4.5:1을 넘기는 지점을 찾습니다.
- 채도(S)는 거의 그대로 둬야 “같은 브랜드색의 진한 버전”으로 보입니다.
- 결과를 브랜드 팔레트에 “본문·링크용 딥 톤”으로 따로 등록해 두면 재사용됩니다.
원래 색은 큰 제목·아이콘처럼 3:1만 넘기면 되는 곳에 계속 씁니다. 버튼 배경으로 쓸 때는 조심해야 합니다. 버튼이 주변과 구분되는 데는 3:1이면 되지만, 그 위에 얹는 흰 글자는 큰 글자가 아니면 여전히 4.5:1이 필요합니다. #3B82F6 위 흰 글자는 3.7:1이라 보통 크기 버튼 라벨로는 부족합니다.
통과하는 색을 바로 받고 싶으면 색상 대비 검사기에 현재 조합을 넣으세요. 기준 미달이면 배경을 유지한 채 통과하는 가장 가까운 글자색을 추천해 줍니다.
브랜드 요소를 바꿀 수 없으면 반대로 주변을 바꿔야 할 때도 있습니다. 클라이언트가 흰색 로고를 쓰길 원해서, 원래 흰 바탕이나 밝은 바탕이던 곳을 전부 어둡게 바꾼 적이 있습니다. 로고 속 글자는 WCAG 대비 기준에서 예외지만, 흰 바탕 위의 흰 로고는 애초에 보이지 않으니 기준과 상관없이 손봐야 했습니다.
다크모드에서 다시 확인
라이트모드에서 통과한 팔레트도 다크모드에서는 배경이 반대로 바뀌므로 대비가 전부 달라집니다.
- 라이트에서 쓰던 채도 높은 색은 어두운 배경에서 눈부시거나(파랑·보라) 반대로 묻힙니다(남색).
- 다크모드용으로 명도를 올린 별도 톤이 거의 항상 필요합니다.
- 순수 검정(
#000) 배경보다#121212대 배경이 대비가 과하지 않아 눈이 편합니다.
처음 다크모드를 만들 때 저는 배경만 어둡게 하고 검은 글자만 흰색으로 바꿨습니다. 그랬더니 가독성이 매우 나빠져서 색을 처음부터 다시 지정해야 했습니다. 배경과 글자만 뒤집어서는 다크모드가 되지 않습니다.
대비만 맞추면 끝이 아니다
- 색만으로 정보를 전달하지 않기 — “빨간 항목은 오류”처럼 색에만 의존하면 색각 이상 사용자는 구분 못 합니다. 아이콘·라벨·밑줄을 함께 씁니다.
- 글자가 아닌 것도 기준이 있다 — 입력칸 테두리, 체크박스, 아이콘 버튼, 포커스 표시처럼 알아봐야 쓸 수 있는 요소는 주변 색과 3:1 이상이어야 합니다(WCAG 1.4.11). 연회색 테두리만 있는 입력칸이 흔히 여기서 걸립니다.
공공기관 프로젝트를 할 때는 접근성 검사가 꽤 빡빡했습니다. 웹 접근성 인증마크까지 받아야 했기 때문에 색 하나하나를 꼼꼼하게 확인했습니다.
요약
#999본문, 중간 밝기 버튼 위 흰 글자가 대표적 실패- 브랜드색이 미달이면 hue·채도는 두고 명도만 낮춰 “딥 톤”을 따로 만든다
- 원래 브랜드색은 3:1만 필요한 큰 제목·아이콘에 쓴다. 버튼 배경이면 위 글자의 4.5:1을 따로 확인한다
- 입력칸 테두리·아이콘처럼 글자가 아닌 요소도 3:1이 필요하다
- 다크모드는 대비를 처음부터 다시 확인, 별도 톤이 필요하다
- 색만으로 정보를 전달하지 않는다 (색각 이상 고려)