팔레트 색상 간 모든 조합의 WCAG 대비를 매트릭스로 한 번에 평가. 디자인 시스템 접근성 검증에 필수.
♿ 대비 매트릭스 행=배경, 열=글자색
WCAG 팔레트 등급 사용법
- 평가할 팔레트의 HEX 코드를 한 줄에 하나씩 입력합니다.
- 기준(AA / AAA / Large) 중 선택합니다.
- 모든 색상 조합의 대비 비율이 매트릭스로 표시됩니다.
- ✓ = 기준 통과, ✕ = 불통과, ⚠ = 큰 글자만 통과.
- 요약에서 "사용 가능한 안전한 조합"을 확인합니다.
주요 기능
- 최대 12색까지 한 번에 평가
- WCAG 2.1 AA / AAA / Large Text 3가지 기준
- 텍스트 / UI 컴포넌트 모드 (3:1 vs 4.5:1)
- 전체 조합 매트릭스 + 통과율 요약
- 색맹 시뮬레이션과 시너지 (별도 도구)
활용 예시
- 디자인 시스템 검증 — 브랜드 팔레트 전체의 접근성 한눈에
- 다크모드 페어링 — 어떤 다크 색에 어떤 글자색이 안전한지
- 법적 준수 — 공공기관·금융·교육 사이트는 WCAG AA 필수
- 마케팅 자산 — 광고 배너의 텍스트 가독성
- 접근성 보고서 — 디자인 리뷰 자료
WCAG 대비 기준 알아보기
WCAG 2.1(Web Content Accessibility Guidelines)은 W3C가 정한 웹 접근성 표준입니다. 색 대비는 AA: 4.5:1 (일반)·3:1 (18pt+ 큰 글자), AAA: 7:1 (일반)·4.5:1 (큰 글자)가 기준입니다. UI 컴포넌트(버튼 테두리·아이콘)는 3:1로 약간 낮습니다. 한국은 KWCAG 2.2, 미국은 ADA, EU는 EAA가 비슷한 기준을 적용합니다. 접근성을 무시하면 약 전체 사용자의 15%(시각장애·색약·노안)가 콘텐츠를 못 보는 셈입니다.
자주 묻는 질문
contrast 도구와 어떻게 달라요?
contrast는 두 색의 일대일 대비를 검사합니다. 이 도구는 팔레트 전체의 매트릭스를 한 번에 평가합니다.
AAA 통과가 너무 어려워요.
AAA는 권장 사항이고 법적 요구는 보통 AA입니다. 디자인을 망치지 않는 선에서 AA를 우선 확보하세요.
큰 글자 기준이 뭐예요?
일반 텍스트는 4.5:1, 18pt 이상 (또는 14pt 굵게)는 3:1로 완화됩니다.
무료?
네, 완전 무료입니다.