[Chrome] 개발자 도구 - 명도대비율 확인

● 목적 : 웹접근성

    - 색약, 저시력자, 고령자 등도 구분가능하도록 텍스트와 배경의 명도대비가 필요함

    - 기본적인 비율은 텍스트 : 배경 = 4.5 : 1

    - 큰 글자(24px 이상) 혹은 굵은 글자(19px 이상)의 경우, 텍스트 : 배경 = 3 :1까지 가능

 

● 방법

  - Ctrl + Shift+ C 또는 요소 선택 버튼 클릭 후 해당 요소 위에 마우스 올려서 확인

 

    - 스타일에서 Color Picker를 이용하여 확인

 

    - 펼침 버튼을 누르면 레벨 기준 통과여부도 확인 가능

       (아래의 경우, AA와 AAA 기준 모두 통과한다는 뜻)

 

    - 기준을 미달하면 아이콘이 바뀌고(왼쪽), 새로고침 아이콘(오른쪽)을 누르면 해당 기준에 맞춰 색상 변경

 

 

● 참고

    - 텍스트가 있는 요소에서만 확인 가능. 텍스트가 없는 요소 선택 시 "사용 가능한 대비 정보 없음"이라고 뜸

    - 스타일 탭에서 확인할 경우, 텍스트 Color Picker에서만 확인 가능. 배경 Color Picker에서는 확인 불가능

    - 텍스트 컨텐츠가 있는 마지막 노드에서만 확인 가능

 

---

참고

• 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 색상 선택 도구
  https://www.youtube.com/watch?v=sd7IBnMR-7o&list=PLkfUwwo13dlUJCAGcBOynazaBVgvvj4ba&index=7