譯 色彩無障礙性產品設計指南

2021-09-11 10:12:07 字數 1495 閱讀 4526

譯文出自:掘金翻譯計畫

譯者:hopsken

校對者:ivocin

最近,有乙個客戶帶來了乙個專案,該專案具有非常具體、複雜的無障礙色彩體系。這讓我意識到這個課題是如此重要,其內容又是如此豐富。

:justin reyna

讓我們來學習如何使用你已經知道的設計原則來進行色彩無障礙設計。

而且,做出不具備無障礙性的產品是種很粗魯的行為。所以,請保持禮貌。

「做出不具備無障礙性的產品是種很粗魯的行為。所以,請保持禮貌。」

無障礙設計不僅僅只是道德上的最佳實踐,如果不服從關於無障礙性的監管要求,還會有潛在的法律隱患。在 2017 年,聯邦法院收到過至少 814 條關於**涉嫌未提供無障礙訪問的訴訟,包括為數不少的集體訴訟。各個組織都在努力建立無障礙性標準,其中最著名的是美國無障礙委員會(united states access board,section 508)和 w3c 組織(world wide web consortium)。以下是這些規範的概述:

最好是在產品生命週期的早期就考慮無障礙性 —— 這在以後可以幫您省下不少時間和金錢。為了保證色彩無障礙性,在你為產品選擇主題色彩時就要考慮好,隨著產品發展下去,你會發現這麼做的好處。

這裡給出一些小技巧來幫助你打造色彩無障礙性產品。

提供足夠的對比度

為了達到 w3c 標準 aa 評級最低限度,背景與文字的對比度至少為 4.5:1。因此,在設計按鈕、卡片或者導航元素之類時,記得檢查色彩組合的對比度是否符合要求。

不要單純依賴顏色

為了保證無障礙性,確保你沒有完全依賴顏色來展示系統不同層級的關鍵資訊。因此,對於錯誤狀態、成功狀態或者系統警告等,諸如此類,確保同時使用文字或者圖示來清晰地展示發生了什麼。

除此以外,當展示、**之類時,允許使用者選擇是否加入紋理或圖案。確保色盲使用者能夠準確地分辨出它們,而不用擔心顏色會影響他們對資料的理解。trello 在這上面做得很棒,它特別提供了色盲友好模式。

當使用鍵盤瀏覽站點時,聚焦狀態可以通過在元素周圍顯示視覺引導來幫助人們在頁面上導航。這對有視覺缺陷、運動障礙,以及單純喜歡用鍵盤導航的人群會很有幫助。

所有瀏覽器都有乙個預設的聚焦狀態顏色,但是如果你打算在你的產品上覆蓋掉它,那麼請務必確保你有提供足夠的色彩對比度。這使得有視力障礙或色覺缺陷的人群可以通過聚焦狀態在頁面內導航。

文件化和推廣色彩系統

這只是一些提高產品無障礙性的小建議。另外,別忘了這只是關於色彩無障礙性的建議。要想詳細地了解無障礙設計原則,推薦先熟悉 wcag 2.1 規範。雖然這些規範看上去有些嚇人,但網上有大量的的資源可以幫到你。如果遇到困難,不要猶豫,向你身邊的(或者網上的)設計師們尋求幫助。

如果發現譯文存在錯誤或其他需要改進的地方,歡迎到 掘金翻譯計畫 對譯文進行修改並 pr,也可獲得相應獎勵積分。文章開頭的本文永久鏈結即為本文在 github 上的 markdown 鏈結。

產品設計體會(三七) 可用性測試

可用性測試也是使用者研究 需求採集的乙個常用方法,從理念上講就是 讓產品的終端使用者盡可能多的參與到產品設計各個環節中去,深入一點就很2.0了 使用者創造內容 這也不是什麼新概念,傳統行業的宜家ikea好像早在50年前就有所行動,讓使用者參與到產品的設計 把使用者參與擴充套件開,還可以包括前期調研 ...

H5活動產品設計指南基礎版

h5一般頁面不會很多,看似簡單,實際上會有很多細節需要注意,我自己在做過了幾個h5之後,發現了一些常犯的問題,做了小結,希望給新開始做h5的產品相關的同學提供一些幫助。首先說說乙個常容易被忽略但是又很關鍵的問題 h5雖簡單,但活動方案不能糙,避免兩三句話就講完的需求。乙個簡單的h5,需求方常常會把需...

H5活動產品設計指南基礎版

h5一般頁面不會很多,看似簡單,實際上會有很多細節需要注意,我自己在做過了幾個h5之後,發現了一些常犯的問題,做了小結,希望給新開始做h5的產品相關的同學提供一些幫助。首先說說乙個常容易被忽略但是又很關鍵的問題 h5雖簡單,但活動方案不能糙,避免兩三句話就講完的需求。乙個簡單的h5,需求方常常會把需...