Contrast Checker 更新

更新 Contrast Checker | Niquelao 你覺得效果如何？ 跳至內容 首頁 Contrast Checker HeadingsMap Easyvalidator 關於我… ← 可用鍵盤操作的 Google reCAPTCHA HTML 5 Outline 搭配 Headingsmap → 更新 Contrast Checker 發佈於 2013 年 9 月 24 日 由 Rumoroso 經過一段時間沒能好好照顧它之後，最近我開始重新檢視 Firefox 擴充功能 Contrast Checker 的功能與可用性。舊版可以檢查頁面上所有元素的顏色，但必須按需執行，也就是說，需要按一個按鈕才會開始檢查。我所做的改變是移除那個按鈕的需求，讓頁面載入完成後自動進行分析。另一方面，我一直覺得需要一個選擇器，讓滑鼠移動時能回傳游標所在位置的顏色。類似 ColorZilla 擴充功能的做法。因為我想用最簡單的技術來達成，經過反覆思考後，我想到可以利用 canvas 元素來產生整個頁面的截圖，並從其內容中取得資訊。我加入的功能是建立這個 canvas、偵測滑鼠位置，並取得該座標像素的顏色資訊。我認為這是個簡單的解決方案，能輕鬆達到我的目標，不需要太複雜的技術。此外，由於我經常需要擷取頁面來展示設計或進行無障礙檢查，間接加入這個功能後，我只需要再加一個下載按鈕就行了。最後，我對使用方式、元素排列等做了些調整，試著改善使用體驗。如果沒達到效果，甚至反而退步了，請儘管告訴我… 這就是成果… 這篇文章發表於 無障礙 分類，並標記為 無障礙、顏色、對比、wcag。儲存永久連結。 ← 可用鍵盤操作的 Google reCAPTCHA HTML 5 Outline 搭配 Headingsmap → 對「更新 Contrast Checker」的 5 則回覆 Pete 說： 2014 年 2 月 18 日 於 23:33 我注意到舊版外掛有色盲相關的資訊。有「正常」視覺的分析，也有針對眼部疾病的分析。（這個網站有舊版外掛的截圖：http://openweb.eu.org/articles/text-contrasts）更新版的外掛有辦法看到這些資訊嗎？之後會加回來嗎？ Rumoroso 說： 2014 年 2 月 19 日 於 0:30 嗨 Pete，最新版的外掛沒有提供這些資訊給使用者，但它仍然可以估算這些數值。我正在努力加入一個選項來顯示這些資訊，但我得在面板中找到合適的位置來放。如果你需要包含這些資訊的版本，我可以上傳一個臨時版本給你。謝謝你的留言。 Rumoroso 說： 2014 年 2 月 20 日 於 19:00 嗨 Pete，看到你的留言後，我決定是時候上傳一個包含這些資訊（色盲相關資訊）的版本了，所以我剛剛上傳了。一旦審核人員驗證通過，就會開放使用。感謝你的留言… 謝謝。 Bruce Ritter 說： 2015 年 2 月 3 日 於 21:24 嗨 Pete，做得好！我很喜歡檢查頁面上文字顏色對比的便利性，然後還能將不合規的文字標示出來，方便截圖記錄。但我想更進一步，希望它能自動產生報告，甚至直接將無障礙缺失輸入到我們的缺失回報系統中，全部自動完成。你願意分享程式碼，或是以函式庫的形式提供，讓我可以呼叫並取得左側清單中的相同資訊，包括不合規的文字及其在頁面上的邊界框座標嗎？ Bruce Ritter 說： 2015 年 2 月 3 日 於 21:26 嗨 Pete，做得好！我很喜歡檢查頁面上文字顏色對比的便利性，然後還能將不合規的文字標示出來，方便截圖記錄。但我想更進一步，希望它能自動產生報告，甚至直接將無障礙缺失輸入到我們的缺失回報系統中，全部自動完成。你願意分享程式碼，或是以函式庫的形式提供，讓我可以呼叫並取得左側清單中的相同資訊，包括不合規的文字及其在頁面上的邊界框座標嗎？ 發表留言 取消回覆 分類 (X)HTML 無障礙 CSS html5 Javascript 行動網路 Niquelando rescripting 追蹤 @rumoroso Niquelao 採用 WordPress 建置。

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.