WCAG 대비 확인은 몇 가지 간단한 단계로 진행됩니다. 어떤 정보도 브라우저 밖으로 나가지 않습니다.
- 전경색과 배경색을 입력합니다. 도구가 hex, rgb(), hsl() 또는 명명된 CSS 색상을 빨강, 초록, 파랑 채널 값으로 파싱합니다.
- 각 RGB 채널은 sRGB 전달 함수를 사용하여 선형화되며, 감마 인코딩된 디스플레이 값이 선형 광도로 변환됩니다.
- 선형 값은 인간 눈의 각 채널에 대한 민감도에 따라 가중치가 적용됩니다——빨강 0.2126, 초록 0.7152, 파랑 0.0722. 이 합계가 해당 색상의 상대 휘도입니다.
- 대비 비율은 (L1 + 0.05) ÷ (L2 + 0.05)로 계산됩니다. 여기서 L1은 더 밝은 색상의 휘도, L2는 더 어두운 색상의 휘도입니다. 0.05를 추가하면 순수한 검은색에서도 공식이 유효하게 유지됩니다.
- 계산된 비율을 WCAG 임계값과 비교합니다: AA 일반 텍스트는 최소 4.5:1, AA 큰 텍스트는 3:1, AAA 일반 텍스트는 7:1, AAA 큰 텍스트는 4.5:1이 필요합니다. 큰 텍스트는 최소 18pt 또는 14pt 굵은 글씨를 의미합니다.
FAQ
WCAG 대비 확인에 대한 일반적인 질문.
AA와 AAA의 차이점은 무엇인가요?
AA는 대부분의 웹 콘텐츠에 대한 최소 적합 수준입니다. 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트의 경우 3:1의 대비 비율이 필요합니다. AAA는 더 높은 기준으로, 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다. 뉴스 사이트의 본문처럼 중요한 콘텐츠에는 AAA를 목표로 하고, 전체 디자인에는 AA를 사용할 수 있습니다. 브랜드 색상으로 모든 곳에서 AAA를 충족하는 것은 어려울 수 있으므로, 많은 팀이 전반적으로 AA를 목표로 하고 가능한 곳에서 주요 텍스트를 AAA로 높입니다.
WCAG에서 '큰 텍스트'란 무엇인가요?
WCAG 2.x는 큰 텍스트를 일반 글꼴 두께로 최소 18포인트(24px), 또는 굵은 글꼴로 최소 14포인트(약 19px)로 정의합니다. 글꼴의 일부인 기호와 아이콘도 동일한 임계값을 따릅니다. UI에 어떤 임계값이 적용되는지 확실하지 않은 경우, 둘 다 확인하세요——AA 큰 텍스트는 기준이 더 낮으므로(3:1), AA 일반 텍스트에 실패한 대부분의 색상 쌍은 텍스트가 충분히 클 때 AA 큰 텍스트를 통과합니다.
색상 쌍이 AA 큰 텍스트는 통과하는데 AA 일반 텍스트는 실패하는 이유는 무엇인가요?
AA 큰 텍스트는 3:1 비율만 필요한 반면 AA 일반 텍스트는 4.5:1이 필요하기 때문입니다. WCAG는 큰 텍스트에 대해 더 낮은 임계값을 설정하는데, 더 큰 문자는 대비가 낮아도 읽기 쉽기 때문입니다. 예를 들어 4.0:1 비율의 색상 쌍은 AA 큰 텍스트(3:1 임계값)는 통과하지만 AA 일반 텍스트(4.5:1 임계값)는 실패합니다. 이는 흰색 배경에 밝은 브랜드 색상을 전경으로 사용할 때 매우 흔합니다.
이 도구만으로 접근성 감사를 수행할 수 있나요?
이 도구는 한 가지——두 단색 사이의 WCAG 2.x 대비 비율——만 확인합니다. 실제 접근성은 그 이상을 포함합니다: 포커스 표시기, 글꼴 크기와 두께, 정보를 전달하는 유일한 수단으로서의 색상, 그리고 스크린 리더 및 확대 도구와의 호환성 등입니다. 애플리케이션의 접근성을 전체적으로 파악하려면 이 대비 검사를 다른 감사 방법과 함께 사용하세요.
입력이 허용하는 색상 형식은 무엇인가요?
3, 4, 6 또는 8자리 hex 코드(# 포함 또는 미포함), 레거시 쉼표 구문 또는 현대적인 공백 구분 구문의 rgb() 및 rgba() 값, 모든 표준 색상 단위(deg, rad, grad, turn)를 사용한 hsl() 및 hsla(), hsv(), hwb(), 그리고 CSS Color Module Level 4 사양의 150개 명명된 CSS 색상을 붙여넣을 수 있습니다. 색상은 전적으로 사용자 기기에서 파싱됩니다.