모든 사용자가 나와 동일한 색상이나 텍스트의 가독성을 인식한다고 가정할 수 있습니다. 우리가 색상을 인식하는 방식은 환경 (낮거나 밝은 빛)과 시각 기능에 따라 달라질 수 있습니다. 개발자나 사용자는 색맹 또는 저시력자 수백만 명 중 하나일 수 있습니다.
WAI 그룹은 다양한 시각 장애가 있는 사람들을 지원하기 위해 텍스트와 배경이 충분히 대비되도록 색상 대비 수식을 만들었습니다. 이러한 색상 명암비를 따르면 다소 시력이 낮은 사람도 대비를 향상시키지 못하는 보조 기술 없이 배경에서 텍스트를 읽을 수 있습니다.
그림 1에 표시된 명암비의 차이를 확인하세요.
웹 콘텐츠 접근성 가이드라인 (WCAG) 2.0에서 설정한 최소 4.5:1의 대비율이 필요합니다. 이 비율은 시력의 약 20/40에 해당하는 시력 손실이 있는 사용자가 종종 경험하는 대비 민감도의 손실을 보상하기 위해 선택되었습니다.
다시 말씀드리지만, 4.5:1은 최솟값에 불과합니다. 저시력 또는 기타 색맹인 사용자를 지원하려면 AAA 수준을 충족하고 7:1 대비로 콘텐츠를 만드세요.
DevTools의 Lighthouse 접근성 감사에서 색상 대비를 확인할 수 있습니다.
고급 인지 대비 알고리즘
APCA (Advanced Perceptual Contrast Algorithm)는 색상 인식에 관한 최신 연구를 기반으로 대비를 계산하는 방법입니다.
APCA는 WCAG의 AA 및 AAA 수준보다 컨텍스트의 영향을 더 많이 받습니다.
이 모델에서 대비는 다음 특성을 기반으로 계산됩니다.
- 공간 속성 (글꼴 두께 및 텍스트 크기)
- 텍스트 색상 (텍스트와 배경 간 인지되는 밝기 차이)
- 맥락 (주변광, 주변 환경, 텍스트의 의도된 목적)
Chrome에는 AA/AAA 명암비 가이드라인을 APCA로 대체하는 실험 기능이 포함되어 있습니다.
색상 외에도 중요한 정보를 전달합니다.
사용자에게 중요한 정보를 전달할 때마다 중요한 정보를 공유할 때는 시각적 신호뿐만 아니라 텍스트 또는 대체 텍스트를 사용하세요. 시각적 신호에는 색상, 패턴, 이미지, 글꼴 스타일, 방향성 언어가 포함됩니다.
예를 들어 잘못된 입력을 나타내는 연락처 양식에 빨간색 밑줄이 표시될 수 있습니다. 이 색상 표시는 스크린 리더나 색각 장애가 있는 사용자에게 무언가 제대로 작동하지 않는다고 알리지 않습니다. 사용자는 양식 제출이 작동하지 않는 이유를 궁금해하고 포기할 수 있습니다.
특정 오류에 대해 여러 가지 방법으로 사용자에게 알려야 합니다. 예를 들어 특정 입력이 잘못되었으며 그 이유를 알리는 오류 메시지를 추가할 수 있습니다. 올바른 입력 방법에 대한 도움말 텍스트를 추가할 수도 있습니다.
비시각적 신호가 추가로 있는 한 계속해서 잘못된 입력에 빨간색으로 밑줄을 표시할 수 있습니다.
인터페이스의 색상 사용에 크게 의존하는 경우 Chrome DevTools의 대비 문제를 확인할 수 있습니다.
대비 높이기 및 색상 반전
시력이 낮은 사용자는 고대비 모드를 사용하여 페이지의 콘텐츠를 더 쉽게 탐색할 수 있습니다. 고대비를 설정하는 방법에는 몇 가지가 있습니다.
macOS와 Windows 모두 운영체제에서 대비 수준을 높일 수 있는 방법을 제공합니다.
사용자는 포그라운드 색상과 배경 색상을 반전시킬 수도 있습니다 (예: macOS). 이는 어두운 모드를 지원하지 않는 웹사이트와 앱에 특히 유용합니다.
개발자는 이러한 설정을 사용 설정하고 사용성을 수동으로 확인하여 인터페이스가 계속 표시되고 사용 가능한지 테스트할 수 있습니다.
예를 들어 탐색 메뉴에서 희미한 배경 색상을 사용하여 선택된 페이지를 나타낼 수 있습니다. 고대비 모드로 보면 미세한 부분이 완전히 사라지고 그러면서 독자는 어떤 페이지가 활성 상태인지 알 수 있습니다.
수준 AA 이상을 충족하는 경우 색상이 반전되거나 고대비일 때 콘텐츠가 예상대로 계속 작동합니다. 하지만 환경이 예상대로인지 확인하기 위해 여전히 테스트할 가치가 있습니다.