[웹접근성] 색에 무관한 인식, 명도 대비 (contrast ratio)

 

웹접근성 명도 대비 contrast ratio

 

🔎 저시력자, 고령자 등도 인식할 수 있도록 콘텐츠와 배경 간의 명도대비는 4.5:1 이상이어야 한다.

📌 텍스트 콘텐츠의 색과 배경 색을 평가도구를 이용하여 대비한다.

📌 명도 대비 평가 도구

• CCA Tool (설치형)
• chrome 기본 브라우저에서 명도 대비 확인
• WCAG Color contranst Checker

📌 명도대비 체크리스트

• 메타포(아이콘, 버튼 등)와 배경색의 명도대비 4.5:1 이상
• 객체에 아웃라인 보더 컬러, 강조색의 경우
• 입력 도움 용 텍스트(input value, placeholde 컬러 값 등)

 

📌 명도대비 예외 사항

• 콘텐츠와 배경 색의 명도 대비가 3:1까지 허용되는 경우
• 부가적인 정보의 제공 (게시판의 경우 날짜, 카테고리 등)
• 텍스트가 18pt 또는 굵은(bold) 14pt 이상일 경우
• 확대 가능한 페이지의 일반 텍스트 또는 이미지 텍스트
• 비활성화 콘텐츠 (입력 방지용, 사용할 수 없음 표시용)
• 장식 목적의 콘텐츠 (로고, 장식용 이미지)

 

---

📌색맹 사용자의 경우 특정 색을 구별하지 못한다.

• 적록 색맹의 경우 적색과 녹색을 구분할 수 없음 / 전색맹의 경우 색을 감지할 수 없음.

 

📌 콘텐츠를 색을 이용해서만 정보를 제공해서는 안된다. 색상 이외에 패턴, 크기, 모양 등으로 정보를 구분할 수 있도록 제공해야 한다.

• 그래프, 차트가 색을 이용해 정보를 나타내는 대표적인 사례

 

✅ 그래프에 정보가 많다면 차트나, 그래프 대신 데이터 테이블을 제공

✅ 컬러 차트에 패턴도 추가 또는 컬러 아이콘의 경우 관련 정보를 텍스트로 추가 제공

• 컬러만을 사용해서 정보제공을 해선 안됨

 

✅ 페이지네이션 블릿의 경우 위와 같이 다른 모양등으로 UI를 제공해준다.

 

 

✅ 색상으로만 정보를 제공하지 않는다.

• ex. 주식에서 상승과 하락에 대한 정보를 제공하는 경우 아래의 이미지와 같이 화살표 방향에 차이를 주는 등의 추가 정보제공 방법 필요.