시력이 좋다면 모든 사람이 나와 같은 방식으로 색상이나 텍스트의 가독성을 인식한다고 가정할 수 있습니다. 물론 그렇지 않습니다. 짐작할 수 있듯이 어떤 사람들은 잘 읽을 수 있는 일부 색상 조합은 다른 사람들은 어렵거나 불가능할 수 있습니다. 이는 일반적으로 전경 색상과 배경 색상의 밝기 간의 관계인 색상 대비로 인해 발생합니다. 색상이 비슷하면 명암비가 낮고 색상이 더 다르면 명암비가 높아집니다.
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명 정도가 일종의 색맹을 겪고 있습니다. 즉, 사용자 중 약 5%는 의도한 대로 사이트를 이용하지 않을 것입니다. 정보를 전달하는 데 색상에 의존하면 그 수가 허용되지 않는 수준으로 증가합니다.
예를 들어 입력 양식에서 전화번호가 유효하지 않음을 나타내기 위해 전화번호에 빨간색 밑줄이 표시될 수 있습니다. 색상 결함이나 스크린 리더 사용자에게는 이 정보가 잘못 전달되거나 전혀 전달되지 않습니다. 그렇기 때문에 항상 사용자가 중요한 정보에 액세스할 수 있는 여러 경로를 제공해야 합니다.
WebAIM 체크리스트에는 섹션 1.4.1에 '콘텐츠를 전달하거나 시각적 요소를 구분하는 유일한 방법으로 색상을 사용해서는 안 된다'고 명시되어 있습니다. 또한 특정 대비 요구사항을 충족하지 않는 한 '색상만으로 링크를 주변 텍스트와 구별해서는 안 된다'고 언급합니다. 대신 체크리스트에서는 CSS text-decoration 속성을 사용하여 밑줄과 같은 표시기를 추가하여 링크가 활성 상태임을 나타내는 것이 좋습니다.
이전 예를 수정하는 기본적인 방법은 필드에 추가 메시지를 추가하여 메시지가 잘못되었으며 그 이유를 알리는 것입니다.
앱을 빌드할 때는 이러한 사항을 염두에 두고 중요한 정보를 전달하기 위해 색상에 너무 많이 의존하는 영역을 주의하세요.
사이트가 다양한 사용자에게 어떻게 보이는지 궁금하거나 UI의 색상 사용에 크게 의존하는 경우 DevTools를 사용하여 다양한 형태의 시각 장애를 시뮬레이션할 수 있습니다. Chrome에는 시각 결함 에뮬레이션 기능이 포함되어 있습니다. 액세스하려면 DevTools를 연 후 창에서 렌더링 탭을 엽니다. 여기에서 다음과 같은 색 결함을 에뮬레이션할 수 있습니다.
- 적색맹: 빨간색 빛을 감지할 수 없습니다.
- 제2색맹: 녹색광을 감지할 수 없는 증상입니다.
- 제3색맹: 청색광을 감지할 수 없습니다.
- 색맹: 회색 명암을 제외한 어떠한 색도 인지할 수 없는 증상입니다 (매우 드문 경우).
고대비 모드
고대비 모드를 사용하면 사용자가 전경 색상과 배경 색상을 반전시킬 수 있어 텍스트가 더 돋보이게 할 수 있습니다. 시력이 나쁜 사용자의 경우 고대비 모드를 사용하면 페이지의 콘텐츠를 훨씬 더 쉽게 탐색할 수 있습니다. 머신에서 고대비를 설정할 수 있는 몇 가지 방법이 있습니다.
Mac OSX 및 Windows와 같은 운영체제는 시스템 수준의 모든 항목에 사용 설정할 수 있는 고대비 모드를 제공합니다.
고대비 설정을 사용 설정하고 앱의 모든 UI가 계속 표시되고 사용 가능한지 확인하는 것이 좋습니다.
예를 들어 탐색 메뉴에서 희미한 배경 색상을 사용하여 선택된 페이지를 나타낼 수 있습니다. 고대비 확장 프로그램에서 보면 미세한 부분이 완전히 사라지고 그러면서 독자는 어떤 페이지가 활성 상태인지 알 수 있습니다.
마찬가지로 앞의 예에서 잘못된 전화번호 필드의 빨간색 밑줄이 구분하기 어려운 파란색과 녹색으로 표시될 수 있습니다.
앞서 다룬 명암비를 충족한다면 고대비 모드를 지원해도 괜찮습니다. 하지만 더 안심할 수 있도록 고대비 Chrome 확장 프로그램을 설치하고 페이지를 훑어보고 모든 것이 예상대로 작동하고 표시되는지 확인하는 것이 좋습니다.