시력이 좋다면 모든 사람이 나와 같은 방식으로 색상이나 텍스트의 가독성을 인식할 것이라고 쉽게 가정할 수 있지만, 물론 그렇지 않습니다.
예상할 수 있듯이, 어떤 사람들은 읽기 쉬운 색상 조합도 다른 사람들은 어렵거나 불가능할 수 있습니다. 이는 일반적으로 색상 대비, 즉 전경 색상과 배경 색상의 휘도 간의 관계로 인한 것입니다. 색상이 비슷하면 대비율이 낮고 색상이 다를 때는 대비율이 높습니다.
WebAIM 가이드라인에서는 모든 텍스트에 AA (최소) 대비율을 4.5:1로 권장합니다. 단, 매우 큰 텍스트 (기본 본문 텍스트보다 120~150% 더 큰 텍스트)의 경우는 예외입니다. 이 경우 비율이 3:1로 낮아질 수 있습니다. 아래에 표시된 대비율의 차이를 확인하세요.
수준 AA에서 4.5:1의 명암비를 선택했습니다. 이 비율은 시력이 약 20/40에 해당하는 시력 손실을 가진 사용자가 경험하는 대비 민감도의 손실을 보완하기 때문입니다. 20/40은 약 80세 연령의 사람들의 일반적인 시력으로 일반적으로 보고되고 있습니다. 시력이 나쁘거나 색각 이상이 있는 사용자의 경우 본문 텍스트의 대비를 최대 7:1까지 높일 수 있습니다.
Lighthouse의 접근성 감사를 사용하여 색상 대비를 확인할 수 있습니다. DevTools를 열고 감사를 클릭한 후 접근성을 선택하여 보고서를 실행하세요.
Chrome에는 페이지의 모든 저대비 텍스트를 감지하는 데 도움이 되는 실험적 기능도 포함되어 있습니다. 액세스 가능한 색상 추천을 사용하여 저대비 텍스트를 수정할 수도 있습니다.
더 완전한 보고서를 보려면 접근성 통계 확장 프로그램을 설치하세요. 패스트패스 보고서의 확인 사항 중 하나는 색상 대비입니다. 실패한 요소에 관한 자세한 보고서가 제공됩니다.
APCA (Advanced Perceptual Contrast Algorithm)
APCA (Advanced Perceptual Contrast Algorithm)는 색상 인식에 관한 최신 연구를 기반으로 대비를 계산하는 새로운 방법입니다.
AA/AAA 가이드라인과 비교했을 때 APCA는 맥락의 영향을 더 많이 받습니다.
대비는 다음 특징을 기반으로 계산됩니다.
- 공간 속성 (글꼴 두께 및 텍스트 크기)
- 텍스트 색상 (텍스트와 배경 간의 인지 밝기 차이)
- 맥락 (주변 조명, 주변 환경, 텍스트의 의도된 목적)
Chrome에는 AA/AAA 대비율 가이드라인을 APCA로 대체하는 실험용 기능이 포함되어 있습니다.
색상만으로 정보를 전달하지 않습니다.
전 세계적으로 색각 이상이 있는 사람은 약 3억 2천만 명입니다. 남성 12명 중 약 1명, 여성 200명 중 1명은 일종의 '색맹'을 겪고 있습니다. 즉, 사용자의 약 1/20 또는 5%가 귀하가 의도한 대로 사이트를 이용하지 못하게 됩니다. Google은 색상에 의존하여 정보를 전달할 때 해당 숫자를 허용되지 않는 수준으로 밀어냅니다.
예를 들어 입력 양식에서 전화번호에 빨간색 밑줄이 표시되어 전화번호가 잘못되었음을 표시할 수 있습니다. 하지만 색각 이상이 있는 사용자나 스크린 리더 사용자에게는 이러한 정보가 전달되어도 제대로 전달되지 않습니다. 따라서 항상 사용자가 중요한 정보에 액세스할 수 있는 다양한 경로를 제공해야 합니다.
WebAIM 체크리스트에는 1.4.1항에 '콘텐츠를 전달하거나 시각적 요소를 구분하는 유일한 방법으로 색상을 사용해서는 안 됩니다'라고 명시되어 있습니다.
또한 특정 대비 요구사항을 충족하지 않는 한 '색상 단독으로 링크를 주변 텍스트와 구별해서는 안 된다'고 언급합니다.
대신 체크리스트에서는 밑줄(CSS text-decoration 속성 사용)과 같은 표시기를 추가하여 링크가 활성 상태인지 나타내는 것이 좋습니다.
이전 예를 쉽게 수정하는 방법은 필드가 잘못되었고 그 이유가 무엇인지 알리는 추가 메시지를 필드에 추가하는 것입니다.
앱을 빌드할 때는 이러한 사항을 염두에 두고 중요한 정보를 전달하기 위해 색상에 너무 많이 의존할 수 있는 영역을 주의하세요.
사이트가 다양한 사용자에게 어떻게 보이는지 궁금하거나 UI 색상 사용에 크게 의존하는 경우 DevTools를 사용하여 다양한 유형의 색맹을 비롯한 다양한 형태의 시각 장애를 시뮬레이션할 수 있습니다. Chrome에는 시력 결함 에뮬레이션 기능이 포함되어 있습니다. 여기에 액세스하려면 DevTools를 열고 창에서 렌더링 탭을 연 다음 다음과 같은 색 결함을 에뮬레이션하면 됩니다.
- 적색맹: 빨간색 빛을 감지할 수 없는 증상입니다.
- 제2색맹: 녹색 빛을 인지하지 못하는 증상입니다.
- 제3색맹: 청색광을 감지할 수 없는 상태입니다.
- 색맹: 회색을 제외한 모든 색상을 인지할 수 없는 증상입니다 (매우 드물게 발생).
고대비 모드
사용자가 고대비 모드를 사용하면 포그라운드 및 배경 색상을 반전시킬 수 있어 텍스트를 더 돋보이게 하는 데 도움이 됩니다. 시력이 나쁜 사용자의 경우 고대비 모드를 사용하면 페이지의 콘텐츠를 훨씬 쉽게 탐색할 수 있습니다. 시스템에서 고대비 설정을 할 수 있는 몇 가지 방법이 있습니다.
Mac OSX 및 Windows와 같은 운영체제는 시스템 수준의 모든 항목에 사용 설정할 수 있는 고대비 모드를 제공합니다.
고대비 설정을 사용 설정하고 애플리케이션의 모든 UI가 여전히 표시되고 사용 가능한지 확인하는 것이 좋습니다.
예를 들어 탐색 메뉴에서는 은은한 배경 색상을 사용하여 현재 선택된 페이지를 나타낼 수 있습니다. 고대비 확장 프로그램에서 페이지를 보면 이러한 미묘한 부분이 완전히 사라지고 그러면서 독자가 어떤 페이지가 활성 상태인지 알 수 있게 됩니다.
마찬가지로 이전 과정의 예를 생각해 보면 잘못된 전화번호 필드의 빨간색 밑줄이 구분하기 어려운 청록색으로 표시될 수 있습니다.
앞에서 다룬 명암비를 충족한다면 고대비 모드 지원에는 문제가 없습니다. 하지만 안심할 수 있도록 고대비 Chrome 확장 프로그램을 설치하고 페이지를 한 번 넘겨 모든 것이 예상대로 작동하고 표시되는지 확인하기만 하면 됩니다.