DevTools 팁: 저대비 텍스트 찾기 및 수정
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
저대비 텍스트는 웹에서 가장 많이 발생하는 접근성 문제입니다. 2022년 2월에는 상위 100만 개의 홈페이지 중 83.9% 에서 이 문제가 발생했습니다. 자세한 내용은 WebAIM Million 2022 보고서를 확인하세요.
Chrome DevTools를 사용하면 모든 대비 문제를 한눈에 확인하고 버튼 클릭 한 번으로 해결할 수 있습니다.
동영상에서 다음 내용을 알아보세요.
검사기 모드의 도움말에서 대비율과 색상 선택 도구에서 권장 비율 값을 확인하세요.
색상 선택 도구에서 추천 색상을 선택하거나 WebAIM 가이드라인을 준수하도록 대비율 선 아래에서 색상을 선택합니다.
CSS 개요 및 (미리보기) 문제 패널에서 모든 대비 문제를 확인합니다.
결함을 에뮬레이션하여 모든 사용자에게 페이지가 어떻게 표시되는지 파악합니다.
더 많은 실습 환경을 보려면 웹사이트 가독성 향상 튜토리얼을 참고하세요.
자세한 내용은 다음을 참고하세요.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2022-10-19(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]