今早打（dǎ）开腾（téng）讯ISD的博（bó）客，看到一篇（piān）新的文章，《迷你屋视觉（jiào）规范（fàn）简介》，赶紧看（kàn）了来学（xué）习。不（bú）过给我抓到问题咯，臭鱼不介意（yì）我在（zài）这说下吧：

这套规范（fàn）中的，按钮的第一级、第（dì）二级和文字中（zhōng）用（yòng）于突出的（de）第三（sān）种，红底白字和白底红字（zì）都不符（fú）合W3C的对比度规范（fàn）。原本需要突出（chū）和（hé）强调的文（wén）字反而可（kě）能识别不易。

截图中使用对比度检查器（qì），基于W3C的WCAG Guideline 1.4.4和1.4.2中有相应的规定，工具的（de）下载和（hé）具（jù）体（tǐ）说（shuō）明可见油茶会（huì）的这篇。

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

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

那么颜色的对比度就是（shì）可用性工程师该注（zhù）意的事？小兔觉得这还主要（yào）是视（shì）觉设计（jì）师的（de）责任。

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

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

最后总结几点建（jiàn）议：

◇ 视觉设计完（wán）成后，在灰度颜（yán）色模式下审查（chá）一下效果

◇ 注意网（wǎng）页上需要（yào）突出（chū）的、以及正文文字（zì）的（de）对（duì）比度

◇ 可用性不是一个人或者一（yī）个岗位（wèi）的事情，视（shì）觉设计、交互设计、可用性工程师、开发人员乃（nǎi）至PM都应该去（qù）留心和注意的（de）