색상 대비 검사기

텍스트와 배경색의 명도 대비를 확인하세요

디자인 시안에서 어울리는 두 색상이라도 실제 작은 글자나 버튼에 적용하면 읽기 어려울 수 있습니다. 전경색과 배경색의 HEX 값을 입력하면 WCAG 2.x AA·AAA 대비 기준과 결과를 확인할 수 있습니다. 텍스트, 버튼 등 실제 UI 요소에 색상을 적용한 미리보기로 숫자뿐 아니라 사용 환경에서도 비교하세요.

WCAG 명도 대비 기준은 무엇인가요?

• 일반 텍스트: AA는 4.5:1 이상, AAA는 7:1 이상
• 큰 텍스트: AA는 3:1 이상, AAA는 4.5:1 이상. WCAG에서 큰 텍스트는 일반 굵기 24px 이상 또는 굵은 글자 약 18.7px 이상을 의미합니다.
• 의미 있는 UI 요소·그래픽: 주변 색상과 3:1 이상의 비텍스트 대비가 필요한 경우가 있습니다.

결과 표시는 반올림될 수 있지만 통과 여부는 반올림 전의 실제 대비율을 기준으로 판단합니다. 특정 색상 조합이 기준을 통과했다고 해서 웹사이트 전체가 WCAG를 준수한다는 뜻은 아닙니다. 다른 색상, 상태, 포커스 표시, 의미 구조, 상호작용도 따로 확인해야 합니다.

색상 대비를 확인하는 방법

1. 전경색·배경색 HEX 코드를 입력하거나 색상 선택기로 고릅니다.
2. 명도 대비율과 일반 텍스트·큰 텍스트·UI 요소 결과를 확인합니다.
3. 실시간 화면 미리보기에서 색상을 확인하고 필요에 따라 값을 바꿔 비교합니다.