相信很多设计师都会被一个小问题困扰过，字体颜色的可读性是否过关？尤其在适配的过程中，我们要考虑很多现实情况，用户的屏幕显示器分辨率等等。可读性这个很多时候挺subjective(主观）的，不是所有人都对颜色敏感，能不能看清楚有时候也真的很难把握。那我们如何科学的去进行一番测试，检验字体颜色的可读性是否过关呢？
今天和大家分享一个很好的解决此类问题的方法，就是参考Web Content Accessibility Guidelines(WCAG)值。有很多检查WCAG值的小工具，我通常用这个：https://webaim.org/resources/contrastchecker/
无论是浅色字在深色背景，还是深色字在浅色背景，一般的网站都要通过AA的标准，如果要求十分严格的设计，那就得通过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参考网址：https://www.w3.org/TR/WCAG20/
我做了个测试。
第一种，完全失败的状态。看起来倒是挺轻盈，但是测试结果不理想。
第二种，加深了一些，部分通过。
第三种，完全通过，颜色很深，无论AA还是AAA都过了。
让我们把三种放在一起对比一下，还是小有差异的。
为了进一步证明我的设想，用了中外两个著名网站测试，Medium和知乎，这俩都是content很重阅读量很大的网站，来来来看一下结果。
首先是Medium。黑色那种就不用测了通过率稳如狗，直接测试有嫌疑的灰色，没想到本来font color就是纯黑，居然聪明的用了0.54的透明度代替放另外一种颜色。
以为这样拿我没辙了吗，呵呵呵，机智如我，截图直接抓色，没想到。。。。居然通过了！不错不错掌声鼓励一下。
再来看一下国内的知乎。结果令我感到十分意外，居然只有Large Text通过了。纳尼？！
不得不说，这些细节确实很难令人把握，但也就是细节体验出了一个设计师的耐心和深入程度。我现在经手的全部项目都按照这个指标审核一次了，全方位保证我团队的设计质量最优。
但是坦白地说这个测试方法不适用于全部文字设计，比如Disable状态还是需要半灰色的状态来做一个明显的区分。最后结论是，这个方法确实很有效的可以测试文字色差的可读性，顺便阻止一下那些无理的修改需求（设计师们懂的）。如果是阅读类很重的设计，对可读性要求很严格，最好能达到AAA标准，这个工具会帮助很多。
如果大家有更好的方法欢迎和我分享！😀
