WCAG AA · AAA · UI 컴포넌트

언제 쓰나

웹 접근성 검수 때, 배경색과 글자색이 충분히 대비되는지 확인할 때 씁니다. WCAG 2.1 가 규정한 최소 대비율을 본문·큰 글씨·UI 컴포넌트 기준으로 동시에 판정합니다.

사용법

전경(글자) 과 배경 두 색을 붙여 넣으세요. #3a4bd0, rgb(58 75 208), oklch(...) 모두 받습니다. 대비율은 입력하는 즉시 갱신되고, 하단의 통과/실패 배지로 WCAG 등급을 알 수 있습니다.

기준

• AA 본문 — 4.5:1. 일반 텍스트 필수 기준.
• AA 큰 글씨 — 3:1. 18pt 이상 또는 굵은 14pt 이상.
• AAA 본문 — 7:1. 더 엄격한 기준. 은행·의료 등에서 요구되는 경우.
• AAA 큰 글씨 — 4.5:1.
• UI 컴포넌트 · 그래픽 — 3:1. 버튼 테두리·아이콘 등 비텍스트 요소.

팁

• 본문 글자는 AA 본문 4.5:1 을 최소 기준으로 삼으세요.
• 입력칸 안내문·보조 설명 같은 옅은 글자가 3:1 도 못 넘으면, 사용자가 그 글자가 거기 있다는 것 자체를 놓칠 수 있습니다.
• 대비가 부족할 때는 색 자체를 바꾸기보다 밝기만 낮추거나 높여 보세요. 브랜드 느낌을 유지하면서 대비를 빠르게 회복할 수 있습니다.