개발자🔒 브라우저에서 실행

색상 대비 검사기

WCAG AA/AAA 색상 대비 준수 여부 확인

텍스트 색상

배경 색상

미리보기 제목 텍스트

이 색상으로 본문 텍스트가 어떻게 보일지입니다.

참고용 작은 텍스트입니다.

대비율

21.00:1

WCAG AA

일반 텍스트✓ 통과

큰 텍스트 (18px+)✓ 통과

UI 컴포넌트✓ 통과

WCAG AAA

일반 텍스트✓ 통과

큰 텍스트 (18px+)✓ 통과

사용 사례

마케팅 페이지 출시 전 주요 버튼 색상이 WCAG AA를 통과하는지 검증.
실제 전경/배경 HEX 쌍을 붙여 기존 랜딩 페이지 감사.
밝은 배경에서 AA를 여전히 통과하는 차분한 텍스트 색조 선택.
브랜드 회색이 가독성 있는지에 대한 디자인 대 개발 논쟁 정리.
같은 배경에 대해 두 개의 후보 강조색을 나란히 비교.

색상 대비 검사기 정보

색상 대비 검사기는 WCAG 2.1 가이드라인에 따라 두 색상 간의 대비율을 평가합니다. 색상 조합이 일반 텍스트, 큰 텍스트, UI 컴포넌트에 대한 AA 또는 AAA 접근성 기준을 충족하는지 확인합니다. 모든 것이 브라우저에서 실행됩니다.

자주 묻는 질문

적절한 대비율은 얼마인가요?

WCAG AA는 일반 텍스트에 최소 4.5:1, 큰 텍스트(18px+ 또는 14px+ 굵게)에 3:1의 비율을 요구합니다. WCAG AAA는 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다. 비율이 높을수록 가독성이 향상됩니다.

AA와 AAA의 차이는 무엇인가요?

AA는 대부분의 웹 콘텐츠에 권장되는 최소 기준입니다. AAA는 시각 장애가 있는 사용자에게 더 나은 가독성을 제공하는 더 엄격한 기준입니다. AAA를 충족하는 것이 이상적이지만 항상 필수는 아닙니다.

대비율은 어떻게 계산되나요?

대비율은 WCAG 2.1에서 정의한 각 색상의 상대 휘도를 사용하여 계산됩니다. 이 공식은 밝은 색상과 어두운 색상을 1:1(대비 없음)에서 21:1(검정 위 흰색의 최대 대비)까지의 척도로 비교합니다.

새로운 APCA 대비 공식을 구현하나요?

아니요 — WCAG 2.1 비율(상대 휘도, (L1+0.05)/(L2+0.05) 공식)을 사용합니다. APCA는 더 나은 지각 모델링을 갖춘 WCAG 3 후계 후보이지만 아직 규범 표준이 아닙니다. WCAG 2.1은 감사관, 소송, `axe-core`가 확인하는 기준이므로 컴플라이언스 작업의 올바른 참조입니다.

'#666 on white'가 일부 도구에서 5.74:1로 AA 실패, 여기서는 통과인 이유는?

도구마다 반올림 단계가 다릅니다. 여기서는 WCAG sRGB 선형화(감마 2.4와 0.04045 컷오프)로 휘도를 계산하고 비율을 취한 뒤 4.5/3.0 임계값과 비교합니다. 차이는 보통 감마 반올림에서 0.01~0.05입니다. 임계값에서의 합/불합 판정 자체는 일관됩니다.

사용 사례

마케팅 페이지 출시 전 주요 버튼 색상이 WCAG AA를 통과하는지 검증.

실제 전경/배경 HEX 쌍을 붙여 기존 랜딩 페이지 감사.

밝은 배경에서 AA를 여전히 통과하는 차분한 텍스트 색조 선택.

브랜드 회색이 가독성 있는지에 대한 디자인 대 개발 논쟁 정리.

같은 배경에 대해 두 개의 후보 강조색을 나란히 비교.