对比度检查器
WCAG 2.1 四档判定，色盲模拟，前景色优化建议。
4.48
对比度（WCAG 2.1）
AA 普通文本 (≥4.5)
不通过
AA 大文本 (≥3.0)
通过
AAA 普通文本 (≥7.0)
不通过
AAA 大文本 (≥4.5)
不通过
建议：背景上改用 #000000 作为文字色，对比度可提升到 21.00。
色盲模拟（前景色在三种色觉下的观感）
红色盲
绿色盲
蓝色盲
使用说明
这个工具解决什么问题
文字能不能看清,不该靠肉眼「感觉还行」。视力弱、屏幕差、强光下用机的用户比想象中多,WCAG 把「看得清」量化成对比度数字,网页可达性审查也拿它当硬标准。这个工具填两个颜色,四档达标线直接判定,还有色盲模拟帮你看得比数字更全。
核心能力
四档判定:WCAG 2.1 的 AA 与 AAA、普通与大文本,对比度数值逐档对照,达标与否一眼见。色盲模拟:按 Machado 矩阵模拟三类色觉缺陷下的显示效果,数值之外的观感有据可查。前景色建议:对比度不够时,给出能达标的前景色调整方向。即时计算:改色即算,纯浏览器本地完成。
使用建议
正文颜色至少过 AA,按钮与链接这类关键交互元素从严;深色模式单独测一遍,别沿用浅色模式的配色;品牌色作文字色不达标时,加深一档比换色更保品牌感。
计算纯浏览器本地运行,不上传服务器;达标线是下限不是上限,正文尽量往 AAA 靠,阅读体验差异立竿见影。
常见问题
AA 和 AAA 分别要求多少?
普通文本 AA 要 4.5 比 1,AAA 要 7 比 1;大号文本(AA 口径为 18.66px 粗体或 24px 以上)AA 要 3 比 1,AAA 要 4.5 比 1。正文至少过 AA,长期阅读的正文冲 AAA 更稳妥。
色盲模拟有什么用?
同样的前景背景,红绿色弱用户看到的对比与常人不同,数值达标不等于他们都看得清。Machado 矩阵模拟三类色觉缺陷下的观感,帮你在「数字达标」之外确认「人真看得清」。
对比度不达标怎么办?
优先调深文字或调浅背景,微调明度往往几步就达标;拿不准时用工具的前景色建议,它给出当前背景下能达标的最浅文字色。纯装饰元素不受此约束,别为达标牺牲层级设计。