reamweaver的CSS面板分类

type(类型)

background(背景)

block(区块)

box(方框) 或盒子意思

border(边框)

list(列表)

positioning(定位)

extensions(扩展)

共八个部分

1. type(类型)

type面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。

注意：属性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。

(1)font-family：设置字体系列。什么叫字体系列呢?是指对文字设定几个字体，当遇到第一个字体不能显示的文字时会自动用系列中的第二个

字体或后面的字体显示。

注意:一般英文字体我们用"Verdana, Arial, Helvetica, sans-serif"这个系列比较好看。如果不用这些字体系列，你就需要自己编辑字体系列，

也可以直接手动在下拉框里写字体名，字体之间用逗号隔开。中文网页默认字体是宋体, 一般就空着不要选取任何字体。

默认值： not specified(取决于浏览器,系统默认的字体, 如: 微软雅黑)

注意：

1.如果有汉字, 那么我们要加引号

2.如果有多个英文字母组成的单词, 我们也要加引号; "microsoft yahei" 中间用空格隔开

3.font-family:"黑体","宋体","华文隶书"; 首先找黑体, 没有黑体找宋体...

为了避免在CSS中使用 font 或 font-family 设置中文字体时乱码, 可以使用 Unicode 编码来表示字体。

/* 示例:使用Unicode字体编码设置字体为"微软雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定义文字的大小。你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个相对的字体大小。

最好使用pixels作为单位，这样不会在浏览器中文本变形。一般字体用比较标准的12px或14px, 默认值为16px。

注意：CSS中长度的单位分绝对长度单位和相对长度单位:

绝对长度单位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根据显示的实际尺寸来确定长度。

此类单位不随显示器的分辨率改变而改变。

相对长度单位有：

px：(像素)根据显示器的分辨率来确定长度。

em：当前文本的尺寸。例如：{font-size:2em}是指文字大小为原来的2倍。

比如自身font-size: 30px; 那么此时1em=30px;

ex：当前字母"x"的高度，一般为字体尺寸的一半。

%：是以当前文本的百分比定义尺寸。例如：{ font-size:300%}是指文字大小为原来的3倍。

small、large：表示比当前小一个级别或大一个级别的尺寸。

默认值：medium(标准大小)

(3)font-style：定义字体样式为normal、italic、oblique。默认设置为normal。

注意： italic 斜体 oblique 歪斜体 italic和oblique实际效果是一样的。

默认值:normal

(4)line-height：设置文本所在行的行高。默认为normal。可以是行内元素、行内块元素, 通常与height设置的高度值相同, 可以做到垂直居中的作用。

你也可以自己键入一个精确的数值并选取一个计量单位。

比较直观的写法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行间距,相对数值,1.5倍行距,*/ 可有效的避免文字发生重叠

默认值： normal

(5)text-decoration：在文本中添加underline(下划线)、overline(上划线)、line-through(中划线)、blink(闪烁效果)。

这些效果可以同时存在，将效果前的复选框选定即可。

注意：链接的默认设置是underline，我们可以通过选none去除下划线。blink(闪烁效果)只在mozilla浏览器里可以看到, IE、opera不支持

默认值： none

(6)font-weight：给字体指定粗体字的磅值。

normal 默认值。定义标准的字符。

bold 定义粗体字符。

bolder 定义更粗的字符。

lighter 定义更细的字符。

100

200

300

400

500

600

700

800

900

inherit 规定应该从父元素继承字体的粗细。

定义由粗到细的字符。400 等同于 normal, 而 700 等同于 bold。

默认值: normal

(7)font-variant：允许你选取字体的变种, 选small-caps(小型大写字母)时, 此样式区域内所有字母大写。

normal表示正常的字体, 为默认值；

默认值: normal

(8)text-transform：将选区中每个单词的第一个字母转为大写, 或者令单词全部大写或全部小写。

参数：capitalize(单词首字母大写)、uppercase(转换成大写)、lowercase(转换成小写)、none(不转换)。

默认值：none

(9)color：定义文字颜色。包括对表单输入的文字颜色。

CSS中颜色的值有三种表示方法：

#RRGGBB格式，是由红绿蓝三种颜色的值组合，每种颜色的值为"00 – FF"的两位十六进制正整数。

例如：#FF0000表示红色，#FFFF00表示黄色。

rgb(R,G,B)格式, RGB为三色的值, 取0~255, 例如：rgb(255,0,0)表示红色, rgb(255,255,0)表示黄色。

用颜色名称。CSS可以使用已经定义好的颜色名称。例如：red表示红色, yellow表示黄色。

颜色值的缩写:

p{color:#000000} 可以缩写为：p{color:#000}

p{color:#336699} 可以缩写为：p{color:#369}

默认值： not specified

color: transparent; 透明色

rgba() 解释: rgba(红0-255, 绿0-255, 蓝0-255, 透明度0-1)

注意: 如果文字的颜色通过单独的类选择去设置没有改变颜色, 则应该通过组合选择器(.header .top .topR .blue)去设置, 改变它的优先级。

2. background(背景)

background面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。

一般是对body(页面)、table(表格)、div(区域)的设置。

(1)background-color：设置元素的背景色。包括对input表单输入框的背景颜色;

默认值: transparent(背景颜色为透明)

rgba() 解释: rgba(红0-255, 绿0-255, 蓝0-255, 透明度0-1) 一般用于背景色

(2)background-image：设置元素的背景图像。

默认值:none

CSS3支持多重背景图,只要加上一个url指定图片路径,并用逗号(,)将两组url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：确定背景图像是否以及如何重复。

repeat 默认值。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

inherit 规定应该从父元素继承background-repeat属性的设置。

注意：如果定义的元素的body，可以控制页面背景是否重复。

默认值: repeat

(4)background-attachment：固定背景图像或者跟随内容滚动。

参数fixed表示固定背景(不随屏幕滚动而滚动，决定背景图像是否要固定在原来的位置), scroll表示跟随内容滚动的背景。

注意：如果定义的元素的body, 可以使页面背景固定。

默认值: scroll

(5)background-position(X)：指定背景图像的水平位置。

可以指定为left(左边), center(居中)，right(右边)；

也可以指定数值，如20px是指背景距离左边20象素。

background-position(Y)：指定背景图像的垂直位置。

可以指定为top(顶部), center(居中), bottom(底部)；也可以指定数值。

background-position属性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您仅规定了一个关键词，那么第二个值将是"center"。

注意:采用英文单词的水平位置和垂直位置的属性值可以调换

x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。

xpos ypos 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值，另一个值将是50%。

您可以混合使用 % 和 position 值。

默认值：0% 0%

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>颜色渐变的文字</title>
<script language="javascript">
function Delta(sHex1,sHex2,iNum){
//计算每个字的变化量
var iHex1 = parseInt("0x"+sHex1);
var iHex2 = parseInt("0x"+sHex2);
return (iHex2 - iHex1)/(iNum-1);
}
function Colorful(sText,sColor1,sColor2){
if(sText.length<=1){
//如果只有一个字符，渐变无从谈起，直接输出并返回
document.write("<font style='color:#"+sColor1+";'>"+sText+"</font>");
return;
}
//RGB三色分离，分别获取变化的小量delta
var fDeltaR = Delta(sColor1.substring(0,2),sColor2.substring(0,2),sText.length);
var fDeltaG = Delta(sColor1.substring(2,4),sColor2.substring(2,4),sText.length);
var fDeltaB = Delta(sColor1.substring(4,6),sColor2.substring(4,6),sText.length);
var sColorR = parseInt("0x"+sColor1.substring(0,2));
var sColorG = parseInt("0x"+sColor1.substring(2,4));
var sColorB = parseInt("0x"+sColor1.substring(4,6));
for(var i=0;i<sText.length;i++){
document.write("<font style='color:rgb("+Math.round(sColorR)+","+Math.round(sColorG)+","+Math.round(sColorB)+");'>"+sText.substring(i,i+1)+"</font>");
/*每输出一个字符，颜色的三个分量都相应的变化
当字符输出完成时，正好由sColor1变成sColor2*/
sColorR += fDeltaR;
sColorG += fDeltaG;
sColorB += fDeltaB;
}
}
Colorful("春节(Spring Festival)中国民间最隆重最富有特色的传统节日，它标志农历旧的一年结束和新的一年的开始 。春节一般指除夕和正月初一 。但在民间，传统意义上的春节是指从腊月初八的腊祭或腊月二十三或二十四的祭灶，一直到正月十五，其中以除夕和正月初一为高潮。在春节期间，我国的汉族和很多少数民族都要举行各种活动以示庆祝。这些活动均以祭祀神佛、祭奠祖先、除旧布新、迎禧接福、祈求丰年为主要内容。活动丰富多彩，带有浓郁的民族特色。","FF3300","3366FF");
</script>
</head>
<body>
</body>
</html>

用时直接调用函数Colorful(),输入文字以及起始颜色和终止颜色值。

辑导语：如今人们已经习惯于使用各种智能设备，然而全球有3亿左右残障人群，他们的需求不该被忽略，于是无障碍设计便应运而生。本文作者从色盲用户的角度出发，分享如何做色彩无障碍设计，一起来学习一下吧。

随着科技的普及和快速发展，人们越来越频繁和习惯于使用智能设备，然而全球有3亿左右的残障人群， 无论是从科技还是法律的角度，这群人的需求不该被忽略。

于是无障碍设计应运而生。无障碍具体可拆分为视觉、听觉、操作、认知、言语交流无障碍. 而色彩是视觉中很重要的部分，我们的世界是五彩缤纷的，不同的色彩被赋予不同的意义，对于色觉障碍人群，我们该如何包容性地设计，让他们的生活更加便利和美好呢？

无障碍设计无处不在，举个例子：Spotify有两种播放模式，一个是随机播放，一个是循环播放.它通过改变图标的颜色为绿色，表明激活状态，但是如果仅仅只是改变颜色，对于色盲用户来说，不容易识别，因为原本鲜艳的绿色在他们看来是暗淡的：

但是加上小绿点之后，不去依靠颜色也很容易判断当前的状态：

再举个例子：有一款名为FODMAP的应用程序值得借鉴，FODMAP是在肠道中不能正确吸收的糖， 这是一款通过列出食物中各种含糖量，来给用户提供饮食参考的软件。

软件中用红黄绿表示不同的FODMAP等级，但是这让色盲用户感到很困扰：

幸运的是，这个软件的设置中，可以打开色盲帮助选项， 打开后你看到的界面就变成了这样：

用显而易见的符号替换颜色，无论对色盲用户还是普通用户，都很友好。

再举个例子， 英国的在线足球网站在2012年时是这样的：

色盲用户根本无法分辨输赢情况，此举无疑是白白流失了全国的色盲用户。后来，他们也意识到了问题，于是现在的设计时这样的：

每个颜色色块中填入字母，W代表赢，L代表输，D代表平局，色盲用户也可以轻松获得信息。

但是目前无障碍的普及程度并不高，色盲用户在日常生活中仍然面临很多的问题，比如在商店买衣服问题、在线选座问题、无法使用色彩标签等等。本文将带你全面地了解如何做好色彩无障碍设计。

01 色盲类型

色盲的频率相当高，十二分之一的高加索人（8%），二十分之一的亚洲人（5%）和25分之一的非洲男性（4%）是所谓的“红绿”色盲。它比AB血型更常见，据统计，平均每12名男性中就有1人有某种形式的色盲， 每200名女性中就有1人， 占人口的4.25%。麦当劳每天为300万色盲客户提供服务。亚马逊每天超过110万客户是色盲。

色盲远比我们想象中的数量要庞大的多，所以设计色盲友好的互联网产品，这件事情应当被重视和完善。

正常的彩色视觉需要用到三种功能正常的锥形细胞，红色、绿色和蓝色锥形细胞，根据三色锥形细胞的是否缺失，又可以将色盲分为全色盲，双色色盲和三色色盲。

1. 三色色盲

三色色盲拥有三种锥形细胞， 但是其中一种锥细胞感知的光略微偏离对齐，根据哪种锥形细胞类型“有缺陷”，产生三种不同类型的效果，并且还具有不同的严重性。

三种情况分别是是红色弱，即对红光的敏感性降低，绿色弱: 对绿光（最常见的色盲形式）的敏感性降低，以及蓝色弱: 对蓝光的敏感性降低（极为罕见，只有0.001%的发生率）。

对某种类型光的感知力，有敏感性降低的，也有完全感知不到的，程度不一。

因为红色和绿色锥形细胞感知到的光谱部分明显重叠，因此红色和绿色色弱都难以分辨红色、绿色、褐色和橙色， 所以在诊断的时候常常被统称为“红绿色盲”，他们对蓝色和紫色以及多种颜色的组合也常常难以区分。

蓝色弱很难分辨蓝色VS黄色，紫罗兰VS红色，蓝色VS绿色. 蓝色弱眼中是红粉色，黑白色和青绿色的世界。

1）红色色弱

2）绿色色弱

3）蓝色色弱

2. 双色色盲

双色色盲只有两种颜色的锥形细胞，第三种类型的细胞完全缺失. 所以，红色盲完全无法感知到红色，绿色盲完全无法感知到绿色，蓝色盲完全无法感知到蓝色。

同时丧失了红色和绿色感知力的人生活在暗绿色的世界，所以蓝色和黄色会非常突出。

大约1/2的三色色盲看到的世界与双色色盲看到的很相似，但是三色色盲色彩感知力受光照影响较大，在良好的光照下，他们对色彩的感知力就更好，反之久更糟糕。总的来说， 双色色盲在辨别色彩方面比三色色盲更容易些。

为了让大家更清晰的了解不同色盲眼中的世界，这里做一些展示：

1）红色色盲

2）绿色色盲

3）蓝色色盲

3. 全色盲

全色盲完全没有任何一种颜色细胞，他们眼中世界是完全的黑白色，就像是黑白电视机那样.但是我们在做产品无障碍时，基本不会考虑这一类人群，因为全色盲发生的概率实在是太低了，33000人中仅有1人，他们的生活因此有很多阻碍，在正常的光照条件下，也需要戴深色墨镜。

02 WCAG 2.1指南是什么？

1. 什么是WCAG

WAI制定了几项W3C建议，包括：

• Web内容可访问性指南（Web Content Accessibility Guidelines）， 即 WCAG（2.1）
• 创作工具辅助功能指南（Authoring Tool Accessibility Guidelines）， 即ATAG（2.0）
• 用户代理辅助功能指南（User Agent Accessibility Guidelines），即UAAG（2.0）
• 可访问的丰富互联网应用程序（the Accessible Rich Internet Applications suite of web standards），即WAI-ARIA

WCAG有三种评级: A、AA和AAA，标准从低到高：

1. A是最低等级的需求：这是所有的网站、软件和数字内容都应该做到的，可以被认为是及格线。
2. AA：补偿20/40（通常被报告为大约80岁老年人的典型视力）视力丧失的用户的对比度敏感性损失，也是大多数网站可以接受的标准，电脑端和手机端的辅助技术都可以运行良好。
3. AAA：补偿视力损失为20/80（通常使用辅助技术来访问他们的内容， 辅助技术通常具有对比度增强， 以及内置放大能力）或以上的低视力用户的对比度敏感性损失，这个等级是无障碍的黄金级别，几乎一切都能够达到无障碍，包括一些很细小的环节。

2. WCAG传送门

WCAG2.1详细指南完整版可查看: https://www.w3.org/TR/WCAG21/

快速参考WCAG标准: https://www.w3.org/WAI/WCAG21/quickref/？currentsidebar=%23col_overview#use-of-color

WCAG关于颜色的要求描述:https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

03 色彩无障碍的八个要点

1. 对比度达到AA评级

WCAG中将字体分为一般字体和大字体。

大字体是这样定义的:“大于等于18点常规体或者大于等于14点的粗体，如果是中日韩的语言，就要换算成同等大小”，除却大字体之外的就是一般文字。

AA评级对于一般文字来说，文字和背景的颜色对比度不少于4.5:1的对比度;对于大字体和（如图标、表格等等）组件的要求就没那么严格，只要颜色对比不低于3:1即可。

如果带有文本的按钮也有彩色边框，因为边框没有提供辅助信息，所以对边框没有对比度要求，只要该文字符合AA评级即可。

2. 不要只依赖颜色来区分不同含义

颜色在特定的语境中，会被赋予特殊的含义，如常见的红色代表警告，绿色代表合格通过的意思等等，而患有色彩缺陷、视力衰退的老龄化群体、还有使用单色阅读器（如kindle纸墨水）的人都可能会因此遗漏了颜色所传达出的重要信息。

同时在用颜色表达某种信息时，为了确保所有的用户都能接受到信息，需要添加另一种视觉形式，下面给大家举例说明：

1）文字

文字是最容易让色盲用户了解到颜色含义的元素，也是我们首先会考虑到的。

一个典型例子是表单字段上的错误状态， 红色通常用于表示文本字段中的错误， 但是标红不足以引起色盲用户的注意，因为从他们的视角看， 红色的字体在一群黑色的字体中显得很暗， 很难分辨出来。因此，你需要一个额外的提示，例如文本或图标，来指示错误状态。

2）图标

图标是使用频率很高的组件， 一些通用图标的含义甚至不需要Tooltip来解释，用户就能一眼识别， 比如设置、警告、成功等等图标，举个例子：许多B端界面会通过不同的语义颜色，告知用户某个流程的状态，但是对于色盲用户来说，识别颜色对应的状态图例是一件很艰难的事情，但是如果添加图标辅助信息，一切就变得容易多了！

3）明暗对比

这一点常常被大家忽略.如果两种颜色的色调不同，但是拥有强烈的明暗对比，那么在这里， 明暗对比也算是另一种视觉辅助形式，只要这两种颜色的对比不低于3:1（AA）。

只有一种情况例外， 就是用户需要准确地识别一种特定的颜色，这个时候对比度就不能算在内。

4）符号

举个例子，标注红色的文字标签是必填项，出于无障碍的需要，我们可以在红色标签上打一个星号，这样即使注意不到颜色差异，看到星号也会意识到此项必填。

但是！大多数情况下，星号的尺寸很小（位于左上角），不容易被屏幕阅读器捕捉到，为了改善这样的情况，设计者可以增大星号的尺寸，以及为星号添加注释（Tooltip）， 这个注释是由开发者完成的， 不借助屏幕阅读器是无法捕捉这个信息。

5）数字

这是一个丙烯结构式，三个碳原子被标上了三种颜色（化学老师会教我们标记碳原子序号的规律，不过就假设这是老师在给一群初学者的课件吧），那么老师提问“黄色的碳原子和紫色的碳原子中间用的是什么键”，色盲学生可能就没办法辨别颜色所对应的碳原子了，但是如果标上序号，这样提问:“1号碳原子和2号碳原子中间用的是什么键？”，是不是所有的学生就一目了然了？

6）图形

减少使用颜色的数量，增加图形样式，这样盲人用户能够花费更少的力气在辨别颜色上。

7）图案

在显示图形或者图表时，可以提供一些图案供用户填充，色盲虽然对颜色不敏感，但是对于图案却非常容易察觉区别。

这里推荐几个提供大量图案样式的网站：Http://pattern.monster

交互式地图（付费使用）：https://www.arcgis.com/index.html

Figma图案填充插件：Hero Pattern for Image https://www.figma.com/community/plugin/743134103711120154

3. 图表中要注意的点

以折线图举例：

• 避免使用图例，尽量在图形旁边注释，因为盲人在距离拉远的时候，就更难去识别并且对应名字
• 避免使用细线条，建议组合不同的虚线/实线，虚线的间距差异化
• 关键数据点可以采用不同的几何图形标记，更便于识别

再以堆叠条形图为例：

• 使用饱和度高的颜色，避免使用饱和度低且相近的颜色
• 盲人尽管不能识别有些颜色，但他们对明暗和图案非常敏感，尝试用不同的图案代替颜色
• 在不同的图案之间，创造明暗对比

再举个伦敦地铁图和上海地铁图的例子：

4. 白色字体还是黑色字体

WCAG的标准被许多人奉为无障碍法则，但是有些情况下，并不适用。举个例子：你觉得黑色字体和白色字体在橙色的背景上，哪一种看起来更清晰？

相信有不少人觉得白色字体看起来更舒服，更清晰，但是WCAG的颜色标准却告诉我们，黑色达到了AAA的级别，而白色却连AA级别都没有达到：

不仅仅是我们，在很早之前，就有设计师对此产生疑惑，并做了用户调研。

Ericka Seastrand 曾在2019年做过一项用户调研，调研对象是20名色盲用户，测试问题是: 黑色还是白色的字体在该背景下更突出？ 最后的结果显示: 61%的用户认为白色字体更清晰。

这些用户也给出了具体的原因：

所以谨记：尽信书，则不如无书。WCAG的标准仅供参考，但是实际运用中，应当以用户的感受为参考，质疑精神是很可贵的！

5. 按钮二三事

1）灰色按钮

有些人认为不能够使用灰色的按钮，因为灰色给人以不可用的暗示，但是其实并没有领悟不可用状态的本质. 视觉深度才是帮助用户判断按钮状态的核心.活动状态是通过颜色对比度而不是色调传达的。

正常状态的按钮的文字与背景对比起来，看上去更接近和占主导地位，而不可用状态缺乏对比度，文字看起来在更远的地方。不过灰色按钮经常被用作二级按钮，主按钮都是需要使用彩色。

同样地，按钮的各种交互状态，只要对比度有差异性，能够传达视觉深度变化，就是符合无障碍的标准的，以Ant Design举例：

2）让你的主按钮最显眼

在大多数情况下，设计师们都是通过赋予主按钮颜色，吸引用户注意，但是在色盲用户眼中，主按钮的颜色差异很难被捕捉到，甚至在有些色盲眼中无法分辨颜色：

为了增加主按钮和次按钮的对比， 这个时候我们可以尝试：

• 增加主按钮尺寸的大小
• 把主按钮和次按钮放在不同的位置
• 描边、图标、字重差异化

6. 色彩组合黑榜

当你在为你的产品或者品牌选择色彩时，一定要避免下面的色彩组合：

7. 超链接文字

网页中超链接文本很常见，比如百度百科，如果只是用颜色区别超链接，对于有些色盲很难注意到这是一个超链接，他需要将鼠标滑过时，发现变成一只手，才能知道。

所以对于超链接文本，添加下划线是一个很好的方式：

8. 解决色盲买衣服难题

曾经看过一个色盲讲述自己买衣服的难题， 他来到商场，看到一件衣服，但是不确定这个衣服是什么颜色，可是衣服上的标签也没有写颜色，所以他只好硬着头皮去问商店里其他的人，承受着一些不解和怀疑的目光，如果这件衣服有清晰的颜色标签的话，就能轻松解决这个问题了。这一点对于购物网站来说，尤其重要。

04 如何制作色盲友好的PPT

1. PPT本身注意

1. 避免文本和对象被背景遮挡的情况。 例如，文本/对象和背景之间的亮度和饱和度应该有足够的对比度。避免组合亮度相同但色调不同的颜色。例如，绿色背景上的红色字符对色盲来说是不可读的。在深色背景上使用明亮的文本/对象，反之亦然。

2. 文本和对象尽可能粗或大，色盲人很难区分细线和小符号的颜色， 对于彩色文本，一定要使用粗体字体。

3. 小心使用红色和绿色，对于视觉正常的人来说，纯红色是明亮生动的颜色。但对于色盲来说，它就像蓝色或深绿色一样暗淡。特别是对于红色盲来说，深红色看起来几乎是黑色的。因此，避免在黑色背景上使用红色字符，包括黑板。但是有一些红色对色盲来说是鲜活的， 比如：

避免使用纯绿色，使用偏蓝一点的绿色。

4. 在深蓝色背景上无法看清：深红色、明亮的紫红色、细线条。

5. 在一堆黑色字体中，很难看到深红色强调的字体。

6. 尽量减少颜色的数量，可以使用不同的外形和少量容易识别的颜色的组合。

7. 保持颜色色调的对比的同时，也可以添加亮度的对比。

8. 使用种类少且容易识别的字体。

2. 演讲者要注意

尽量不要使用颜色的名字交流信息. 在演讲时，去指代ppt上的某个东西时，不要说“那个红色的细胞”，尝试描述除了颜色信息之外的，比如“那个红色的方形的位于PPT左上角的细胞”。

3. 设备和环境的选择

• 选择绿色激光笔，由于红色激光笔使用长波长的光， 色盲通常很难看到指向哪里最近， 绿色激光笔可用， 色盲和非色盲都很容易看到。
• 1兆瓦的光线适合普通研讨室，如果是很大很大的礼堂，可以使用5兆瓦的灯光。

05 色彩无障碍工具推荐

1. 色盲模拟工具

Stark: 色盲模拟器和颜色对比度检查器网站， sketch/figma/XD插件 https://www.getstark.co

Color Oracle: 一款免费的色盲模拟软件，支持Windows，Mac 和 Linux. https://colororacle.org

Sim Daltonism: 一款色盲模拟软件，可以选择不同类型的色盲.只有mac版本. https://michelf.ca/projects/mac/sim-daltonism/

Toptal:一款在线模拟色盲工具. https://www.toptal.com/designers/colorfilter

2. 颜色对比度工具

Color-contrast-checker: 颜色对比度检查器，提供快速调节， figma插件 https://www.figma.com/community/plugin/733159460536249875/A11y—Color-Contrast-Checker

Tanaguru Contrast Finder: 检测颜色对比度，如果你的颜色没有达到要求，还会提供新颜色建议. https://contrast-finder.tanaguru.com

Color Review: 提供两种颜色组合在一起的预览，检测结果失败还会提供颜色建议https://color.review

color contrast checker from polypane: 提供颜色对比和修改建议. https://polypane.app/color-contrast

Accessible colors: 提供颜色对比、修改建议、还可以输入字体大小和字重. https://accessible-colors.com

3. 为你的产品搭建无障碍色板

Accessible color palette builder:选择5个颜色，网站会通过分析这些的颜色的排列组合，判断你的色板是否符合无障碍标准https://toolness.github.io/accessible-color-matrix

contrast grid:通过在左侧边栏手动添加/删减行列、编辑行列的色值，为您提供这些颜色排列组合的对比度结果，非常高效而且一目了然https://contrast-grid.eightshapes.com

Cloudflare color tool:当你不知道选择什么颜色毫无头绪时，你可以尝试这个网站！它会帮你提取来自某个链接、某个图片的颜色色板，当然你也能输入色值.然后把这些颜色拖到对应的功能（底色、主色、背景色、描边色），你就可以预览下你的产品用了这个色板大概是什么样子了.它同时也提供这些颜色的排列组合分析https://color.cloudflare.design

06 结语

少数群体如色盲、老龄化群体、残障群体等等，在近些年来，他们对无障碍使用互联网的需求，越来越受到关注，也许你在现在不需要无障碍技术的帮助，但是随着你变老，在未来的某个阶段也许无障碍技术就会大大的帮助你。

色彩无障碍只是无障碍的一小步，但是却是证明无障碍普及进步的一大步。

参考文章:

https://medium.com/inside-design/a-guide-to-color-accessibility-in-product-design-516e734c160c

https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness

https://modus.medium.com/the-myths-of-color-contrast-accessibility-4b7fcba77317

https://jfly.uni-koeln.de/color

https://www.bounteous.com/insights/2019/03/22/orange-you-accessible-mini-case-study-color-ratio

本文由郝小七指导http：//www.woshipm.com/u/917803

本文由 @自来卷夏忆 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议