WCAG 색 대비 검사
두 HEX 색의 대비율과 AA/AAA 통과 여부를 계산합니다.
WCAG 색 대비
값을 입력한 뒤 계산하기를 눌러주세요.
사용 방법
- 전경 (텍스트) HEX와 배경 HEX를 입력합니다. 기본은 #111111과 #ffffff입니다.
- 계산을 누르면 샘플 문장 미리보기, 대비율, 일반 텍스트·큰 텍스트 등급이 나옵니다.
- 색을 뒤바꾸려면 색 바꾸기를 누른 뒤 다시 계산합니다.
- 등급이 미달이면 HEX를 조금 더 어둡거나 밝게 바꿔 다시 계산합니다.
- 초기화는 기본 흑백 조합으로 되돌립니다. 불투명 HEX만 지원합니다.
핵심 개념
WCAG 색 대비 검사는 웹 접근성에서 본문·버튼 글자가 배경과 얼마나 구분되는지 보는 지표입니다. 상대 휘도(relative luminance)로 대비율을 구한 뒤 WCAG 2.x 기준과 비교합니다. 일반 텍스트는 AA 4.5:1, AAA 7:1, 큰 텍스트(약 18pt 이상 또는 14pt 볼드)는 AA 3:1, AAA 4.5:1입니다. 웹 접근성 본문·버튼 글자가 배경과 구분되는지 WCAG 2 대비율과 AA·AAA를 보는 색 대비 검사기입니다. 접근성 검수에서 본문 색과 배경 HEX의 대비율·AA·AAA를 빠르게 보는 검사기입니다. 최종 법적 판정은 아닙니다.
결과는 참고용 계산이며 최종 접근성 심사·법적 적합을 대신하지 않습니다. 알파가 있는 반투명 색, 그라데이션, 이미지 위 텍스트는 이 공식만으로 부족할 수 있습니다. 계산은 브라우저에서만 이뤄집니다. 상대 휘도 공식은 불투명 sRGB HEX만 가정합니다. 반투명 오버레이·사진 위 글자는 실제와 다를 수 있습니다. 큰 텍스트와 일반 텍스트 기준이 다르니 제목 색과 본문 색을 따로 계산하는 것이 좋습니다.
계산 예시
전경 #111111, 배경 #ffffff를 계산하면 대비율이 약 19:1 수준으로 일반·큰 텍스트 모두 AAA 통과에 가깝습니다. 연한 회색 #9ca3af를 흰 배경에 올리면 일반 텍스트가 AA 미달이 되기 쉽습니다. 색 바꾸기를 누르면 배경이 어두워져 미리보기 인상이 바뀝니다.#2563eb 글자를 #ffffff 위에 올리면 대비율이 중반대에 그쳐 일반 텍스트 AA를 겨우 넘거나 미달할 수 있습니다. 더 어두운 블루로 바꿔 보세요.#6b7280 글자/#f9fafb 배경은 대비율이 낮아 일반 텍스트가 미달되기 쉽습니다. 글자를 #111로 바꾸면 AAA에 가까워집니다.
자주 묻는 질문
WCAG 큰 텍스트 기준은 어떻게 적용하나요?
18pt 이상 또는 14pt 볼드에 해당하는 완화 기준(3:1 / 4.5:1)을 큰 텍스트 칸에 표시합니다. 큰 텍스트 칸은 제목·18pt 이상에 해당하는 완화 기준입니다. 18pt·14pt 볼드 가정은 큰 텍스트 칸에만 적용됩니다.
WCAG AAA 대비율은 얼마인가요?
일반 텍스트 7:1, 큰 텍스트 4.5:1 이상입니다. AA는 각각 4.5:1과 3:1입니다. AAA는 본문 7:1이라 브랜드 연한 색은 자주 미달입니다. 브랜드 파스텔은 AAA를 자주 못 넘습니다.
투명 알파 채널 HEX도 대비 계산이 되나요?
불투명 HEX만 지원합니다. 투명도는 지원하지 않으니 합성된 최종 HEX를 넣으세요. 반투명은 합성 후 HEX를 넣으세요.
색 대비 미리보기는 어떤 문장인가요?
같은 전경·배경으로 샘플 텍스트 Sample 가나다를 보여 줍니다. 미리보기는 샘플 문장일 뿐 실제 컴포넌트 크기와 다를 수 있습니다. 미리보기는 샘플 문장입니다.
이 검사가 법적 접근성 적합을 보장하나요?
참고용 계산입니다. 최종 심사는 별도로 하세요. 법적 적합 판정은 이 숫자만으로 단정하지 마세요. 심사 체크리스트를 이 숫자만으로 대체하지 마세요.
전경과 배경을 한 번에 바꿀 수 있나요?
색 바꾸기 버튼이 두 HEX를 맞바꿉니다. 계산을 다시 누르세요. 색 바꾸기로 다크 모드 조합도 바로 비교할 수 있습니다. 다크 모드 조합은 색 바꾸기로 비교하세요. 관련: 색 팔레트 · 색 변환
최종 검토일: 2026년 9월 4일