相信很多設(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標準，這個工具會幫助很多。
如果大家有更好的方法歡迎和我分享！??
