텍스트와 UI에 대한 WCAG 2.2 AA·AAA 결과와 대비율 HEX, RGB, HSL, OKLCH, CSS 색 이름과 색상 선택기 지원 투명한 색은 브라우저처럼 합성해 계산 제목, 본문, 작은 글씨, 버튼 실시간 미리보기 밝기만 조정해 기준을 통과하는 가장 가까운 색 제안

색상 명도 대비 검사기 - WCAG AA·AAA 접근성 확인

명도 대비란 무엇이며 왜 중요한가요?

대비율은 두 색의 체감 밝기 차이를 나타내며 1:1(같은 색)부터 21:1(흰 바탕에 검정)까지 있습니다. WCAG 2.2는 AA 수준에서 일반 텍스트 4.5:1, 큰 텍스트와 UI 요소 3:1 이상을, AAA 수준에서는 7:1과 4.5:1을 요구합니다. 남성 약 12명 중 1명은 색각 이상이 있고 햇빛 아래에서 휴대폰을 보는 사람도 많아 대비가 낮은 글자는 실제 사용자를 배제합니다. 유럽 접근성법, ADA 같은 법률이 WCAG AA를 기준으로 삼기 때문에 많은 사이트에서 대비는 법적 요구 사항이기도 합니다.

기능

• 텍스트와 UI에 대한 WCAG 2.2 AA·AAA 결과와 대비율
• HEX, RGB, HSL, OKLCH, CSS 색 이름과 색상 선택기 지원
• 투명한 색은 브라우저처럼 합성해 계산
• 제목, 본문, 작은 글씨, 버튼 실시간 미리보기
• 밝기만 조정해 기준을 통과하는 가장 가까운 색 제안

즉시, 그리고 비공개로

모든 계산은 브라우저에서 실행됩니다. 공개 전 디자인의 색상이 어디로도 전송되지 않습니다.

WCAG 2.2 공식, 100% 클라이언트 측.

명도 대비 검사 사용 방법

1
글자색과 배경색을 입력하세요. CSS 색(#1e293b, rgb(), hsl(), oklch(), 색 이름)을 입력하거나 색상 선택기를 씁니다.
2
대비율을 확인하세요. 결과는 올림하지 않고 버림하므로 4.49:1이 통과로 표시되는 일은 없습니다.
3
WCAG 결과 다섯 가지를 확인하세요. 일반·큰 텍스트의 AA와 AAA, 그리고 입력창 테두리, 아이콘, 포커스 링 같은 UI 요소의 3:1입니다.
4
실패하면 색조는 그대로 두고 밝기만 바꾼 추천 색을 보고 이 색 사용을 누르거나, 색을 바꿔 반대 조합도 시험해 보세요.

활용 예시

회색 플레이스홀더

Tailwind gray-400(#9ca3af)을 흰 배경에 쓰면 2.5:1로 AA에 못 미칩니다. gray-500(#6b7280)은 4.8:1로 본문에도 쓸 수 있습니다.

버튼의 브랜드 색

밝은 브랜드 파랑은 큰 버튼 글자(3:1)는 통과해도 작은 글자는 실패할 수 있습니다. 둘 다 확인하거나 흰 글자가 4.5:1을 넘을 때까지 버튼 배경을 어둡게 하세요.

다크 모드 팔레트

완전한 흰색과 검정(21:1)은 눈이 부실 수 있습니다. #0f172a 위의 #e2e8f0 같은 부드러운 조합도 약 14:1로 AAA를 넘습니다.

폼 테두리와 아이콘

WCAG 1.4.11은 입력창 경계와 의미 있는 아이콘에 3:1을 요구합니다. 흰 배경의 #e5e7eb 테두리는 한참 부족해 입력창을 찾기 어렵게 만듭니다.

자주 묻는 질문

큰 텍스트란?+

WCAG에서 큰 텍스트는 보통 굵기 18pt(24px) 이상 또는 굵게 14pt(약 18.66px) 이상입니다. 획이 굵어 읽기 쉬우므로 AA에서는 3:1이면 됩니다.

AA와 AAA 중 무엇이 필요한가요?+

AA가 대부분의 웹사이트와 앱의 표준 법적 목표입니다. AAA는 더 엄격하며 긴 글, 공공 서비스, 저시력 사용자가 많은 경우에 권장됩니다.

로고와 비활성 버튼도 해당되나요?+

아니요. WCAG는 로고, 장식용 이미지, 비활성(disabled) 컨트롤을 예외로 둡니다. 플레이스홀더, 링크, 포커스 표시는 해당됩니다.

APCA와 WCAG 3는요?+

APCA는 향후 WCAG 3에 제안된 새 대비 모델입니다. 아직 초안이므로 현재 법률과 감사에서는 WCAG 2.2 대비율이 기준입니다.