WCAG 명도 대비 검사기이란?

전경색과 배경색 사이의 명도 대비율을 계산하고, 일반 텍스트와 큰 텍스트에 대해 WCAG 2.1 Level AA 및 AAA 접근성 기준을 충족하는지 검사하는 WCAG 색상 대비 검사기입니다.

이 검사기는 두 색의 WCAG 2.1 상대 휘도 비율을 계산합니다 — hex, rgb(), hsl() 또는 CSS 색 이름으로 입력할 수 있습니다. AA(본문 4.5:1, 큰 글자 3:1)와 AAA(7:1, 4.5:1) 기준으로 평가하고, 폼 테두리·아이콘 같은 UI 요소의 3:1 하한도 함께 확인합니다. 통과하지 못한 조합에는 추천 패널이 전경을 조금씩 밝거나 어둡게 옮겨 합격 색을 안내하며, AA와 AAA 두 목표를 모두 제시합니다.

사용 방법

1. 전경(텍스트) 색상과 배경 색상을 입력하거나 선택하세요 — hex, rgb(), hsl() 또는 CSS 색 이름을 붙여넣거나 색상 선택기를 사용하면 됩니다.
2. 일반 텍스트, 큰 텍스트, UI 컴포넌트에 대한 WCAG AA 및 AAA 적합 여부와 명도 대비율을 확인하세요.
3. 대비가 기준을 충족하지 못할 경우, 제안된 색상 조정 옵션을 활용해 가장 가까운 접근 가능한 색상 조합을 찾으세요.

사용 시기

• 랜딩 페이지를 공개하기 전에 흰 배경과 어두운 배경에서 브랜드 색을 점검할 때.
• 버튼의 기본·호버·비활성 세 상태에서 접근성을 통과하는 색을 고를 때.
• 플레이스홀더와 비활성 입력란이 4.5:1 아래로 떨어지지 않았는지 확인할 때.

결과

UI 디자이너가 브랜드 블루 #3B82F6을 흰색 #FFFFFF 배경에 적용했을 때 4.5:1 비율이 큰 텍스트 AA는 통과하지만 일반 텍스트 AAA는 통과하지 못했습니다. #2563EB(5.3:1)로 어둡게 조정해 두 기준을 모두 충족시켰습니다.

자주 묻는 질문

본문이 WCAG AA를 통과하려면 비율이 얼마여야 하나요?

배경 대비 4.5:1이 필요합니다. 큰 글자(18pt 일반 또는 14pt 굵게 이상)는 3:1로 내려갑니다. AAA에서는 각각 7:1, 4.5:1로 올라갑니다. 입력란 테두리 같은 UI 구성요소는 3:1이면 충분합니다.

제 눈에는 잘 보이는데 진회색 × 흰색이 왜 불합격으로 나오나요?

개인 감각과 측정값은 금세 어긋납니다. 4:1은 잘 보정된 화면과 충분한 조명에서는 또렷하지만 저시력 사용자, 반사광, 오래된 모니터에서는 무너집니다. WCAG는 최선이 아니라 최악의 조건을 기준으로 잡습니다.

아이콘이나 폼 테두리도 본문과 같은 대비가 필요한가요?

아닙니다. WCAG 2.1은 비텍스트 요소를 위한 3:1 규칙을 새로 추가해 테두리, 아이콘, 포커스 표시, 차트 요소 등을 포괄합니다. 순수 장식 그래픽은 제외되지만 정보를 전달하는 요소라면 인접 색에 대해 3:1을 채워야 합니다.

브랜드 색은 그대로 두고 불합격 조합을 어떻게 고치나요?

브랜드 색이 고정이라면 배경을 조정하세요. 비율을 통과할 때까지 배경을 더 어둡거나 밝게 만드는 식입니다. 여기 추천 패널은 전경을 작은 단위로 옮기는데, 같은 방식으로 배경에도 적용하면 됩니다.

반투명 글자나 사진 위에 올린 글자에 대한 WCAG 규칙이 있나요?

WCAG는 글자 아래에서 가장 안 좋은 픽셀을 기준으로 평가하라고 합니다. 사진 위 글자라면 보통 톤 다운된 막이나 단색 판을 깔게 됩니다. 처음 입력한 hex가 아니라 실제 렌더된 색을 측정하세요.

관련 도구