对比度检查
填两个颜色，按WCAG的相对亮度公式算出对比度，并对照正文、大号文本、界面元素三条不同的门槛。
这行是大号文本的样子
这行是正文大小，用来判断实际阅读时够不够清楚。
按色彩关系推一组色
给一个基色和一种关系，算出成组色值。每块色板可以直接送进上面的对比度检查。
这几种关系各自适合什么
同类色
只改明度和饱和度，色相不动。最安全，也最容易做出层次，适合需要大面积阅读的界面。缺点是缺少提示点，强调信息需要靠字重或边框。
邻近色
色相相差三十度左右，整体有倾向但不冲突。适合做同一组功能内部的区分，比如图表里相关的几条数据。
互补色
色相相差一百八十度，对比最强。适合单个强调点，不适合两块大面积并置，否则边界会产生视觉上的躁动。
分裂互补与三等分
比纯互补缓和，又保留对比。适合需要三到四类并列、彼此都要区分开的场合，比如多系列图表或分类标签。
别只靠颜色传达信息
红绿是最容易出问题的一对
常见的色觉障碍类型里，红绿方向的区分最容易受影响。用红绿表示成功与失败时，同时加上图标或文字，不要只换颜色。
用明度差兜底
两个颜色如果只有色相差、明度几乎相同，在色觉障碍或灰度打印下会糊成一块。先保证明度差，色相差只是加分。
图表里加上形状或纹理
折线用虚实区分，柱状用斜纹区分，散点用形状区分。这样即使颜色失效，信息仍然能读出来。
先过对比度再谈好看
一个方案如果连正文门槛都过不去，后面的美感讨论没有意义。把对比度当成硬性入场条件。
算法说明
这里写清楚页面上的数字是怎么来的，方便你自己复核。
相对亮度
把sRGB的每个通道归一化到0到1，低于阈值的除以12.92，高于阈值的按加0.055除以1.055后取2.4次幂，再按0.2126、0.7152、0.0722加权求和。依据是WCAG 2对相对亮度的定义。
对比度
较亮者加0.05，除以较暗者加0.05。结果范围是1比1到21比1，纯黑配纯白正好是21比1，可以用来验证本页算得对不对。
门槛取值
正文的AA门槛为4.5比1、AAA为7比1；大号文本的AA为3比1、AAA为4.5比1；界面元素与图形的最低要求为3比1。这是WCAG 2给出的数值。
配色换算
基色先转成色相、饱和度、明度，按所选关系旋转色相或调整明度，再转回十六进制。这是几何换算，不含任何主观偏好权重。
对比度达标只说明可读性的下限过关，不代表配色合适。颜色在不同屏幕、不同环境光下的观感差异，仍然需要你自己在真实设备上看。