如何解决大字体和背景图像的可访问性问题?

How to fix accessibility issue with large font and background image?

提问人:Rashid 提问时间:9/8/2023 更新时间:9/10/2023 访问量:23

问:

我有一张冰淇淋的图片,最重要的是,我用非常大的字体添加了一个标题文本,但字体颜色向我展示了背景的可访问性问题。如何在不更改字体颜色的情况下解决此问题。以下是屏幕截图以供参考。enter image description here

可访问性 W3C

评论


答:

1赞 slugolicious 9/10/2023 #1

当您在图像顶部有文本时,它会为您提供可变颜色背景。从技术上讲,与白色相比,对比度必须传递紫色的所有变化。紫色的某些部分较暗,对比度为 12:1(通过),但紫色的其他部分非常浅,对比度为 1.6(失败)。

由于您的字体很大,因此您可以使用 3:1 的对比度而不是 4.5:1。

解决此问题的一种方法是在文本周围设置一个半透明或不透明的框。也许是这样的:

enter image description here