無障礙網頁設計調整_導覽列顏色對比度測試
在WCAG 2.0 (Web Content Accessibility Guidelines)中
G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
要求一些圖片文字、按鈕或導覽顏色對比必須至少要有4.5:1的比例
這裡推薦以下幾個測試用的網站
WebAIM的contrastchecker
https://webaim.org/resources/contrastchecker/
contrast-ratio
https://contrast-ratio.com/
在此我用WebAIM的contrastchecker
擷取好頁面上前景跟背景的顏色色碼做輸入比較
就會發現對比比例是不足夠的就會需要做調整
對比色調整若是比較沒概念的
可以透過此網站工具也會告知符合WCAG規格建議的對比色
https://color.adobe.com/zh/create/color-contrast-analyzer
經過調整完就能有符合強烈對比的優化過導覽
Ref:
https://www.logicify.com/en/blog/accessibility-in-web-development-practical-tips-for-ui-ux-designers-and-content-editors/
http://www.webaxe.org/color-contrast-tools/
https://accessibility.ncc.gov.tw/Questions/Detail/3261?Category=19
https://contrast-ratio.com/
https://www.w3.org/TR/WCAG20/
https://www.w3.org/WAI/standards-guidelines/wcag/
留言
張貼留言