色彩对比分析程序 1.0 (中文)

本页导览:

这是甚么?
用途
使用方法
便捷键
声明
下载
关于

色彩对比分析程序是甚么东西?

这套软体能够一并检测前景色及背景色, 看看它们是否提供了良好的色彩可见性. 判断 "色彩可见性" 的方法, 是根据 World Wide Web Consortium (W3C) 所建议的算法来做的:

"如果两个颜色的亮度差异以及色彩差异都大于某个程度的话, 这两个颜色就被视为能提供良好的色彩可见性." 由 W3C 所建议的亮度差异应大于 125, 而色彩差异则应大于 500. 注: Hewlett Packard (HP) 也提供了一套线上的色彩对比验证工具, 这套工具用的也是 W3C 的算法, 但是他们所使用的色彩差异底限则是大于 400 即可; 这么一来, 前景色跟背景色搭配的可接受范围就变大了.

色彩亮度公式

色彩亮度系以下列公式计算所得:
((红色值 X 299) + (绿色值 X 587) + (蓝色值 X 114)) / 1000 背景色亮度与前景色亮度的差异应大于 125.
注: 这个算法系由转换 RGB 值为 YIQ 值的公式中所取得. 这个亮度值得出了色彩的知觉亮度.

色彩差异公式

色彩差异系以下列公式计算所得:
((红色值 1, 红色值 2) 的最大值 - (红色值 1, 红色值 2) 的最小值 ) + ((绿色值 1, 绿色值 2) 的最大值 - (绿色值 1, 绿色值 2) 的最小值 ) + ((蓝色值 1, 蓝色值 2) 的最大值 - (蓝色值 1, 蓝色值 2) 的最小值 ) 背景色与前景色的色彩差异应大于 500.

回到页顶

用途

这个色彩对比分析程序 (CCA) 对于协助判断网页文字的易读性, 以及图片里的文字的易读性来说, 特别好用.

评估是否符合网站内容亲和力指导原则 1.0 中的检查要点 2.2

WCAG 1.0 中的检查要点 2.2 要求

"前景色与背景色的搭配组合, 即使在色盲患者的眼中, 或在黑白屏幕里, 都应该要能提供充足的对比."

您可以用 CCA 来检测色彩搭配, 看看它们是否符合 W3C 所建议的算法中, 所谓 "充足的对比".

回到页顶

使用 CCA

使用者接口含有四个部分

选择色彩
结果
色盲结果
选项与说明选单

1. 选择色彩

选择色彩控制面版分成两个部分 (前景与背景), 每个部分都提供了三种选择施测色彩的方法. 选择色彩的使用者接口

下拉式选单里的调色盘. 您可以用这个调色盘来测试并选择适宜的色彩搭配. 底下 (较小的) 调色盘会从目前所选择的基底色彩中, 衍生出 10 个不同明暗程度的色彩; 基底色彩位于最左上角, 演变出多种不同的透明度. 上面那一列会仿真成在白色底色上的不同透明度, 而下面那一列则是在黑色底色上. 上面那一列的透明度值分别为 100% 不透明, 75%, 50%, 25% 和 10%; 下面那一列的第一个则从 85% 开始. 这个调色盘对于测试基底色彩较亮或较暗的色彩时很有用, 这些不同明暗的衍生色彩可能对于改善色彩搭配的可见性会有所帮助. 注: 这项功能是由色盘建立程序所启发的.
在文字框里 (用十六进位制) 输入色彩值. 当您想直接测试某个 Hex 值的色彩时会很有用.
使用放大色彩取样器, 从网页 (或屏幕上任何地方) 取样以得到色彩.
当您想要快速取样, 检查并取得色彩的 hex 值时会很有用. 一旦色彩取样按钮被按下后, 在鼠标光标周围就会出现一块放大显示的区域; 鼠标光标尖端所指的色彩, 将汇出现在调色盘选择区
一旦以色彩取样器选取色彩 (按一下鼠标左键, 或者按一下键盘上的 'Enter' 键) 后, 其 hex 值就会出现在 'hex 值' 的文字盒中, 而且结果部分也会马上更新, 以反映目前色彩搭配的亮度差跟色彩差.
注: 如果要精细控制光标的话, 也可以用键盘上的方向键.

2. 结果

结果的部分又分成摘要结果及详尽结果. '摘要结果' 会指出亮度差异及色彩差异的数值. 如果两个项目都通过检测的话, 就会出现一个绿色勾勾; 如果有任何一项检测没有通过的话, 就会出现一个红色叉叉. '详尽结果' 会显示出每一个检查中所得的数值, 该检测项目的筛选标准, 以及目前的对比情况是否足够.
注: 摘要结果及详尽结果中的文字都可以加以选取并复制. 对比分析程序的结果部分

3. 色盲结果

如果您核选了 '显示色盲患者眼中的对比结果' 核选框的话, 就会显示出 '正常视觉' 以及三种色盲 (红色盲, 绿色盲, 蓝黄色盲) 的摘要结果显示色盲结果注:针对三种色盲, 判断色值转换的方法系根据 Hans Brettel, Francoise Vienot 以及 John Mollon 刊登于 Journal of the Optical Society of America V14, #10 pp2647 的论文中所提出的算法.特别感谢 Vischeck 的人大方地让我们能直接取得他们实做 Brettel 算法的程序源码.

4. 选项与说明选单

从选单里选择 '永远置于最上层' 的话, 就会让 CCA 窗口保持在所有其它窗口之上. 从选单里选择 '字体' 的话, 则会开启一个对话盒, 让您变更用于 CCA 的文字卷标及内容的字体.
注: 选择某些字体或尺寸时, 可能会截断文字内容. 选项选单

从选单里选择 '说明' 的话, 说明选单就会在浏览器窗口中开启 CCA 的文件网页.注: 您得先连上网际网络, 才能看到这份文件.

回到页顶

使用键盘操作

色彩对比分析程序便捷键
功能	按键
开启前景调色盘	F9
开启背景调色盘	F10
在调色盘中移动	方向键或跳位 (tab) 键
启用前景色彩取样器	F11
启用背景色彩取样器	F12
移动色彩取样器	方向键
在取样器或调色盘中选取色彩	Enter

使用注意事项之声明:

本色彩对比分析程序系免费软体.

当您取用本色彩对比分析程序时, 即表示您已阅读过, 理解并同意随附于本色彩对比分析程序之使用声明.

THIS SOFTWARE IS BEING PROVIDED "AS IS", WITHOUT ANY EXPRESS OR IMPLIED WARRANTY. IN PARTICULAR, THE NATIONAL INFORMATION AND LIBRARY SERVICE (NILS) DOES NOT MAKE ANY REPRESENTATION OR WARRANTY OF ANY KIND CONCERNING THE RELIABILITY, QUALITY, OR MERCHANTABILITY OF THIS SOFTWARE OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. ADDITIONALLY, NILS DOES NOT GUARANTEE THAT USE OF THIS SOFTWARE WILL ENSURE THE ACCESSIBILITY OF YOUR WEB CONTENT OR THAT YOUR WEB CONTENT WILL COMPLY WITH ANY SPECIFIC WEB ACCESSIBILITY STANDARD.

本著作系以创意公用授权条款授权公众使用.