색상 대비 검사기

WCAG 웹 접근성 기준에 따라 색상 대비율을 검사합니다.

샘플 텍스트 Sample Text 123

대비율

21:1

일반 텍스트

AA (4.5:1) 통과
AAA (7:1) 통과

큰 텍스트 (18pt+)

AA (3:1) 통과
AAA (4.5:1) 통과

추천 색상 조합

색상 대비 검사기 안내

색상 대비 검사란?

색상 대비 검사기는 웹 콘텐츠 접근성 지침(WCAG 2.1)에 따라 전경색(텍스트)과 배경색 사이의 대비율을 측정하는 도구입니다. 적절한 색상 대비를 유지해야 시각 장애인, 색각 이상자, 고령자는 물론 밝은 햇빛 아래에서 모바일 기기를 사용하는 일반 사용자도 콘텐츠를 읽을 수 있습니다. 이 도구는 두 색상의 상대 휘도를 계산하여 대비율을 산출하고, WCAG AA 및 AAA 등급 기준으로 통과 여부를 판정합니다. WCAG(Web Content Accessibility Guidelines)는 W3C(World Wide Web Consortium)에서 제정한 국제 웹 접근성 표준으로, 1999년 WCAG 1.0이 처음 발표된 이후 현재 WCAG 2.1이 널리 적용되고 있습니다. 한국의 웹 접근성 인증(KWCAG)이나 미국의 ADA(Americans with Disabilities Act) 준수에서도 WCAG 기준이 참조되며, 유럽 EN 301 549 표준 역시 WCAG를 기반으로 합니다. 이처럼 색상 대비 검사는 단순한 디자인 선택을 넘어 법적 요구사항과도 직결되는 중요한 작업입니다.

작동 원리

대비율 계산은 두 단계로 이루어집니다. 먼저 각 색상의 상대 휘도(Relative Luminance)를 구합니다. HEX 또는 RGB 값에서 R, G, B 채널을 0~1 범위로 정규화한 뒤, sRGB 감마 보정 역변환을 적용합니다. 값이 0.04045 이하면 12.92로 나누고, 그 이상이면 ((값 + 0.055) / 1.055)^2.4 공식을 사용합니다. 이렇게 구한 선형 RGB 값에 가중치(R: 0.2126, G: 0.7152, B: 0.0722)를 곱하여 합산하면 휘도가 됩니다. 이 가중치는 인간의 눈이 초록색에 가장 민감하고 파란색에 가장 둔감하다는 시각 특성을 반영합니다. 두 휘도 값 중 밝은 쪽에 0.05를 더한 값을 어두운 쪽에 0.05를 더한 값으로 나누면 최종 대비율이 산출됩니다. 결과는 1:1(두 색이 동일)부터 21:1(순수 검정과 흰색)까지의 범위를 가집니다.

WCAG 등급 기준

  • AA 일반 텍스트 - 최소 4.5:1 대비율이 필요합니다. 웹 접근성의 기본 기준입니다.
  • AA 큰 텍스트 - 최소 3:1 대비율이 필요합니다 (18pt 이상 또는 14pt 굵게).
  • AAA 일반 텍스트 - 최소 7:1 대비율이 필요합니다. 강화된 접근성 기준입니다.
  • AAA 큰 텍스트 - 최소 4.5:1 대비율이 필요합니다.

비슷한 도구 살펴보기

관련 블로그 글