Mathias Bynens
이 도움말에서는 DevTools 및 Blink 렌더러에서 색각 이상 시뮬레이션을 구현한 이유와 방법을 설명합니다.
배경: 색상 대비가 좋지 않음
저대비 텍스트는 웹에서 자동으로 감지되는 가장 일반적인 접근성 문제입니다.
WebAIM의 상위 100만 웹사이트 접근성 분석에 따르면 홈페이지의 86% 이상이 대비가 낮습니다. 각 홈페이지에는 평균적으로 저대비 텍스트가 36개 있습니다.
DevTools를 사용하여 대비 문제를 찾고 이해하고 수정하기
Chrome DevTools를 사용하면 개발자와 디자이너가 대비를 개선하고 웹 앱에 더 접근하기 쉬운 색 구성표를 선택할 수 있습니다.
- 웹페이지 상단에 표시되는 검사 모드 도움말에는 텍스트 요소의 대비율이 표시됩니다.
- DevTools 색상 선택 도구는 텍스트 요소의 나쁜 대비율을 표시하고, 더 나은 색상을 수동으로 선택하는 데 도움이 되는 권장 대비 선을 표시하며, 접근 가능한 색상을 제안할 수도 있습니다.
- CSS 개요 패널과 Lighthouse 접근성 감사 보고서 모두 페이지에서 발견된 저대비 텍스트 요소를 나열합니다.
최근 이 목록에 새로운 도구가 추가되었으며, 이 도구는 다른 도구와 약간 다릅니다. 위의 도구는 주로 대비율 정보를 표시하고 이를 수정하는 옵션을 제공하는 데 중점을 둡니다. Google은 개발자가 이 문제 영역을 더 깊이 이해할 수 있는 방법이 DevTools에 아직 없다는 사실을 깨달았습니다. 이를 해결하기 위해 DevTools 렌더링 탭에 색맹 시뮬레이션을 구현했습니다.
Puppeteer에서는 새로운 page.emulateVisionDeficiency(type) API를 사용하여 이러한 시뮬레이션을 프로그래매틱 방식으로 사용 설정할 수 있습니다.
색약
20명 중 약 1명은 색각이상 (일반적으로 '색맹'이라고 함)을 앓고 있습니다. 이러한 장애는 색상의 차이를 구별하기 어렵게 만들고 이로 인해 대비 문제가 커질 수 있습니다.