DevTools 팁: 저대비 텍스트 찾기 및 수정

Sofia Emelianova
Sofia Emelianova
GitHub

저대비 텍스트는 웹에서 가장 많이 발생하는 접근성 문제입니다. 2022년 2월 기준 상위 100만 개 홈페이지 중 83.9% 에 이 문제가 발생했습니다. 자세한 내용은 WebAIM Million 2022 보고서를 확인하세요.

Chrome DevTools를 사용하면 모든 대비 문제를 한눈에 파악하여 버튼 클릭 한 번으로 해결할 수 있습니다.

다음 동영상을 통해 방법을 알아보세요.

  • 검사기 모드의 도움말에서 대비율을 확인하고 색상 선택 도구에서 권장 비율 값을 확인하세요.

    대비율은 도움말에서 확인할 수 있으며 색상 선택 도구를 통해 대체 색상의 비율을 측정할 수 있습니다. AA 및 AAA 등급을 사용할 수 있습니다.

  • 색상 선택 도구에서 추천 색상을 선택하거나 대비율 선 아래의 색상을 선택하여 WebAIM 가이드라인을 준수합니다.

    권장 대비율 선은 색상 선택 도구의 음영 미리보기에서 확인할 수 있습니다.

  • CSS 개요 및 (미리보기) 문제 패널에서 모든 대비 문제를 살펴보세요.

    CSS 개요 패널 및 문제 탭에 나열된 대비 문제

  • 시각 장애를 에뮬레이션하여 모든 사용자에게 페이지가 어떻게 보이는지 파악합니다.

    렌더링 탭에서 선택되고 표시 영역에서 에뮬레이션된 블러된 비전

더 실무형 학습 환경은 웹사이트의 가독성 높이기 튜토리얼을 참고하세요.

자세한 내용은 다음을 참고하세요.