如何在高对比度模式下自动调整颜色

介绍

我最近收到一份错误报告，其中 SVG 图标在高对比度模式下无法正确显示。在这篇文章中，我将分享对我有用的解决方案。

解决方案

在高对比度模式下，我使用CanvasText系统颜色来自动调整图标的颜色。

就我而言，我最初使用 currentColor 从父元素继承颜色。但是，在高对比度模式下，我想在子元素中将背景颜色普遍设置为 CanvasText，所以我应用了此更改。

什么是 CanvasText？

CanvasText 是指用于应用程序内容或文档的文本颜色。它会自动调整以提供与系统背景颜色的最佳对比度。

通过使用 CanvasText，您可以确保即使用户启用高对比度模式，文本和图标仍然可见。此外，由于 CanvasText 根据系统主题进行自适应，因此它在深色和浅色模式下都能很好地工作。

就我而言，图标的背景颜色最初设置为黑色。然而，当背景在高对比度模式下变黑时，该图标就变得不可见。将颜色更改为白色使其再次可见，但为了在所有场景中一致地处理此问题，我选择使用系统颜色 CanvasText。

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/system-color

以上是如何在高对比度模式下自动调整颜色的详细内容。更多信息请关注PHP中文网其他相关文章！