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. 버튼 테두리·아이콘 등 비텍스트 요소.

APCA Lc 모드

상단 토글로 WCAG 2.1 ↔ APCA Lc 전환. APCA (Accessible Perceptual Contrast Algorithm) 는 WCAG 3 contrast 후보로 W3C 가 채택한 새 알고리즘 — OKLCH 시대에 사람 눈의 perception 과 더 잘 맞도록 설계.

• |Lc| ≥ 75 — 본문 텍스트 (작은 글씨 ≥14px regular).
• |Lc| ≥ 60 — 본문 (≥18px regular 또는 ≥14px bold).
• |Lc| ≥ 45 — 큰 텍스트만 (≥24px regular 또는 ≥18.66px bold).
• |Lc| ≥ 30 — 비텍스트 / UI 컴포넌트 / placeholder.

WCAG 2.1 의 4.5:1 기준은 APCA 의 |Lc| 75 와 대략 매핑. 단, 두 기준이 완벽하게 일치하지는 않으니 (특히 어두운 배경 + 밝은 글씨), 보고서엔 사용한 기준 표기. KWCAG 검수자가 "최신 기준도 봤다" 신호로 인용 가능.

팁

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