색상 대비 검사기

언제 사용하나요?

웹·앱 디자인 시 텍스트와 배경의 색상 조합이 WCAG 접근성 기준을 충족하는지 확인할 때 사용합니다.

사용 방법

• 전경색(텍스트 색상)과 배경색을 색상 피커 또는 HEX 코드로 입력합니다.
• 미리보기와 함께 대비율이 자동 계산됩니다.
• 일반 텍스트·큰 텍스트·UI 컴포넌트 항목별 WCAG AA/AAA 통과 여부를 확인합니다.

입력값 안내

HEX 색상 코드(#RRGGBB)를 입력하거나 색상 피커를 사용합니다. ⇆ 버튼으로 전경색·배경색을 교체할 수 있습니다.

자주 묻는 질문

AA와 AAA는 무슨 차이인가요?

WCAG 2.1 기준으로 일반 텍스트는 AA ≥ 4.5:1, AAA ≥ 7:1이고, 큰 텍스트(18px 이상 또는 굵게 14px 이상)는 AA ≥ 3:1, AAA ≥ 4.5:1입니다.

UI 컴포넌트 기준은 어떻게 되나요?

버튼 테두리, 아이콘, 그래픽 요소 등 비텍스트 UI는 WCAG 2.1 기준 3:1 이상의 대비율이 필요합니다.

관련 도구

• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.
• JWT 디코더 - JWT의 header와 payload를 디코딩해 JSON과 주요 클레임을 확인합니다.
• 정규식 테스터 - 정규식 패턴을 입력해 텍스트에서 매칭 결과를 실시간으로 확인합니다.
• QR 코드 생성기 - 텍스트나 URL을 QR 코드로 변환하고 이미지로 다운로드합니다.