网站开发可访问的产品可能具有挑战性，尤其是当某些需求超出开发范围时。强制alt图像文本和表单字段标签是一回事，但定义可访问的调色板是另一回事。从使用设计移交到支持设计系统中的自定义主题，CSScolor-contrast()功能可以成为开发人员实施足够对比和可访问的 UI 的基石。
在构建下一个项目时，肯定不乏可供使用的设计系统。在 IBM 的Carbon、Wanda和Nord之间，有很多很棒的设计系统可供选择。然而，虽然每个都有自己的细微差别和观点，但大多数都有一个相似的目标——简化创建精美可访问用户界面的开发过程。
这是一个令人钦佩的目标，老实说，它让我将自己的职业生涯转向了设计系统。但是许多设计系统的核心特性是主题的可扩展性。为什么不呢？如果没有一定的品牌灵活性，使用特定系统的每个产品看起来都一样，就像 2012 年左右的 Bootstrap。
虽然为自定义主题提供支持至关重要，但它也让最善意的系统的可访问性受实施的支配。一些团队可能会花费数周甚至数月的时间来定义他们理想的调色板以进行品牌重塑。他们将努力研究每种色调和颜色组合，以确保一切都可靠、信息丰富且易于使用。其他人根本不能和/或不会这样做。
要求元素上的alt文本img或元素的文本是一回事，但强制使用可访问的调色板是完全不同的野兽。它是一头有着锯齿状黄色牙齿、火红色眼睛和绿色鳞片的野兽，就像鳄鱼盔甲一样覆盖着它的身体。labelinput
至少你认为是。据你所知，它可能只是一头模糊的黑色和略深的黑色。CSScolor-contrast()功能是一项实验性功能，目前是Color Module 5的一部分。它的目的——以及这篇文章令人兴奋的原因——是在与基色进行比较时，从列表中选择对比度最大的颜色。
