WCAG 컬러 대비 검사

글자 색과 배경 색을 입력하면 대비 비율과 WCAG AA·AAA 통과 여부를 즉시 판정합니다. 디자인 접근성 검토에 사용하세요.

전경 (글자)

배경

– :1

–

일반 텍스트 — Sample text 12345

큰 텍스트 — Heading 24px

굵은 큰 텍스트 — Bold 18.66px

일반 텍스트 < 18pt 또는 < 14pt 굵게

AA 4.5:1 –

AAA 7:1 –

큰 텍스트 ≥ 18pt 또는 ≥ 14pt 굵게

AA 3:1 –

AAA 4.5:1 –

UI 컴포넌트 버튼·아이콘·테두리

AA 3:1 –

사용 방법

두 색상 입력

전경(글자) 색과 배경 색을 색상 피커로 선택하거나 HEX/RGB로 직접 입력하세요.

대비 비율 확인

결과 카드에 1:1부터 21:1까지 비율과 미리보기 텍스트가 표시됩니다.

AA·AAA 통과 검토

일반 텍스트(4.5:1, 7:1)와 큰 텍스트(3:1, 4.5:1)에 대한 AA·AAA 결과가 동시에 표시됩니다. 통과는 초록, 실패는 빨강으로.

WCAG 대비 기준은 어떻게 되나요?

WCAG 2.1 기준으로 일반 텍스트(<18pt 또는 <14pt 굵게)는 AA 4.5:1 / AAA 7:1, 큰 텍스트(≥18pt 또는 ≥14pt 굵게)는 AA 3:1 / AAA 4.5:1입니다. UI 컴포넌트·그래픽은 별도 3:1 기준이 적용됩니다.

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

두 색상의 상대 휘도(L1, L2)를 구한 뒤 (밝은 색 + 0.05) / (어두운 색 + 0.05)로 계산합니다. 결과는 1:1(동일색)에서 21:1(검정/흰색)까지 나옵니다.

투명도가 있는 색은 어떻게 하나요?

대비 비율은 불투명 색끼리 비교하는 것이 표준입니다. 투명 색은 실제 합성된 색(배경과 섞인 결과)을 입력하세요.

큰 텍스트 기준은 정확히 무엇인가요?

18pt(24px) 이상 또는 14pt(18.66px) 이상 굵은 글씨가 큰 텍스트입니다. 그 이상이면 AA·AAA 모두 더 낮은 비율로 통과 가능합니다.

데이터가 서버에 전송되나요?

아닙니다. 모든 계산은 브라우저에서만 이루어지며, 입력한 색상이 외부로 전송되지 않습니다.