這些 UI 框架都存在對比度問題 - WCAG

背景

做爲一個 UI 框架開發者，愈來愈多的人反饋給我同一個問題：網頁中一些連接的對比度有些低，致使在個別顯示器上存在看不清的問題。對一些服務於中後臺產品的 UI 框架來講，中老年的老闆是一個特殊的羣體，每每視力都沒那麼好，因此網頁上文本的對比度就顯得尤其重要。

不知道你們有沒有注意到 Chrome 瀏覽器的控制檯，在查看元素的 Styles 的時候，CSS color 屬性的取色器有一個 Contrast ratio 屬性，以下圖：

這是一個知名 UI 框架的 A 標籤的 color 屬性，咱們能夠看到 Contrast ratio 的值爲 3.24，同時有一個🚫失敗的圖標，說明這個網站連接的對比度存在問題，只有達到 4.5 以上纔算合格。 那這是否是一個廣泛存在的問題呢？而後我又查看了目前市面主流的一些 UI 庫 A 標籤顏色的對比度，分別以下：

• Material Design 4.6 ✅
• React Suite 4.51 ✅
• Semantic UI 3.99
• Bootstrap 3.98
• Ant Design 3.24
• Element UI 2.78
• Layui 2.63

若是按照 Chrome 瀏覽器對比度 4.5 的要求，Material Design 和 React Suite 的連接顏色達到了要求，其餘框架都存在問題，這是一個 Web 工做者忽視的廣泛問題。 你們不妨打開本身的網站看一下，是否存在對比度的問題？

早在 2018年6月5日， W3C 組織發佈了《Web Content Accessibility Guidelines (WCAG) 》2.1 版本，指南中涵蓋了使 Web 內容更易於訪問的各類建議， 它是咱們 Web 工做者的基礎指南，可是有些細節是咱們容易忽視的，這裏咱們將對其中的對比度作詳細分析。

對比度的標準

那麼接下來，咱們看一下這個對比度的標準是什麼？

在 WCAG 2.1 中的 1.4.3 章節中有明確規定， 文本和圖像文本的的對比度最小值爲 4.5:1，也就是說低於這個值得對比度都不符合標準 。 對比度的計算規則咱們能夠簡單的理解爲兩個顏色的相對亮度相除獲得的值，好比：兩個白色的對比度是 1:1 , 白色（#FFFFFF）與黑色（#000000）的對比度爲 21:1，也就是說對比度的範圍在 1:1 與 21:1 之間。

在 WCAG 2.1 的準則層，爲了讓準則具有可測試性，定義了一系列成功準則，提供了可測試的成功標準。 爲了知足不一樣羣體和不一樣狀況的須要，對成功標準定義了三個一致性級別:

• A 級 （最低）
• AA 級
• AAA 級（最高）

針對對比度要求分別有兩個成功準則:

• 成功標準 1.4.3 對比度（最小）AA 級
• 成功標準 1.4.6 對比度（增強）AAA 級

要知足 AA 級準則，文本視覺呈現及文本圖像至少要有 4.5:1 的對比度，若是對比度不能達到這個標準，說明這個網站在 Web 內容無障礙閱讀中存在問題。那是否是網頁中全部的元素咱們必需要求這個標準？固然不是，針對大號文本（18pt 或者 14pt 的粗體或者更大字體）最小對比度標準是 3:1。

要知足 AAA 級準則，文本視覺呈現及文本圖像至少要有 7:1 的對比度，針對大號文本以及大文本圖像至少有 4.5:1 的對比度。

另外，對一些附屬內容，好比純粹的裝飾元素，未激活的用戶界面組件，文本做爲商標名稱的一部分等等是沒有最低對比要求。

解決問題

大多數設計師的顯示器每每是行業裏頂配，顯示器的色域天然會很大，在一些顏色的選擇上每每就忽略的其餘設備存在的問題。 若是沒有條件去對全部的終端設備進行調配，那就請參考標準，按照準則的成功標準去進行設計。

咱們屢次與設計師溝通後，在 React Suite 4.0 版本中，針對顏色對比度作了改善，最低對比度從 3:1 調整到 4.5:1 知足了 AA 級標準。同時咱們會在色板工具上提供對比度標準參考，方便你們在自定義主題的時候可以知足標準。目前 React Suite 仍是 4.0 alpha 版本，還剩下一些測試等收尾工做，同時但願獲得你們更多的寶貴建議。

最後

在全世界存在不少弱視人羣，咱們會愈來愈貼心去照顧你的眼睛， 同時咱們會爲 Web 開發體驗而努力。