颜色

对比度检查

按 WCAG AA 与 AAA 标准检查前景色和背景色的搭配。

前景色

背景色

大号标题文字

18 像素的普通正文，多数阅读场景使用的字号。

14 像素的小字，最难达标的情况。

2.38对比度

AA 普通文字

需要 4.5:1

未通过

AA 大号文字

需要 3:1

未通过

AAA 普通文字

需要 7:1

未通过

AAA 大号文字

需要 4.5:1

未通过

AA UI 组件

需要 3:1

未通过

相关指南

HEX、RGB、HSL 与更新的颜色空间HEX、RGB、HSL、LCH 和 OKLCH 彼此之间是什么关系，为什么用 HSL 做出来的配色在中间档会发浑，以及色域裁剪和 alpha 合成会如何改变你最终得到的颜色。不靠猜也能达到 WCAG 的颜色对比度要求对比度比值到底测量的是什么，文本和界面组件的 AA 与 AAA 阈值分别是多少，以及那些每次都悄悄不达标的白底灰字错误。

相关工具

在 HEX、RGB、HSL 和 CSS 写法之间转换颜色。

颜色

调色板生成

从一个基础色生成深浅层次与配色方案。

颜色