使用 color-contrast() 函数可以自动从一组候选颜色中选择与背景色对比度最高的颜色。具体做法是在 color 属性中调用该函数，传入一个包含多个候选颜色的列表，并指定目标背景色作为第一个参数（或最后一个参数，取决于浏览器实现，目前标准草案通常将背景色放在最后）。浏览器会计算每个候选颜色与背景色的对比度，并返回对比度最高的那个颜色值。
如何为特定背景色选择最佳文本色？
要为特定背景色选择最佳文本色，只需在 color-contrast() 函数中列出你希望使用的候选颜色，并将背景色作为参考。例如，如果背景是深蓝色，你可以提供白色、浅灰色和黄色作为候选，函数会自动选出对比度最高的那个。
/* 假设背景色为 #0055ff */
.button {
background-color: #0055ff;
/* 候选颜色：白、浅灰、黄 */
color: color-contrast(#0055ff vs #ffffff, #e0e0e0, #ffff00);
}
上述代码中，#0055ff 是背景色，#ffffff、#e0e0e0 和 #ffff00 是候选文本色。浏览器会计算它们与背景的对比度，并应用对比度最高的颜色。通常白色 #ffffff 在深色背景上对比度最高。
如何处理多背景渐变的情况？
当背景是渐变时，color-contrast() 的行为可能因浏览器而异，但通常它会基于渐变的平均色或最暗/最亮部分进行计算。为了更精确的控制，建议先确定渐变中的主要背景色，或者使用 JavaScript 动态计算后设置 CSS 变量。
.gradient-box {
background: linear-gradient(135deg, #ff0000, #0000ff);
/* 注意：渐变背景下 color-contrast 行为未完全标准化 */
/* 建议：提取主色或使用 JS 辅助 */
color: color-contrast(#800080 vs #ffffff, #000000);
/* 这里 #800080 是红蓝混合的近似中间色 */
}
在渐变场景中，直接依赖 color-contrast() 可能不够可靠。更好的实践是使用 JavaScript 获取计算后的背景色，然后动态生成 color-contrast() 的值，或者预先定义好几种背景对应的文本色类。
当候选颜色对比度相同时，函数如何选择？
如果所有候选颜色与背景色的对比度相同，color-contrast() 通常会返回列表中的第一个颜色。这是为了确保确定性行为。开发者应避免提供对比度完全相同的候选颜色，除非有意让第一个颜色成为默认选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
