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

소피아 에멜리아노바
소피아 에멜리아노바

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

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

동영상에서 다음 내용을 알아보세요.

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

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

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

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

  • CSS 개요 및 (미리보기) 문제 패널에서 모든 대비 문제를 확인합니다.

    CSS 개요 패널 및 문제 탭에 표시된 대비 문제

  • 결함을 에뮬레이션하여 모든 사용자에게 페이지가 어떻게 표시되는지 파악합니다.

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

더 많은 실습 환경을 보려면 웹사이트 가독성 향상 튜토리얼을 참고하세요.

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