색 대비 검사기

글자색과 배경색을 넣으면 명도 대비비와 WCAG 2.1 AA·AAA 통과 여부를 바로 알려줘요.

대비비-

기준필요결과
AA 본문 글자4.5 : 1
AA 큰 글자3 : 1
AAA 본문 글자7 : 1
AAA 큰 글자4.5 : 1
아이콘·입력칸 테두리 (1.4.11)3 : 1

본문 글자 미리보기: 귀찮은 일, 1분 만에 해치움. 0123456789

큰 글자 미리보기 24px

계산 방법

W3C WCAG 2.1의 공식을 써요. 각 색의 상대 휘도 L = 0.2126R + 0.7152G + 0.0722B (sRGB 값을 0~1로 바꾼 뒤 0.04045 이하면 ÷12.92 — WCAG 2.1 본문의 0.03928은 2.2에서 sRGB 표준값 0.04045로 고쳐졌고, 8비트 색에서는 결과가 같아요, 넘으면 ((값+0.055)÷1.055)2.4)를 구하고, 대비비 = (밝은 L + 0.05) ÷ (어두운 L + 0.05)로 계산해요. 범위는 1:1(같은 색)부터 21:1(검정·흰색)까지예요.

"큰 글자"는 18pt(약 24px) 이상, 또는 굵은 14pt(약 18.66px) 이상을 말해요. 대비비는 반올림하지 않고 비교해요. 예를 들어 4.499:1은 4.5 기준에 못 미쳐요.

출처: W3C WCAG 2.1 대비비·상대 휘도 정의, 1.4.3 최소 대비 해설 (2026-10-06 확인)

자주 묻는 질문

AA와 AAA는 뭐가 다른가요?

AA는 대부분의 웹사이트가 목표로 하는 기본 수준으로 본문 4.5:1, 큰 글자 3:1이 필요해요. AAA는 더 엄격한 수준으로 본문 7:1, 큰 글자 4.5:1이 필요해요.

투명도가 있는 색도 검사되나요?

아니요. #RRGGBB나 #RGB처럼 불투명한 색만 받아요. 반투명 색은 실제로 겹쳐 보이는 최종 색을 스포이트로 찍어서 넣어 주세요.

로고나 장식 글자도 기준을 지켜야 하나요?

WCAG 1.4.3은 로고·상표 속 글자와 순수 장식, 비활성 버튼 글자는 예외로 둬요. 그래도 읽혀야 하는 글자라면 맞추는 게 좋아요.

입력한 색이 서버로 가나요?

아니요. 계산은 모두 이 브라우저 안에서만 해요.

통과하면 접근성 인증을 받은 건가요?

아니요. 이 결과는 색 대비 하나만 본 참고용이에요. 웹 접근성 인증이나 법적 판단을 대신하지 않아요.