대비 체커

텍스트와 배경색의 대비 비율을 확인하고 WCAG 기준을 검사합니다

전경색과 배경색을 고르면 명도 대비 비율이 소수점 둘째 자리까지 계산되고, 일반 텍스트 AA(4.5:1)·큰 텍스트 AA(3:1)·일반 AAA(7:1)·큰 AAA(4.5:1) 네 항목의 통과 여부가 따로 표시됩니다. 두 색을 맞바꾸는 버튼이 있어 다크 모드 반전 조합도 바로 확인할 수 있고, 미리보기 박스에는 실제 문장이 해당 색으로 렌더링됩니다. 접근성 심사를 앞둔 서비스나 공공기관 사이트 작업에서 버튼·링크·힌트 문구 색을 결정할 때 근거 자료로 쓰기 좋습니다.

이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.

Aa

텍스트 미리보기

The quick brown fox jumps over the lazy dog

대비 비율
21.00:1
AAA
WCAG 2.1 기준
일반 텍스트 (AA)
최소 4.5:1 · 본문 텍스트
통과
큰 텍스트 (AA)
최소 3:1 · 18pt+ 또는 14pt 굵게
통과
일반 텍스트 (AAA)
최소 7:1 · 향상된 대비
통과
큰 텍스트 (AAA)
최소 4.5:1 · 향상된 대비 (큰 텍스트)
통과
UI 컴포넌트
최소 3:1 · 버튼, 입력 필드 등
통과

WCAG (Web Content Accessibility Guidelines)는 웹 접근성 표준입니다. AA 레벨은 최소 요구사항이며, AAA 레벨은 권장사항입니다.

광고

대비 체커, 이렇게 쓰세요

전경색과 배경색의 명도 대비 비율을 계산해 WCAG AA·AAA 기준 통과 여부를 알려 줍니다.

버튼 텍스트·본문·힌트 문구의 색을 정할 때, 접근성 심사 전에 색 조합을 검증할 때 씁니다.

일반 텍스트는 4.5:1, 24px 이상 큰 글자는 3:1 이 AA 기준입니다. 회색 힌트 텍스트가 가장 자주 탈락하니 #767676 보다 어둡게 쓰세요.

관련 도구

자주 묻는 질문

Q. AAA 까지 맞춰야 하나요?

필수는 아닙니다. 본문은 AA(4.5:1), 중요 안내문은 AAA(7:1) 를 목표로 잡으면 충분합니다.

Q. 큰 텍스트의 기준은 몇 px인가요?

18pt(약 24px) 이상이거나 14pt(약 18.7px) 이상 굵은 글자입니다. 그 아래 크기는 모두 일반 텍스트 기준 4.5:1을 맞춰야 합니다.

Q. 반투명 색(rgba)은 검사할 수 있나요?

이 도구는 불투명 HEX 두 개만 비교합니다. 투명도가 있는 색은 배경과 섞인 실제 색을 색상 변환 도구로 먼저 구한 뒤 넣으세요.