相信很多設(shè)計師都會被一個小問題困擾過,字體顏色的可讀性是否過關(guān)?尤其在適配的過程中,我們要考慮很多現(xiàn)實情況,用戶的屏幕顯示器分辨率等等??勺x性這個很多時候挺subjective(主觀)的,不是所有人都對顏色敏感,能不能看清楚有時候也真的很難把握。那我們?nèi)绾慰茖W(xué)的去進行一番測試,檢驗字體顏色的可讀性是否過關(guān)呢?
今天和大家分享一個很好的解決此類問題的方法,就是參考Web Content Accessibility Guidelines(WCAG)值。有很多檢查WCAG值的小工具,我通常用這個:https://webaim.org/resources/contrastchecker/

無論是淺色字在深色背景,還是深色字在淺色背景,一般的網(wǎng)站都要通過AA的標準,如果要求十分嚴格的設(shè)計,那就得通過AAA標準了。
Web Content Accessibility Guidelines (WCAG) 2.0 中有明確指出:
level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
AA級別中普通字體對比度要符合4.5:1,大號字體的對比度要符合至少3:1。
AAA級別中普通字體對比度要達到4.5:1, 大號字體對比度要符合至少7:1。
WCAG參考網(wǎng)址:https://www.w3.org/TR/WCAG20/
我做了個測試。
第一種,完全失敗的狀態(tài)??雌饋淼故峭p盈,但是測試結(jié)果不理想。

第二種,加深了一些,部分通過。

第三種,完全通過,顏色很深,無論AA還是AAA都過了。

讓我們把三種放在一起對比一下,還是小有差異的。

為了進一步證明我的設(shè)想,用了中外兩個著名網(wǎng)站測試,Medium和知乎,這倆都是content很重閱讀量很大的網(wǎng)站,來來來看一下結(jié)果。
首先是Medium。黑色那種就不用測了通過率穩(wěn)如狗,直接測試有嫌疑的灰色,沒想到本來font color就是純黑,居然聰明的用了0.54的透明度代替放另外一種顏色。

以為這樣拿我沒轍了嗎,呵呵呵,機智如我,截圖直接抓色,沒想到。。。。居然通過了!不錯不錯掌聲鼓勵一下。

再來看一下國內(nèi)的知乎。結(jié)果令我感到十分意外,居然只有Large Text通過了。納尼?!


不得不說,這些細節(jié)確實很難令人把握,但也就是細節(jié)體驗出了一個設(shè)計師的耐心和深入程度。我現(xiàn)在經(jīng)手的全部項目都按照這個指標審核一次了,全方位保證我團隊的設(shè)計質(zhì)量最優(yōu)。
但是坦白地說這個測試方法不適用于全部文字設(shè)計,比如Disable狀態(tài)還是需要半灰色的狀態(tài)來做一個明顯的區(qū)分。最后結(jié)論是,這個方法確實很有效的可以測試文字色差的可讀性,順便阻止一下那些無理的修改需求(設(shè)計師們懂的)。如果是閱讀類很重的設(shè)計,對可讀性要求很嚴格,最好能達到AAA標準,這個工具會幫助很多。
如果大家有更好的方法歡迎和我分享!??