본문으로 건너뛰기
yutils
예시

입력 (전경 / 배경)

전경: #475569
배경: #ffffff

출력

대비 비율: 7.15 : 1
WCAG AA (normal): ✓ pass (4.5+)
WCAG AA (large): ✓ pass (3+)
WCAG AAA (normal): ✓ pass (7+)
WCAG AAA (large): ✓ pass (4.5+)

참고

sRGB 상대 휘도 기반 대비 계산 (WCAG 2.1). 'large' 는 18pt 이상 또는 14pt bold 텍스트 기준.

사용법 / 자주 묻는 질문

이런 경우 사용하세요

  • 디자인 시스템의 텍스트 색상 접근성 검증
  • 낮은 대비로 인한 가독성 문제 사전 발견
  • WCAG AA / AAA 준수 여부 확인 (법적 요구사항 충족)
  • 다크 모드 컬러 쌍의 대비 검토
  • 버튼·링크의 호버 상태 대비 확인

자주 묻는 질문

Q.AA 와 AAA 차이는?
A.AA 는 일반적인 웹사이트의 최소 기준 (4.5:1 normal · 3:1 large). AAA 는 가장 엄격 (7:1 · 4.5:1) — 정부·금융·의료 사이트가 자주 요구. 대부분의 사이트는 AA 목표.
Q.왜 large text 는 기준이 낮나요?
A.큰 글자는 굵기·면적이 커 시각 인식이 쉽기 때문. 18pt(약 24px) 이상 또는 14pt(약 18.7px) bold 가 'large' 기준.
Q.APCA / WCAG 3 는?
A.WCAG 3 가 도입할 새 contrast 알고리즘(APCA) — 사람 인식과 더 잘 맞습니다. 아직 draft 라 본 도구는 WCAG 2.1 기준.
재미있는 사실

  • WCAG 의 색 대비 기준 — AA 는 일반 텍스트 4.5:1 / 큰 텍스트 (18pt 이상 또는 14pt bold) 3:1, AAA 는 각각 7:1 / 4.5:1. 이 비율은 영국 색채학자 Lovie-Kitchin 의 1980년대 시각장애 연구에서 도출된 임상 기준이 정책화된 것입니다.

    W3C — WCAG 2.1 Contrast

  • WCAG 의 대비 공식은 RGB 값이 아닌 'relative luminance' (Y) 를 사용합니다 — sRGB 의 감마 보정을 풀고 가중치 (R=0.2126, G=0.7152, B=0.0722) 를 적용한 값. 눈이 녹색에 가장 민감하다는 사실이 공식에 박혀 있어요.

    W3C — Relative luminance

  • WCAG 의 대비 공식은 color blindness (전 세계 남성의 ~8%, 여성의 ~0.5%) 를 완벽히 다루지 못합니다 — 빨강과 녹색이 명도가 비슷해 색맹 사용자에겐 둘 다 회색처럼 보일 수 있어요. WCAG 2.2 (2023) 가 추가 기준을 일부 보완했지만 별도 검증 도구 필요.

    Wikipedia — Color blindness

관련 가이드

관련 도구

이 카테고리 모든 도구 보기 →