3月 25, 2026
行业资讯
15
本页内容
显示背景色和前景色没有足够高的对比度
请确保所有文本元素的前景文本与背景颜色之间具有足够的色彩对比度。
成功准则：请确保小号文本的色彩对比度至少达到 4.5:1，大号文本至少达到 3:1，即使该文本是图像的一部分也不例外。根据相关要求，大号文本的定义为 18pt（24 CSS 像素）或 14pt 加粗文本（19 CSS 像素）。注：若发现元素的色彩对比度为 1:1，则该元素将被视为“未完成”，需进行人工复核。
有些视力低下的人会遇到对比度低的情况，这意味着明亮或黑暗的区域并不多。 所有物体都倾向于呈现出相同的亮度，这使得很难区分轮廓、边界、边缘和细节。 亮度与背景太接近的文本可能难以阅读。
视力低下的人数几乎是完全失明的人数的三倍。 每十二个人中就有一人无法看见全部颜色光谱——在美国，约有 8% 的男性和 0.4% 的女性。 视力低下或色盲的人无法在对比度不够的情况下区分背景中的文字。
在背景中考虑到了颜色的透明度和不透明度。
前景中的颜色透明度和不透明度更难考虑和处理，因为：
- 前景和背景的颜色相同。
- CSS 背景渐变。
- CSS 伪元素中的背景颜色。
- 使用 CSS 边框创建的背景颜色。
- 与前景中的另一个元素重叠 - 有时这会因为棘手的定位而出现。
- 元素通过 CSS 移出视口。
打开Adobe Color协助工具https://color.adobe.com/zh/create/color-contrast-analyzer
设置文字颜色和背景颜色，如图所示
https://dequeuniversity.com/rules/axe/4.11/color-contrast?lang=zh
