색상 대비 확인 (WCAG)

색상 대비 검사기 사용 방법

1. 1

   색상 두 개 입력

   텍스트 색상과 배경 색상을 HEX, rgb(), hsl(), oklch() 형식으로 입력하세요. 둥근 색상 견본을 눌러 직접 고를 수도 있어요.

2. 2

   결과 확인

   대비 비율과 통과·실패 5개 항목이 표시돼요. 일반 텍스트와 큰 텍스트의 AA, AAA 기준, 그리고 아이콘과 테두리에 적용되는 3:1 기준을 확인할 수 있어요.

3. 3

   수정 제안 적용

   실패한 단계가 있으면 기준을 통과하는 가장 가까운 더 어둡거나 더 밝은 텍스트 또는 배경을 선택하고, 새 값을 복사하세요.

색상 대비 검사기 소개

이 대비 검사기는 WCAG 2.2의 상대 휘도 공식으로 두 색상의 밝기 차이를 계산해요. 브라우저의 접근성 검사나 디자인 플러그인이 쓰는 계산법과 같아요. 결과는 1:1(같은 색)부터 21:1(흰색 위의 검은색) 사이의 비율로 나와요. 성공 기준 1.4.3은 AA 수준에서 본문 텍스트에 4.5:1, 큰 텍스트에 3:1을 요구해요. 1.4.6은 AAA 수준으로 각각 7:1과 4.5:1을 요구하고, 1.4.11은 포커스 링, 입력란 테두리, 차트 선처럼 의미를 전달하는 텍스트 외 요소에 3:1을 요구해요.

실시간 샘플에는 선택한 색상으로 두 가지 크기의 텍스트, 테두리 버튼, 아이콘이 표시돼요. 숫자뿐 아니라 가독성도 눈으로 판단할 수 있어요. 비율은 반올림하지 않고 소수점 둘째 자리까지 버림해요. 4.496:1은 4.5:1 요구 사항을 충족하지 못하기 때문이에요. 어떤 단계가 실패하면 한 색상의 색조와 채도는 그대로 두고 OKLCH 명도를 조절해, 기준을 통과하는 가장 가까운 값을 텍스트와 배경에 각각 제안해요.

이 검사기는 단색 전용이에요. 사진이나 그라디언트 위의 텍스트, 투명도, 특정 화면에서의 글꼴 굵기 표현, WCAG 3에서 제안된 새로운 APCA 방식은 평가할 수 없어요. 통과는 최소 기준으로 보고, 실제 화면에서도 꼭 확인하세요.

색상 대비 검사기: 자주 묻는 질문