01
색상 입력의 층을 확인
3자리 또는 6자리 HEX를 입력합니다. 투명도는 별도 옵션에서 설정하며, 8자리 HEX의 알파값을 몰래 버리지 않습니다.
Color & Accessibility
색상 대비 검사기실제 글자색으로 확인
두 HEX 색상을 입력한 뒤 불투명도, 글자 크기와 굵기를 실제 디자인에 맞추세요.
색상 대비 검사기
미리보기 문장
대비율
4.48:1
선택한 글자 조건: 실패 · AA · 필요값 4.5:1
일반 텍스트 기준 · 합성된 전경색: #777777
일반 텍스트 AA · 4.5:1실패
일반 텍스트 AAA · 7:1실패
큰 텍스트 AA · 3:1통과
큰 텍스트 AAA · 4.5:1실패
UI/그래픽 AA · 3:1통과
색상 미리보기
이 문장으로 실제 글자 크기와 색을 확인하세요.
기준을 통과하는 추천 색
전경색 조정
#767676 · 4.54:1
배경색 조정
#060606 · 4.52:1
계산은 브라우저에서만 진행되며 색상값을 업로드하지 않습니다.
글자 조건
최신 결과입니다.
회색 보조 문구가 디자인 시안에서는 선명해 보여도 흰색 카드에서는 일반 텍스트 AA 기준에 살짝 못 미칠 수 있습니다. 색상 대비 검사기로 배포 전에 그 차이를 숫자로 확인하세요.
작은 라벨과 큰 제목은 적용되는 기준이 다릅니다. 이 명암 대비 검사기는 반투명 글자색을 배경에 합성한 뒤 대비율을 계산하므로 원래 HEX만 보고 판단하지 않습니다.
색상 대비 검사기가 필요한 이유
실제 표시색을 계산하고 두 방향의 수정안을 비교합니다.
투명도까지 반영한 글자색
전경색 불투명도를 0~100%로 바꾸면 배경 위에 합성된 HEX도 함께 표시됩니다. 색상 대비 검사기는 합성된 색의 밝기를 사용해 투명한 텍스트를 불투명한 색으로 잘못 평가하지 않습니다.
글자색과 배경색을 따로 조정
기준에 못 미치면 글자색 수정안과 배경색 수정안을 각각 보여 주고 새로운 대비율을 표시합니다. 추천 색은 먼저 미리보기로 확인하며, 적용 뒤 한 번 되돌릴 수 있습니다.
판정 전에 맞춰야 할 세 가지
색상 층, 글자 조건과 목표 등급을 실제 화면에 맞추세요.
02
크기와 굵기를 지정
보통 글자는 24px 이상, 굵은 글자는 약 18.67px 이상일 때 큰 텍스트로 봅니다. 자동 검사는 입력을 멈춘 뒤 갱신하고 필요하면 수동 모드로 바꿀 수 있습니다.
03
반올림 전 판정을 읽기
표시되는 대비율은 소수 둘째 자리까지지만 통과 여부는 원래 수치로 결정됩니다. 결과가 오래된 동안에는 복사나 추천 색 적용을 막습니다.
표시색과 글자 조건의 구분
같은 두 색의 대비율과 적용되는 WCAG 한계를 함께 보여 줍니다.
전경색 알파 합성
전경색을 불투명한 배경에 합성한 뒤 상대 휘도로 계산합니다. 최종 HEX를 표시해 투명한 색상의 실제 결과를 검토할 수 있습니다.
글자 크기별 기준
20px 일반 텍스트는 큰 텍스트가 아닙니다. 굵기와 크기가 달라지면 대비율은 그대로지만 적용되는 AA·AAA 기준이 달라집니다.
다섯 가지 통과 결과
WCAG 대비 비율 계산기는 일반 글자와 큰 글자의 AA·AAA, 의미 있는 UI 그래픽의 AA를 각각 봅니다. 선택한 목표는 현재 판정과 추천 색에만 영향을 줍니다.
두 색의 수정안과 되돌리기
글자색 또는 배경색을 조금 조정한 후보와 실제 대비율을 비교합니다. 적용을 누르기 전에는 원래 색상을 바꾸지 않습니다.
두 색상만 검사하는 범위
한 조합의 통과 결과를 웹사이트 전체의 적합 판정으로 읽지 마세요.
- 배경은 불투명한 단색
- 투명한 배경은 그 아래 색상도 알아야 합니다. 사진과 그라데이션은 위치마다 달라 두 HEX만으로 하나의 대비율을 정할 수 없습니다.
- 입력은 3자리 또는 6자리 HEX
- CSS 색상 이름, rgb(), hsl(), OKLCH와 8자리 HEX는 이 입력창에서 변환하지 않습니다. 알파값은 별도 불투명도 옵션을 쓰세요.
- 전체 접근성 인증이 아님
- 색상 대비 검사기는 선택한 글자 조건과 색상 한 쌍만 계산합니다. 키보드 조작, 초점 표시와 다른 상태의 색상은 따로 점검해야 합니다.
- APCA 점수는 표시하지 않음
- AA·AAA는 WCAG 2.x의 대비율입니다. APCA는 별도 계산법이라 같은 통과표에 섞지 않습니다.
색상 대비 검사기 자주 묻는 질문
큰 글자, HEX 입력과 브라우저 내 계산 범위를 설명합니다.
WCAG 대비 비율이 높으면 접근성이 완전히 보장되나요?
아니요. 색상 대비 검사기가 통과라고 보여도 그 색상 한 쌍의 조건만 확인한 것입니다. 키보드 접근, 화면 구조, 초점 표시와 다른 색상도 점검해야 합니다.
큰 텍스트 기준은 무엇인가요?
일반 글자는 24px 이상, 굵은 글자는 약 18.67px 이상일 때 큰 텍스트입니다. 크기는 필요한 기준을 바꾸지만 두 색상의 대비율 자체는 바꾸지 않습니다.
HEX에서 # 없이 입력해도 되나요?
네. #fff와 fff를 모두 입력할 수 있으며 3자리 값은 6자리 HEX로 확장됩니다. 8자리 HEX는 알파를 별도 옵션으로 입력해야 하므로 거부합니다.
입력한 색상값이 서버에 저장되나요?
아니요. 글자색과 배경색을 브라우저에서 계산하며, 입력한 색상값을 계산 서버로 보내거나 저장하지 않습니다.
대비가 부족할 때 글자색을 어떻게 바꾸나요?
추천 전경색 또는 배경색을 먼저 비교하세요. 적용 전에 후보 비율을 보여 주고, 수정한 뒤 한 번 되돌릴 수 있습니다.
잘못 판정된 색상 조합을 발견했나요?