AA 충족하기: 일반 텍스트와 큰 텍스트 기준

대부분의 팀은 대비에 WCAG AA 등급을 적용합니다. 실제 사용자에게 충분히 도움이 되면서도 실제 제품에 적용할 수 있을 만큼 현실적인 기준입니다.

본문 문구에는 AA 기준에 따라 최소 4.5:1이 필요합니다. 문단, 레이블, 페이지에 있는 대부분의 문구가 여기에 해당합니다.

큰 글자란 일반 굵기의 24px 또는 굵은 글씨의 18.66px를 의미합니다. 이 크기에서는 글자를 읽기 쉬우므로 기준이 완화됩니다.

큰 글자에는 3:1만 필요합니다. 더 큰 형태가 시각적으로 더 강하기 때문에 밝기 차이가 작아도 명확하게 읽힙니다.

굵기는 중요합니다. 굵은 글자는 획이 더 두꺼워 눈에 더 잘 들어오므로 18.66px부터 큰 글자로 인정됩니다.

WCAG는 큰 글자를 18pt 또는 굵은 글씨 14pt로 정의하며, 이는 CSS에서 24px 및 18.66px에 해당합니다. 도구가 보통 변환을 대신 처리합니다.

기준 1.4.11에 따라 버튼, 입력 필드, 포커스 표시기는 주변 요소와의 대비가 3:1 이상이어야 컨트롤이 계속 보입니다.

더 강력한 보장을 원하시나요? AAA는 일반 문구를 7:1, 큰 문구를 4.5:1로 높입니다. 하지만 대부분의 제품은 AA를 기본 기준으로 삼습니다.

몇 가지는 이 규칙의 적용을 받지 않습니다. 비활성 컨트롤, 순수 장식, 브랜드 로고에는 최소 대비 요구 사항이 없습니다.

연한 회색 플레이스홀더도 실제 문구이므로 4.5:1을 충족해야 합니다. 대부분의 기본값은 기준을 충족하지 못하므로 의도적으로 어둡게 설정하세요.

이 제목은 큰 문구 크기이므로 AA를 통과하려면 3:1의 비율이면 충분합니다.

서로 다른 문구에 적용되는 AA 수치를 정확히 확인해 보세요.

다음 조합을 기억하세요. 일반 문구는 4.5:1, 큰 문구나 사용자 인터페이스 구성 요소는 3:1입니다. 이 기준을 충족하면 대비가 AA를 통과합니다. 다음은 색상에만 의존하지 않는 방법입니다. 🎯