장애 유형

장애 유형

전맹, 저시력

오류 설명

• 저시력, 노안의 경우 명도 대비가 뚜렷하지 않은 콘텐츠를 제대로 인식하기 어려우므로 콘텐츠와 배경의 명도 대비가 커야 함.
• 네비게이션, 제목, 본문, 주요 과업 수행 버튼(메일쓰기, 검색 등)은 배경과의 명도대비가 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 (포토샵 익스텐션)

평가 방법

1. 포토샵 익스텐션 탭에서 스마일 아이콘을 선택
2. 포토샵 자체 컬러픽커에서 확인하고자 하는 이미지의 전경색과 배경색 선택.
3. CONTRASTRATIO 패널에서 결과값 확인

모바일 환경에서 전경과 배경간의 명도 대비 확인

평가 도구

User Agent Switcher(파이어폭스 부가기능), N-WAX, Contrast Ratio (포토샵 익스텐션)

평가 방법

Firefox 도구 메뉴 User Agent Switcher 의 Defalut User Agent 설정으로 원하는 모바일 기기 환경을 선택한 후, N-WAX, Contrast Ratio (포토샵 익스텐션)을 활용해 PC환경에서의 평가와 동일하게 진행함

평가 도구 전체 설치 방법