先决条件
- 我有一个 searched 用于处理重复或已关闭的问题
- 我有一个 validated 的任何HTML以避免常见的问题
- 我阅读了 contributing guidelines
描述问题
活动按钮仅使用颜色与非活动按钮进行区分。
这违反了WCAG的Level A标准，并且在强制使用颜色模式时无法使用。
减少的测试用例
- Codepen: https://codepen.io/team/bootstrap/pen/qBamdLj
- getbootstrap网站 https://getbootstrap.com/docs/5.2/components/buttons/#toggle-states
- 带有强制颜色样本
(参见https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use#w_custom-font-color 以获取Firefox设置，我找不到Chrome的设置)
您在哪个操作系统上看到问题？
Linux
您在哪个浏览器上看到问题？
Firefox
您使用的Bootstrap版本是什么？
v5.2.2
7条答案
按热度按时间fhity93d1#
我们需要从这个中解决任何问题吗？
rhfm7lfc2#
@mdo 活动类应该与非活动类有更强烈的区分。如果我们只根据背景的变化来判断，那么非活动背景和活动背景之间的差异至少应该是3:1的比例(参见 https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html 中的第二条注解，顺便说一下，这是我写的)
所以，对于蓝色按钮的情况，例如
#052A6C...(当然，我们还需要为所有其他颜色(主要、次要等)设计类似的变体)我相当确定我在很久以前当我们讨论一般的颜色对比度时提到过这一点。
至于强制使用的颜色，这超出了WCAG本身的范围。我们已经单独讨论了如何解决这个问题(因为这将比这里的切换开关需要更多的思考) #35941
在活动/非活动的情况下，一个想法是在激活时添加一个额外的轮廓或更粗的轮廓，但我们可以在另一个问题中讨论这个问题。
2w3kk1z53#
原则上，对于3:1的对比差异，同样的思考也适用于禁用控件，但这里的风险是让它变得太轻，以至于变得不可见。
例如，使用
#BDD8FF给它与常规切换按钮3:1的差异，但随后在单独对比页面或甚至边缘可读性方面表现得相当糟糕，这也可以说是失败了。对于这些情况，我们可能可以找到一个介于两者之间的颜色渐变，使得禁用控件与常规切换按钮的3:1比例不太相符，但比当前的禁用样式更轻。然后我们可以在文档中指出这一点，并告诉作者——根据他们在“使用颜色”问题上的立场以及对禁用控件需要严格应用的程度，他们可能会选择选择一个更轻、或者不同的/额外的样式。
wrrgggsh4#
顺便说一下，纯粹从颜色的Angular 来看(正如所说，抛开强制使用的颜色/高对比度问题),我最近为轮廓切换按钮引入的新样式https://getbootstrap.com/docs/5.2/forms/checks-radios/#outlined-styles可能是最好的，通过区分“仅边框”和“完整背景”来区分常规和活动切换按钮(尽管没有解决禁用的问题)。
uqcuzwp85#
这可能是我们在v6中想要妥善处理的问题，而不是在v5中(与一个良好的强制颜色故事一起)。
zsbz8rwp6#
@mdo :活动类应该与非活动类有更强的区分度。如果我们只根据背景的变化来判断，那么非活动背景和活动背景之间的差异至少应该是3:1的比例(参见https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html中的第二条注解，顺便说一下，这是我写的)
感谢您：)
这里有一个关于强制颜色的问题：它没有包含在准则1.4.1中：“使用颜色”吗？
具有足够强的对比度是可以的吗？
其目的是确保视力受损的用户无法区分某些颜色的情况下，仍然能够理解内容。
flvtvl507#
关于强制颜色的问题：它没有包含在1.4.1中：使用颜色吗？
不，1.4.1在这个阶段并没有涵盖像Windows高对比度/强制对比度这样的用户适应性。
具有坚固的对比度差异是可以的吗？
根据https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html,对比度比为3:1或更高的不仅被认为是“使用颜色”本身，所以是的，坚固的对比度是可以的。
我们确实计划在#35941中进行超出WCAG范围的其他适应性调整，但对于这些切换按钮，它可能只是添加一个额外的边框/轮廓或类似的东西(完全不依赖于特定的背景/颜色)