색 대비 체크 도구: WCAG 대비비(Contrast Ratio)로 접근성 기준을 빠르게 확인하기

이 문서는 텍스트와 배경 색 조합이 충분히 읽기 쉬운지 판단하기 위해 사용하는 대비비(Contrast ratio)와 WCAG AA/AAA 기준을 설명합니다. 상단 생성기에서는 전경(텍스트)과 배경 색을 선택하고, 폰트 크기/굵기/샘플 문구를 조절해 실제 화면과 비슷한 조건에서 결과를 확인할 수 있습니다. 대비가 부족한 조합은 시각적으로는 “그럴듯”해 보여도 일부 사용자에게는 읽기 어렵고, 검색/브라우저 환경에 따라 가독성이 크게 달라질 수 있습니다.

대비 체크가 중요한 이유

대비는 “미감”보다 먼저 “읽기”의 문제입니다. 대비가 낮으면 사용자는 내용을 읽기 위해 더 많은 노력을 해야 하고, 이는 이탈로 이어질 수 있습니다. 또한 모니터 품질, 모바일 야외 환경, 다크모드/라이트모드, 눈의 피로도 등에 따라 체감 가독성이 달라지기 때문에, 숫자로 확인하는 과정이 중요합니다.

  • 접근성: 저시력/색각 이상 사용자에게 특히 중요합니다.
  • 브랜드 신뢰: 읽기 어려운 UI는 ‘완성도 낮음’으로 인지될 수 있습니다.
  • 정보 전달: CTA/경고/상태 표시 같은 핵심 텍스트는 반드시 잘 보여야 합니다.
  • 테마 대응: 다크/라이트에서 같은 색이 다른 대비를 만들 수 있습니다.

추천: 대비가 애매하면 “색을 바꾸기” 전에 먼저 폰트 굵기/크기를 조절해 Large 텍스트 기준으로 통과시키는 방법도 있습니다. 다만 본문 텍스트는 가급적 normal 기준에서 AA 이상을 권장합니다.

WCAG AA/AAA와 Large 텍스트 기준

WCAG는 웹 접근성 가이드라인으로, 색 대비에 대한 최소 권장 기준을 제공합니다. 일반적으로 AA는 실무에서 최소 기준으로 많이 사용되며, 중요한 텍스트나 서비스 특성에 따라 AAA를 목표로 하기도 합니다.

  • AA(일반 텍스트): 4.5:1 이상
  • AAA(일반 텍스트): 7:1 이상
  • AA(Large 텍스트): 3:1 이상
  • AAA(Large 텍스트): 4.5:1 이상

Large 텍스트는 일반적으로 큰 글자(예: 18pt 이상 또는 굵은 14pt 이상)로 간주됩니다. 즉 같은 색 조합이라도, 텍스트 크기와 굵기가 달라지면 “통과 여부”가 달라질 수 있습니다. 이 도구가 폰트 크기와 굵기를 같이 다루는 이유입니다.

생성기 사용 방법(권장 흐름)

  1. 텍스트/배경 색 선택: 현재 디자인에서 쓰는 실제 값으로 시작합니다.
  2. 폰트 크기/굵기 설정: 실제 컴포넌트와 동일 조건으로 맞춥니다.
  3. 샘플 텍스트: 한글/영문/숫자 혼합으로 확인하면 더 정확합니다.
  4. 결과 확인: 대비비 숫자와 AA/AAA 통과 여부를 함께 확인합니다.
  5. 대안 시도: 색/굵기/크기 중 하나만 바꿔도 통과할 수 있습니다.

대비는 단순히 “검정/흰색” 문제만이 아닙니다. 예를 들어 버튼의 텍스트 대비는 통과하지만, 비활성(disabled) 상태에서 대비가 급격히 떨어지는 경우가 많습니다. 상태별(hover/focus/disabled)로도 확인하는 습관이 좋습니다. 포커스 링은 보더/라디우스 도구와 함께 관리하면 더 안정적입니다.

디자인에서 대비를 올리는 실전 방법

대비가 낮을 때 가장 흔한 실수는 색을 한 번에 크게 바꾸는 것입니다. 보통은 작은 조정으로도 통과할 수 있습니다. 특히 다크 UI에서는 배경과 텍스트가 모두 “회색 계열”로 수렴해 대비가 애매해지기 쉽습니다.

  • 텍스트를 더 밝게/어둡게: 가장 직접적이며 효과가 큽니다.
  • 배경을 살짝 이동: 배경을 3~8%만 바꿔도 대비가 크게 변합니다.
  • 굵기/크기 조정: Large 기준을 활용해 통과시키는 방법(단, 본문은 주의).
  • 보조 레이어: 반투명 오버레이나 그림자로 배경을 정리해 대비를 확보합니다.
  • 상태별 규칙: hover/focus/disabled에서 대비가 무너지지 않게 토큰으로 관리합니다.

컬러 시스템을 함께 다듬고 싶다면 팔레트 생성기로 50~900 스케일을 만들고, 각 단계에서 대비가 안정적으로 나오는 조합(예: 900 텍스트 + 50 배경)을 확보하는 방식이 좋습니다.

자주 쓰는 색 조합 패턴

1) 본문 텍스트

  • 목표: 일반 텍스트 기준 AA 이상
  • 팁: 본문은 색을 연하게 만들수록 대비가 빠르게 무너집니다. muted 텍스트도 최소 기준을 확인하세요.

2) CTA 버튼

  • 목표: 텍스트 대비 + 배경/버튼 경계(hover)까지 함께 확인
  • 팁: 그라디언트 버튼은 구간별로 대비가 달라질 수 있으니 여러 지점에서 테스트합니다.

3) 상태 텍스트(성공/경고/오류)

  • 목표: 색만으로 의미를 전달하지 않기(아이콘/텍스트 병행)
  • 팁: 위험/경고 색은 채도를 올리는 대신 배경 대비로 읽기 쉬움을 확보합니다.

위 패턴을 반복 적용하면, 다크/라이트 테마 모두에서 안정적인 대비 규칙을 만들 수 있습니다. 이 도구에서 통과한 값을 디자인 토큰으로 정리해 두면, 페이지가 늘어도 대비 품질이 유지됩니다.

자주 묻는 질문(FAQ)

  • Q. 대비비 숫자가 높으면 무조건 좋은가요? A. 가독성은 좋아지지만, 너무 강한 대비는 눈부심을 만들 수 있습니다. 본문은 AA~AAA 범위에서 톤을 맞추는 접근이 좋습니다.
  • Q. 다크모드에서 특히 어려운 이유는? A. 배경도 어둡고 텍스트도 회색으로 만들기 쉬워 대비가 애매해집니다. 텍스트를 충분히 밝게 두고, 배경을 레이어로 분리하면 안정적입니다.
  • Q. 링크 색은 어떻게 잡아야 하나요? A. 링크는 주변 본문과 구분되어야 하므로 대비뿐 아니라 “차이”가 필요합니다. 색 + 밑줄 같은 중복 단서를 권장합니다.
알림