대비 검사기 (WCAG AA / AAA 등급)
전경과 배경 색상 선택해 WCAG 대비 비율 계산. 라이브 텍스트 미리보기와 네 등급 배지(AA 일반, AA 큰, AAA 일반, AAA 큰)가 실시간 업데이트.
작동 방식
대비 비율 작동 방식
WCAG(웹 콘텐츠 접근성 가이드라인)는 대비를 두 색상의 상대 휘도 간 비율로 정의. 공식은 각 sRGB 채널을 선형화하고 사람 눈 감도(R 0.2126, G 0.7152, B 0.0722)로 가중하고, (밝은 + 0.05) / (어두운 + 0.05) 계산. 결과는 1:1(동일)부터 21:1(검정 위 흰색)까지.
공식 WCAG 2.x 공식 사용해 브라우저에서 계산. 네 등급 배지는 AA의 4.5:1(일반)과 3:1(큰), AAA의 7:1(일반)과 4.5:1(큰) 임계값 대조. '큰 텍스트'는 24px / 18pt, 또는 18.66px / 14pt 굵게.
왜 최소 AA 통과
AA는 많은 관할권에서 법적으로 강제 가능한 수준(미국 ADA, EU EN 301 549, 디지털 서비스용 영국 평등법). 본문 텍스트에서 AA 실패는 가장 흔한 접근성 문제이고 출시 후가 아니라 디자인 중 가장 쉽게 수정 가능.
AAA는 긴 형식 읽기, 정부 서비스, 고이해 관계 인터페이스에 권장. 엄격함 — 디자이너의 흰 위 옅은 회색 첫 직감은 보통 AAA 쉽게 실패. 사이트가 주로 빠르게 보는 콘텐츠 제공이면 AA 목표; 책, 기사, 중요 정보 게시면 AAA 목표.
흔한 실수
'내 화면에서는 괜찮음.' 보정된 화면, 형광등 사무실 조명, 야외 스마트폰 사용 모두 인식된 대비 변경. 눈 아닌 비율 사용.
헥스 코드 반전으로 다크 모드 디자인. 반전이 색조 변경하고 대비 깨짐. 테마 전환 후 모든 색상 쌍 재테스트.
브랜드 가이드라인 신뢰. 많은 브랜드 팔레트가 WCAG 인식 전 선택. 흰 위 브랜드 핑크 실패하면 본문 카피에 약간 더 어두운 핑크 제안하고 원본은 장식용으로 예약.
자주 묻는 질문
›AA와 AAA 차이?
AA는 일반 텍스트에 4.5:1, 큰 텍스트에 3:1 요구. AAA는 7:1과 4.5:1로 강화. AAA 권장이지만 항상 달성 가능 아님.
›'큰 텍스트'란?
WCAG는 18pt(24px) 이상, 또는 14pt(18.66px) 굵게로 정의.
›본 도구가 투명도 지원?
아직. 사용자가 보는 실제 색상 선택(배경 위 합성된 전경). 투명도 지원 나중에 가능.
›왜 본 브랜드가 통과 안 함?
많은 브랜드 팔레트가 미학으로 선택, 접근성 아님. 흔한 수정: 텍스트로 사용된 액센트 색상 어둡게, 옅은 변형은 배경이나 장식 요소로 예약.
›비율이 '인식된 대비'와 같음?
아니오 — WCAG 2.x는 단순화된 휘도 기반 공식 사용. 개발 중인 WCAG 3은 인식된 대비 더 잘 예측하지만 아직 표준화 안 됨인 APCA 사용.
›아이콘이나 UI 컨트롤 비율?
WCAG 2.1은 비텍스트 대비(아이콘, 폼 컨트롤, 포커스 표시기)에 3:1 최소 추가. 같은 검사기 사용 — 3:1 충족 또는 초과.
›그래픽 차트에 작동?
의미 전달하는 인접 색상 간 같은 임계값 적용. 데이터 시각화에 인접 색상 간 3:1이 WCAG 1.4.11 최소.
›데이터가 전송되나요?
전송되지 않습니다. 계산은 브라우저에서 로컬 실행.
관련 도구
최종 업데이트: