今早（zǎo）打开腾（téng）讯ISD的博客，看到一（yī）篇（piān）新的文章（zhāng），《迷（mí）你（nǐ）屋（wū）视觉规范简（jiǎn）介》，赶（gǎn）紧看了（le）来学习。不过（guò）给我抓到（dào）问题咯，臭鱼（yú）不介意我在这说下吧：

这套规范中的，按钮的第一（yī）级、第二级和文字中用于（yú）突出的（de）第三种，红底白字和白底红字都不符合W3C的对比度规范。原本（běn）需要突出和强调的文字反而可（kě）能识别不易（yì）。

截（jié）图中使用对比度检查器，基（jī）于W3C的WCAG Guideline 1.4.4和1.4.2中有相应的规定（dìng），工具（jù）的下载和（hé）具体说明可见油茶（chá）会的这篇。

这（zhè）是一（yī）个很好用也很（hěn）科学的工具，小兔（tù）把它放（fàng）在Windows的快速启动栏（lán）里（lǐ），而且推荐给了同事（shì）们（men）。当初刚开始的时候，我们有多年设计经验的（de）视觉设计师不以（yǐ）为然（rán），认为靠肉眼识别就能辨别对比度。不过后来给我抓到了几回，靠经验（yàn）和肉眼也会有（yǒu）漏网的时（shí）候啊。现在连我（wǒ）们的运营编辑都把这（zhè）个（gè）要了去，为（wéi）了保证自己做的（de）推（tuī）荐（jiàn）图（tú）片够醒目:D

注意（yì）文字颜色的对（duì）比度是件容易被忽略的（de）事。据我（wǒ）所知腾讯对一些产品的视觉风（fēng）格是做用户研究的，其中也包括色彩的定位。和（hé）臭鱼提到这个时候，他说自己也就（jiù）是（shì）看着，觉得对比度（dù）还算清（qīng）楚。在正常人在正常环（huán）境中可能还不觉得什么，但是如果在一（yī）些表现欠佳（jiā）的（de）显示环（huán）境、或者是色盲色弱、视（shì）力欠佳（jiā）的（de）人看（kàn）来，就显吃（chī）力了。即使是正常（cháng）人，面对对比度欠佳的文字长时间阅（yuè）读（dú）也会容易（yì）产生疲劳（láo），而浮躁的色彩会令（lìng）用户对（duì）产品的情感无（wú）形中产生影响（xiǎng）。

那么颜色的（de）对比度就是（shì）可（kě）用性工程师该（gāi）注意的（de）事（shì）？小兔觉得这还主要是视（shì）觉（jiào）设计师的责任（rèn）。

在大学读编排设计的（de）时（shí）候（hòu），老师（shī）就要（yào）求我们完成前看看（kàn）自己（jǐ）的设计（jì）在黑白环境中是什么样子。那时（shí）不（bú）论我（wǒ）的老（lǎo）师还是我自（zì）己，都没有什么关（guān）于可用性的认识，不曾想到过色盲色弱看到会如何，只是为了（le）保证作（zuò）品的表现力（lì）。但这却是一（yī）个简单有用的习惯，在这年（nián）头Photoshop里去色（sè）看一下就好了（le）。

回忆当初学到色彩构（gòu）成（chéng）的时候，也被老师叮嘱过注（zhù）意（yì）黄色这类高明度色彩的使用。虽然近两（liǎng）年已经不做视觉设计，但是大学中（zhōng）所（suǒ）学和国际商业美（měi）术（shù）设计师认证（zhèng），依然带（dài）给我（wǒ）不少现在（zài）工作中受用的东西。即使不谈可用性（xìng），这也是一（yī）个专（zhuān）业的视（shì）觉设计师应该注（zhù）意的问题。

最后总结几点建议（yì）：

◇ 视觉设计完成后（hòu），在灰度颜色模式下审查一（yī）下效果

◇ 注意网页上需（xū）要突（tū）出的、以及正文文字的对比度

◇ 可用性（xìng）不（bú）是一个人或（huò）者一个岗（gǎng）位的事（shì）情，视觉设（shè）计（jì）、交（jiāo）互设（shè）计、可用（yòng）性工（gōng）程师、开发人（rén）员乃至（zhì）PM都应（yīng）该去留心和注意的