没有文字的背景颜色重要吗?

Does Background Color Without Text Matter?

关于颜色对比:

  1. 在这个例子中,即使上面没有副本,我是否需要注意蓝色背景? IE。当它上面有副本时,我是否只需要关心背景颜色,并且我可以从屏幕阅读器中隐藏具有背景颜色的元素而不会引起问题?

  2. 而在这个中,我需要注意浅蓝色背景和按钮之间的对比度还是我只关心副本和按钮之间的对比度? (我知道图像很模糊。这只是一个例子。)

两个例子都很好。

有两件事适用于此。

首先是文本和背景之间的对比度对于该文本 - 普通文本的对比度必须为 4.5:1,大文本的对比度必须为 3:1 / 粗体文本符合 WCAG AA 标准。在第一个示例中,它基本上是白底黑字,因此很容易通过。

第二个是控件。按钮、输入等应具有最小 3:1 背景的对比度,无论它们处于什么状态(因此,如果您的上方按钮在悬停时变成白色并带有黑色文本,则它可能不会通过)。在你的第二个例子中,你的按钮是浅蓝色的黑色,所以它肯定也通过了。

另外值得注意的是控件(您的按钮)内的文本具有相同的 4.5:1 对比度要求。又一次,黑底白字很容易通过,所以你很好。

只需检查带有白色文本的红色按钮上的对比度(几乎可以肯定),红色和橙色的对比度可能具有欺骗性(但由于它是深红色,我 99% 确定你没问题看着它)。

为清楚起见,第一个中的蓝色背景可能比白色框暗 1%,这很好,因为它不是围绕着的交互式控件。