색상 대비 검사

사용 방법

1. 텍스트와 배경색을 HEX·RGB·HSL로 입력합니다.
2. 배경이 투명하면 세부 설정의 불투명한 바탕색도 지정합니다.
3. 대비율·일반/큰 텍스트 AA·AAA와 실제 텍스트 미리보기를 함께 읽습니다.

검정과 흰색의 최대 대비

입력·설정

텍스트 #000000 · 배경 #FFFFFF

결과

21.000:1 · 일반·큰 텍스트 AA/AAA 통과

같은 색을 두 칸에 넣으면 대비는 1:1입니다.

대비율과 텍스트 크기

sRGB 채널에서 상대 휘도를 구하고 밝은 값과 어두운 값으로 대비율을 계산합니다. 일반 텍스트 AA는 4.5:1, 큰 텍스트 AA는 3:1이며 AAA는 각각 7:1과 4.5:1로 비교합니다.

큰 텍스트의 일반적인 기준은 24 CSS px 이상 또는 굵은 글씨 약 18.67px 이상입니다. 출력 숫자는 읽기 좋게 반올림하지만 통과 판정은 원래 대비율로 하므로 경계에서 표시 숫자만 보고 판단하지 마세요.

알파와 전체 접근성의 범위

투명한 배경을 선택한 바탕색 위에 먼저 합성하고 텍스트를 그 위에 다시 합성합니다. 반투명 검정 텍스트는 완전한 검정보다 밝아져 대비가 낮아질 수 있습니다. 바탕색까지 투명하면 계산 기준이 없어 오류를 표시합니다.

이미지·그라데이션·혼합 모드·그림자·글꼴 굵기와 상호작용 상태는 모델링하지 않습니다. 이 두 색의 대비를 확인한 것만으로 사이트 전체의 WCAG 준수나 모든 이용자의 읽기 편의가 검증된 것은 아닙니다.

자주 묻는 질문