WCAG란 무엇인가요?

WCAG(Web Content Accessibility Guidelines)는 W3C가 제정한 웹 콘텐츠 접근성 지침으로, 시각 장애인을 포함한 모든 사용자가 웹을 이용할 수 있도록 색상 대비, 텍스트 크기, 키보드 접근 등의 기준을 제시합니다.

AA와 AAA 기준의 차이는?

AA는 최소 준수 기준(일반 텍스트 4.5:1, 큰 텍스트 3:1)이며, AAA는 강화 기준(일반 텍스트 7:1, 큰 텍스트 4.5:1)입니다. 대부분의 웹사이트는 AA 준수를 목표로 합니다.

WCAG에서 큰 텍스트는 14pt(약 18.67px) 이상의 볼드 텍스트 또는 18pt(24px) 이상의 일반 텍스트를 의미합니다.

4.5:1 비율은 중간 정도의 시력 저하(약 20/40 시력)를 가진 사람이 일반 텍스트를 읽을 수 있는 최소 대비 수준을 기반으로 설정되었습니다.

전경색을 더 어둡게 하거나 배경색을 더 밝게 조정하세요. 텍스트에 그림자를 추가하거나 텍스트 크기를 키우는 것도 대비 기준을 충족하는 데 도움이 됩니다.

아니요. WCAG는 순수 장식 목적의 이미지나 텍스트, 비활성 UI 컴포넌트(disabled), 로고 내 텍스트는 대비 기준 적용 대상에서 제외합니다.

색맹이 있는 사용자는 특정 색 조합을 구별하기 어렵습니다. 높은 명도 대비(휘도 대비)를 유지하면 색맹 사용자에게도 콘텐츠를 잘 전달할 수 있습니다.

axe, Lighthouse, WAVE, Colour Contrast Analyser 등의 도구를 사용해 페이지 전체의 색상 대비를 자동으로 검사할 수 있습니다. 브라우저 개발자 도구에도 접근성 패널이 있습니다.

WCAG 접근성 색상 대비율 검사·AA/AAA 기준

전경색 (텍스트)

rgb(0, 0, 0)

배경색

rgb(255, 255, 255)

Sample Text 가나다 (16px)

Sample Text 가나다 (24px Bold)

Contrast Ratio

21.00 : 1

AAA

WCAG 결과

레벨	일반 텍스트 (≤18px)	큰 텍스트 (≥18px or ≥14px Bold)
AA	✓ Pass≥ 4.5 : 1	✓ Pass≥ 3 : 1
AAA	✓ Pass≥ 7 : 1	✓ Pass≥ 4.5 : 1