2021-6-4 資深UI設計者
本周馬克筆設計留學的安老師想跟大家分享一個你八成不了解關于文字顏色的知識點。
根據世界衛生組織的統計報告，全球范圍內，大約有22億人擁有視力受損（visually impaired）的問題。這其中包含了從輕度的視力問題，到重度的眼部疾病，甚至完全失明的人群。那么在這個高度電子化的時代，大量信息來源于網絡，而獲取這些信息需要使用屏幕進行閱讀，所以緊隨而來的問題就出現了，如何讓視覺受損人群舒適的閱讀這些信息呢？
這里就要提到WCAG，全稱是Web Content Accessibility Guidlines（網頁內容無障礙指南），它們是一組是網頁內容更容易訪問的建議，主要針對殘疾人，WCAG 2.1于2018年6月成為W3C推薦標準。 這個指南中給出了相關建議，可使網站內容更容易訪問。遵循這些原則，web內容更易為廣大殘疾人士所接受，這些包括盲人和低視患者、聾人和重聽人、學習障礙、認知障礙、行動不便、言語殘疾、光過敏患者和這些病癥的復合患者。而我要和大家分享就是其中關于視障礙人群的在文字用色方面的小知識。
通過在文本和背景之間提供足夠的對比度，讓弱視人群在不使用增強對比度的輔助技術的前提下可以較省力的閱讀該文本。對于沒有色盲的人，通過閱讀性能評估，色相和保護度對可讀性的影響很小或者沒有影響。
文字顏色和背景顏色的標準分為一下幾種，從上到下為不合格到最高標準：
不合格（Fail）- 文字顏色和背景顏色沒有形成足夠的反差
AA Large – 對于18號或以上字號的文字內容，這個級別的反差度是最低要求。反差度不低于3:1
AA – 低于18號的文字的最優級別。反差度不低于4.5:1
AAA – 對比增強，對比度不小于7:1
這里要注意的是，裝飾性文字內容和品牌logo不需要考慮最小對比度問題。
那么如何知道你的文字顏色和背景顏色的對比度到底符不符合標準呢，這里推薦一個比較簡單易用且直觀的工具，來自Adobe Color里的“Accessibility Tools”中的對比度檢查工具（Contrast Checker）。
（https://color.adobe.com/create/color-accessibility）
通過使用這個工具，你就可以輕松知道你選擇的文字顏色和背景顏色是否達到了無障礙要求。比如上圖中的白色文字和橙色底圖。
在雙AA的標準下，白色字體和橙色背景的對比為3.68:1，低于了AA的4.5:1的標準，所以我們可以看到，17號或以下字體就沒有通過。
而在最嚴苛的AAA標準下，3.68:1的對比度遠遠低于最低標準7:1，所以無論是大字號還是小字號甚至是圖形，都無法通過。
經常被大家吐槽的各地警方的通告藍經過我的測試，都是可以通過AA標準的，甚至有一些還可以通過AAA標準。
再比如，很多同學喜歡使用的橙黃色背景配白色文字的情況，反而連AA標準都完全通過不了，對比度只有可憐的1.71:1。顯然這種情況，甚至會給視覺正常的人也造成一定的閱讀困擾，長時間閱讀可能會造成視覺疲勞。
不過，在實際的操作中，大家還是要根據具體的情況而定，也不一定非要符合這個標準。比如剛提到的這種橙黃色搭配白色字體的情況，如果沒有大面積使用，只是偶爾出現的話，我認為也是沒有什么太大問題的。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：馬克筆設計留學
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務