이 도구가 필요한 상황
- 버튼, 링크, 본문 텍스트 색상을 배포하기 전
- 디자인 리뷰에서 텍스트가 읽기 어렵다는 피드백이 있을 때
- 브랜드 컬러를 밝은/어두운 배경에서 함께 테스트할 때
Contrast Checker
텍스트 색상과 배경 색상을 비교해 대비 비율과 WCAG 접근성 기준 충족 여부를 확인할 수 있습니다.
사용 방법
- 전경색과 배경색 HEX 값을 입력하거나 컬러 피커로 선택하세요.
- 색상 바꾸기 버튼으로 전경색/배경색을 빠르게 교체할 수 있습니다.
- 아래에서 대비 비율과 WCAG 통과/실패 결과를 확인하세요.
6자리 HEX 형식을 사용하세요. (예: #111827)
6자리 HEX 형식을 사용하세요. (예: #111827)
대비 점검 빠른 가이드
이 페이지에서 텍스트 가독성을 빠르게 확인하고, 필요하면 관련 가이드로 넘어가 상세 개선 방법을 확인하세요.
빠른 사용 순서
- 텍스트(전경)와 배경 HEX 값을 입력하세요.
- 대비 비율과 WCAG AA/AAA 결과를 확인하세요.
- 핵심 텍스트가 통과할 때까지 색상을 조정하고 다시 테스트하세요.
자주 하는 실수
- 제목만 확인하고 작은 본문 텍스트를 점검하지 않는 경우
- 기본 상태만 확인하고 hover/focus/disabled를 놓치는 경우
- 측정값 대신 감각만으로 대비를 판단하는 경우
관련 Contrast Checker 가이드
낮은 대비 수정과 접근 가능한 UI 색상 선택을 다루는 짧은 실무 가이드를 확인하세요.