使用scss内置的color-contrast()函数可以自动计算wcag对比度并返回最合适的文本颜色。该函数接收一个背景色和一个候选颜色列表，根据wcag 2.1 aa级标准（对比度至少4.5:1）自动选择对比度最高的颜色。只需在样式中调用此函数并将背景色作为参数传入，即可确保生成的css文本颜色满足可读性要求。
color-contrast()如何根据背景色选择最佳文本颜色
color-contrast()函数通过比较候选颜色与背景色的相对亮度来计算对比度。它接受一个背景色和多个候选颜色，返回其中对比度最高的那个颜色。如果未指定候选颜色，默认使用黑色和白色。该函数遵循WCAG 2.1 AA级标准，确保返回的颜色与背景的对比度至少为4.5:1。
@use "sass:color";
@function get-text-color($bg) {
@return color-contrast($bg, $black, $white);
}
.button {
background-color: #f0f0f0;
color: get-text-color(#f0f0f0);
}
对于浅灰色背景#f0f0f0，函数会计算出黑色#000000的对比度更高，因此返回黑色。对于深色背景如#333333，函数会返回白色#ffffff以保证可读性。
如何处理多候选颜色的对比度排序
当提供多个候选颜色时，color-contrast()会逐一计算每个颜色与背景色的对比度，并返回对比度最高的那个。这允许开发者指定一组品牌色或特定色调，函数会自动从中选出最符合WCAG标准的颜色。这种机制特别适用于需要保持品牌一致性的场景。
@use "sass:color";
.brand-colors: (#ff6b6b, #4ecdc4, #ffe66d);
@function get-brand-text($bg) {
@return color-contrast($bg, $brand-colors...);
}
.card {
background-color: #2d3436;
color: get-brand-text(#2d3436);
}
对于深灰色背景#2d3436，函数会比较#ff6b6b、#4ecdc4和#ffe66d与背景的对比度，返回对比度最高的颜色。通常浅色如#ffe66d在深色背景上会有更高的对比度。
基于color-contrast()返回值的实际应用场景
color-contrast()函数的返回值可以直接用于CSS属性，实现动态主题切换。例如，在用户切换深色模式时，背景色改变，函数会自动重新计算并应用正确的文本颜色。这种响应式行为无需JavaScript介入，完全由SCSS编译时确定。此外，该函数还可用于生成无障碍组件库，确保所有组件在不同背景下都符合WCAG标准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
