3.3.1 콘텐츠와 배경간의 명도 대비는 4.5:1 이상이 되는가?
장애 유형
- 장애 유형
- 전맹, 저시력
- 오류 설명
-
- 저시력, 노안의 경우 명도 대비가 뚜렷하지 않은 콘텐츠를 제대로 인식하기 어려우므로 콘텐츠와 배경의 명도 대비가 커야 함.
- 네비게이션, 제목, 본문, 주요 과업 수행 버튼(메일쓰기, 검색 등)은 배경과의 명도대비가 4.5:1 이상이 되게 제공
- 부가 정보, 광고, 부가 기능 수행 버튼(인쇄, 추천 등)은 배경과의 명도대비가 3:1 이상이 되게 제공
- 광고 영역을 제외한 이미지 폰트는 중요도와 상관없이 배경과의 명도대비가 4.5:1 이상이 되게 제공
- 사용할 수 없거나 비활성 영역임을 표시하기 위해 딤드처리 된 폰트는 예외
오류 유형
주요 과업 버튼, 이미지 폰트의 명도 대비가 4.5:1 이하인 경우
- 오류 예시
- 회원 가입 진입 페이지에 사용된 이미지 폰트 및 주요 과업 버튼이 배경과의 명도대비가 2.6:1임
- 참고 이미지
- 해결 방법
- 이미지 폰트는 시스템 폰트보다 인식률이 떨어지므로 중요도와 상관 없이 4.5:1 이상이 되게 제공
부가 정보의 명도 대비가 3:1 이하인 경우
- 오류 예시
- 기사 제목 다음에 제공되는 언론사, 게시 날짜와 같은 부가 정보의 명도대비가 2.8:1임
- 참고 이미지
- 해결 방법
- 부가 정보라 하더라도 인식이 가능하기 위해서 최소한의 기준인 3:1 이상이 되도록 제공해야 함
모바일 환경의 텍스트, 이미지 콘텐츠와 배경간 명도 대비가 4.5.1 이하인 경우
- 오류 예시
- 메뉴 영역의 콘텐츠와 배경 간 명도대비가 2.3.1 임
- 참고 이미지
- 해결 방법
- 텍스트, 이미지 콘텐츠와 배경간 명도 대비가 4.5:1 이상이 되도록 콘텐츠 혹은 배경 색상을 변경해야 함.
바른 예시
텍스트와 배경간의 명도 대비가 4.5:1 이상임
- 참고 이미지
주의 사항
이미지 텍스트는 텍스트에 인접한 1px 중 가장 대비가 높은 색을 기준으로 평가
- 글자색 및 배경색 선택 예제
사용할 수 없는 비활성 영역은 평가하지 않음
- 비활성 영역 예제
평가 방법
웹 페이지의 전경과 배경간의 명도 대비 확인
- 평가 도구
- N-WAX
- 평가 방법
- 3.3.1 명도 대비 항목에서 '전경색 선택' 버튼과 '배경색 선택' 버튼을 눌러 명도 대비 값 확인
- [Case.1] 전경과 배경의 명도 대비가 4.5:1 이상인 경우 하얀색 셀로 표시됨
- [Case.2] 전경과 배경의 명도 대비가 3:1 이상인 경우 노란색 셀로 표시되며, 글자 크기가 24px 이상 또는 18.66px 이상인지 확인. 이상일 경우 통과
- [Case.3] 전경과 배경의 명도 대비가 3:1 미만인 경우 빨간색 셀로 표시되며 오류 처리
포토샵에서의 전경과 배경간의 명도 대비 확인
- 평가 도구
- Contrast Ratio (포토샵 익스텐션)
- 평가 방법
-
- 포토샵 익스텐션 탭에서 스마일 아이콘을 선택
- 포토샵 자체 컬러픽커에서 확인하고자 하는 이미지의 전경색과 배경색 선택.
- CONTRASTRATIO 패널에서 결과값 확인
모바일 환경에서 전경과 배경간의 명도 대비 확인
- 평가 도구
- User Agent Switcher(파이어폭스 부가기능), N-WAX, Contrast Ratio (포토샵 익스텐션)
- 평가 방법
- Firefox 도구 메뉴 User Agent Switcher 의 Defalut User Agent 설정으로 원하는 모바일 기기 환경을 선택한 후, N-WAX, Contrast Ratio (포토샵 익스텐션)을 활용해 PC환경에서의 평가와 동일하게 진행함