color-contrast()函数是CSS的一个实验性函数,旨在帮助开发人员优化文本颜色和背景颜色之间的对比度,以提高可访问性和可读性。
该函数接受两个颜色参数:前景色和背景色,并返回一个新的前景色,该前景色具有足够的对比度以与给定的背景色相对。
具体来说,color-contrast()函数计算前景色和背景色的相对亮度,并使用相对亮度差异来计算对比度比率(通常称为 “CR”);根据 WCAG(Web Content Accessibility Guidelines)中定义的标准,文本颜色和背景颜色之间的对比度比率应达到4.5:1或更高才能符合 AA 级可访问性标准。
下面是一个使用color-contrast()函数调整前景色的例子:
h1 {
color: color-contrast(black, white);
}
这告诉浏览器在黑色文本和白色背景之间自动选择具有足够对比度的前景色。请注意,color-contrast()函数目前仅在一些浏览器中得到支持,并且应谨慎使用,以确保向后兼容性。