색맹, 색약, 저시력 등의 시각장애가 있는 사용자를 위한 웹 접근성 향상
1. 색에 의한 정보 표현 방지
색맹인 사람들은 어떤게 Dataset1 인지 어떤게 Dataset2 인지 모를 수 있다.
무늬를 이용해서 정보를 제공할 수 있다.
📌 Chart.js 에 패턴 적용
Colors | Chart.js
Colors Charts support three color options: for geometric elements, you can change background and border colors; for textual elements, you can change the font color. Also, you can change the whole canvas background. Default colors If a color is not specifie
www.chartjs.org
GitHub - ashiguruma/patternomaly: Easily generate patterns for use in data graphics
Easily generate patterns for use in data graphics. Contribute to ashiguruma/patternomaly development by creating an account on GitHub.
github.com
2. 명도대비 4.5 : 1 이상
📌 명도차이 계산 TOOL
Colour Contrast Analyser (CCA) - TPGi
TPGi's ADA Color Contrast Checker helps determine the accessibility of the contrast ratio of two colors for WCAG AA and AAA.
www.tpgi.com
텍스트와 배경 간의 명도 대비는 4.5:1 이상이여야 한다.
이미지로 표현된 텍스트 콘텐츠도 포함이다.
❌ 4.5:1 이상 기준 적용 예외
- 비활성 콘텐츠 (disabled 버튼 같은 경우)
- 장식 목적의 콘텐츠 (사용자에게 의미 있는 정보를 제공하지 않는 경우)
'Frontend > 웹접근성' 카테고리의 다른 글
| [웹접근성] 목록 나열 태그 (ul, ol, dl) (0) | 2025.05.12 |
|---|