無障礙網頁設計調整_導覽列顏色對比度測試

 
在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/

留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題