如何在SCSS中编写一个能自动计算对比度的CSS文字颜色函数？-css教程-PHP中文网

scss无内置对比度计算函数，contrast()仅按亮度阈值返回黑白，不验证wcag标准；需手动实现相对亮度l=0.2126r+0.7152g+0.0722b及对比度比率逻辑。

如何在scss中编写一个能自动计算对比度的css文字颜色函数？

SCSS里没有内置的对比度计算函数

SCSS标准函数（如 lighten()、darken()、contrast()）都不真正计算颜色对比度（即 WCAG 4.5:1 或 7:1 的可访问性比率），contrast() 只是简单按亮度阈值返回黑白之一，不校验是否达标。真要“自动选可达标的文字色”，得自己实现亮度（luminance）和对比度（contrast ratio）逻辑。

用 `rgb()` 和数学公式手动算 luminance

WCAG 对比度依赖相对亮度（relative luminance），公式是：L = 0.2126×R + 0.7152×G + 0.0722×B，其中 R/G/B 是归一化后的线性 RGB 值（需先 gamma 校正）。SCSS 不支持浮点幂运算，但可用 pow() 模拟（需引入 math.pow()，Sass 1.33+ 内置）或用近似法绕过。更稳妥的做法是只处理 sRGB，并对每个通道做 if($c 。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

必须把 rgb() 或 hex 转成 0–1 区间的小数，用 red($color)、green($color)、blue($color) 提取分量
避免直接用 lightness() —— 它是 HSL 的明度，和 luminance 完全不同，不能用于对比度计算
若用 Sass 1.30+，启用 @use "sass:math"，否则 pow() 不可用；旧版需手写近似函数或接受轻微误差

写一个 `accessible-contrast-color()` 函数判断该用黑还是白

目标不是“生成任意对比色”，而是给定背景色，返回满足最小对比度（如 AA 级 4.5:1）的文字色（通常只在黑白中选）。核心是先算背景 luminance L1，再分别算黑（L2=0）和白（L2=1）的对比度：(L1 + 0.05) / (L2 + 0.05)（较大值在分子），然后比较是否 ≥ 4.5。

@use "sass:math";
<p>@function relative-luminance($color) {
$r: red($color) / 255;
$g: green($color) / 255;
$b: blue($color) / 255;
$r: if($r  $r + 0.7152  $g + 0.0722 * $b;
}</p><p>@function accessible-contrast-color($bg, $min-ratio: 4.5) {
$l: relative-luminance($bg);
$contrast-white: (1 + 0.05) / ($l + 0.05);
$contrast-black: ($l + 0.05) / (0 + 0.05);
@return if($contrast-white >= $min-ratio and $contrast-white >= $contrast-black, white, black);
}
</p>