내부 도구
색상 대비 확인기
텍스트와 배경의 두 단색을 비교해 WCAG 대비율과 주요 텍스트·UI 기준 충족 여부를 브라우저에서 참고용으로 확인합니다.
바로 실행
빠른 이동
이 페이지에서 바로 찾기
색상 대비 확인기는 텍스트색과 배경색의 대비율을 계산해 읽기 쉬운 조합인지 빠르게 점검하는 내부 도구입니다. 페이지 전체의 접근성을 인증하는 도구가 아니라, 두 개의 불투명한 단색 조합을 먼저 확인하는 참고 도구입니다.
한눈에 보기
- 3자리 또는 6자리 HEX 색상값을 입력할 수 있습니다.
- WCAG AA 일반 텍스트, AA 큰 텍스트, AAA 일반 텍스트 기준을 구분해 표시합니다.
- 버튼·아이콘·입력 테두리 같은 비텍스트 요소의 3:1 참고 기준도 함께 봅니다.
- 실제 조합을 미리보기에서 바로 확인합니다.
- 입력과 결과는 서버로 전송하거나 저장하지 않습니다.
이럴 때 사용
- 본문 텍스트와 배경색 조합을 정하기 전
- 버튼, 입력창 테두리, 아이콘의 색상 차이를 점검할 때
- 브랜드 색상을 밝은 배경과 어두운 배경에 각각 적용할 때
- 접근성 검수 전에 명백히 약한 색상 조합을 먼저 찾을 때
사용 방법
- 텍스트색과 배경색을 색상 선택기 또는 HEX 값으로 입력합니다.
대비 확인을 눌러 대비율과 기준별 결과를 확인합니다.- 필요하면
색상 바꾸기로 앞·뒤 색상의 역할을 맞바꿉니다. - 미리보기와 실제 페이지의 글자 크기, 굵기, 상태별 색상을 함께 점검합니다.
예시 입력
텍스트색: #1D4ED8
배경색: #FFFFFF
예시 결과
대비율: 약 6.70:1
AA 일반 텍스트: 충족
AA 큰 텍스트: 충족
AAA 일반 텍스트: 미충족
정확한 값은 브라우저 계산 결과에서 확인하세요. 기준값과 같거나 높은 조합만 해당 항목을 충족합니다.
자주 실수하는 부분
- 텍스트색과 배경색 사이에 이미지나 그라데이션이 있는데 두 단색만 비교함
- 일반 텍스트와 큰 텍스트 기준을 구분하지 않음
- 기본 상태만 보고 hover, focus, disabled 상태를 확인하지 않음
- 대비율 하나만으로 페이지 전체 접근성이 확보됐다고 판단함
주의할 점
이 도구는 불투명한 두 단색의 수학적 대비만 계산합니다. 투명도, 그라데이션, 이미지 배경, 실제 글꼴 크기·굵기, 포커스 표시, 화면 밝기와 사용자 환경은 별도로 확인해야 합니다. WCAG 적합성 판단이나 접근성 인증을 대신하지 않으며, 중요한 서비스는 최신 W3C WCAG 안내와 접근성 전문가 검수를 함께 확인하세요.