使用CSS切换不同背景的字体颜色

曾经获得其中的一个，“我可以使用CSS做到这一点！” 看着某人展示自己JavaScript肌肉的片刻？ 这正是我在CSSconf EU 2018上观看Dag-Inge Aas和Ida Aalen演讲时的感受 。

他们设在挪威， WCAG的可访问性不仅是一种良好的做法，而且实际上是法律所要求的（去，挪威！）。 在开发允许用户选择其主要产品的颜色主​​题的功能时，他们面临一个挑战：根据容器的选定背景颜色自动调整字体颜色。 如果背景较暗，则最好使用白色文本以使其符合WCAG对比度 。 但是，如果选择浅背景色会怎样呢？ 文本难以辨认并且无法访问。

他们采用了一种优雅的方法，并使用“ color” npm软件包解决了该问题，添加了有条件的边框并自动生成第二色。

但这是一个JavaScript解决方案。 这是我的纯CSS替代方法。

挑战

这是我要完成的标准：

• 根据背景颜色将字体color更改为黑色或白色
• 仅当背景真的很浅时 ，才对边框应用相同的逻辑，使用较深的背景基色变化来提高按钮的可见性
• 自动生成60°色相旋转的辅助颜色

使用HSL颜色和CSS变量

为此，我想到的最简单的方法就是运行HSL颜色。 将背景声明设置为HSL，其中每个参数都是CSS定制属性，这允许使用一种非常简单的方法来确定亮度并将其用作条件语句的基础。

:root {
  --hue: 220;
  --sat: 100;
  --light: 81;
}

.btn {
  background: hsl(var(--hue), calc(var(--sat) * 1%), calc(var(--light) * 1%));
}

这应该允许我们通过更改变量并运行if / else语句更改前景色来将背景交换为运行时所需的任何颜色。

除了……我们在CSS上没有if / else语句…… 还是我们？