我有一个默认的强调色:#4d238c。问题是:生成的 $primary-medium 颜色(#a179de)不符合无障碍指南,因此我需要将其调暗。
如果只需覆盖 $primary-medium 的值(例如设为红色),而不是在系统使用中等颜色的所有地方逐一修改,这似乎要省力得多。
我有一个默认的强调色:#4d238c。问题是:生成的 $primary-medium 颜色(#a179de)不符合无障碍指南,因此我需要将其调暗。
如果只需覆盖 $primary-medium 的值(例如设为红色),而不是在系统使用中等颜色的所有地方逐一修改,这似乎要省力得多。
是的,完全理解。目前无法直接覆盖我们自动生成的任何次要变量,因为这些变量在 CSS 构建时就已经固定了。因此,短期内您需要手动进行这些修改。
一些说明:
配色方案旨在提供一种极其简单的方式来定义颜色,任何更具体的需求都需要自定义 CSS。关于这一点,我们在以下链接中有过更多讨论:Customizing colors - #2 by awesomerobot
一些我们需要考虑的事情:
我认为提供一个高级配色方案编辑器,允许用户覆盖那些次要变量,并不是一个坏主意。但由于这些变量被广泛使用,您很可能仍然需要编写一些 CSS。
例如……您可能希望覆盖所有 文本 场景中 $primary-medium 的使用,但它也出现在边框和其他元素中,在这些地方使用更高对比度的 $primary-medium 可能并不合适。因此,最好的情况下,高级配色编辑器只能 减少 所需的自定义 CSS,而无法完全消除它。
话虽如此……这里的主要问题其实是文本对比度以符合无障碍标准,对吗?我们的默认样式在某些区域的文本对比度确实未达标,如果我们在这方面进行改进,这个问题可能从一开始就不会存在……
因此,我认为在不久的将来,我们的团队可以关注默认文本的无障碍性问题,而在更远的未来,我们可以进一步改进配色方案工具,使其考虑无障碍性(例如,https://cloudflare.design/color/ 就是一个有趣的实验,它考虑了文本对比度)。
嘿,Kris
感谢如此迅速的回复。
是的,我们最关心的是无障碍性,因为我们在政府环境中使用贵公司的产品。
我已经逐步解决了对比度的无障碍问题,但正如我们讨论的那样,最好让默认颜色也符合无障碍标准。
不过,该网站不仅仅在对比度方面存在问题,例如其他经常出错的元素包括:列表项(<li>)未包含在 <ul> 或 <ol> 父元素中。
但目前为止,对比度是我唯一能控制的部分,所以在修复措施实施之前,现状可以接受。
我们因为遇到类似问题偶然发现了这个帖子,我们通过以下变通方法解决了问题:在主题的通用 CSS 中添加以下内容:
:root {
--primary-medium: #666666;
}