使用 CSS 媒体查询提升无障碍体验（2025）

# 使用 CSS 媒体查询改善无障碍体验 来源：https://fleeb.ee/blog/improving-accessibility-with-css-media-queries/ 遗憾的是，在设计网站时，无障碍往往是事后才考虑的事情。也许你选出了一套令自己满意的配色，但它并不完全符合 WCAG 2 关于对比度的成功标准 (https://www.w3.org/TR/WCAG21/#contrast-minimum)，又或者你网站上的动画有些过头了。 幸运的是，有一些新近获得支持、却尚未得到充分利用的 CSS 媒体查询，可以通过考虑*用户偏好*来改善无障碍体验，而无须推翻设计、从头再来。 可以通过媒体查询匹配的用户偏好包括对比度、动态效果、配色方案和透明度。这些偏好可以在操作系统的无障碍或显示设置中配置。 ## prefers\-contrast (https://fleeb.ee/blog/improving-accessibility-with-css-media-queries/#prefers-contrast) 默认就具备良好的对比度总是件好事，但有时很难在保持理想美感的同时做到这一点。使用 `prefers\-contrast`，我们可以为明确表示有此偏好的用户提高内容对比度，同时为其他用户保留原有样式。 `` .blue { color: rgb(117, 105, 255); @media (prefers-contrast: more) { color: rgb(44, 0, 255); } } `` 为了帮助发现对比度问题，可以在开发者工具中点击某个颜色，查看它与背景之间的对比度。WCAG 2 建议，小号文字的最低对比度为 **4\.5**，标题等大号文字的最低对比度为 **3\.0**。 Firefox 对比度指示器*CSS 变量和颜色混合？没问题。*无须逐一检查：大多数浏览器都提供了工具，可以自动列出网站上的所有对比度问题。 ## prefers\-reduced\-motion (https://fleeb.ee/blog/improving-accessibility-with-css-media-queries/#prefers-reduced-motion) 许多用户会因移动或闪烁的动画感到不适。如果能识别出非必要的动画，最好为偏好减少动态效果的用户禁用（或*减少*）这些动画。 `` .jello { &:hover { animation: jello 1s ease; } @media (prefers-reduced-motion: reduce) { animation: none; } } `` 也可以使用以下 CSS，彻底禁用页面上的所有动画： `` @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } `` 采用这种方法后，值得检查一下页面是否出现了意料之外的副作用。 ## prefers\-color\-scheme (https://fleeb.ee/blog/improving-accessibility-with-css-media-queries/#prefers-color-scheme) 只要你不是与世隔绝，应该都熟悉浅色模式和深色模式的概念。设计两套配色意味着双倍的工作量，但对于愿意更进一步的人来说，可以使用 `prefers\-color\-scheme`： `` :root { --color-text: black; --color-background: white; } @media (prefers-color-scheme: dark) { :root { --color-text: white; --color-background: black; } } .theme-aware-element { color: var(--color-text); background-color: var(--color-background); } `` 一种常见的做法是为颜色定义 CSS 变量，然后在所有地方使用这些变量，这样整个网站只需要编写一条 `prefers\-color\-scheme` 查询。很简单。 事实上，截至 2024 年，你还可以使用 `color\-scheme` (https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) 和 `light\-dark\(\)` (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) 来实现相同的效果： `` :root { color-scheme: light dark; --color-text: light-dark(black, white); --color-background: light-dark(white, black); } .theme-aware-element { color: var(--color-text); background-color: var(--color-background); } `` `color\-scheme` 很实用，因为它能帮助浏览器为滚动条、选中区域等应用与首选配色方案相匹配的默认颜色。 ## prefers\-reduced\-transparency (https://fleeb.ee/blog/improving-accessibility-with-css-media-queries/#prefers-reduced-transparency) 这项功能仍处于实验阶段，在撰写本文时，Firefox 和 Safari 默认都不支持它。在这种情况改变之前，我建议谨慎使用半透明效果。 `` .translucent { opacity: 0.6; @media (prefers-reduced-transparency) { opacity: 1; } } `` --- 需要认识到，虽然无障碍偏好大多是二元的开关设置，但人们所面临的功能障碍却涵盖更广泛的程度。因此，从一开始就设计具备合理无障碍水平的界面，或许是个好主意。 这些媒体查询并非万能良方，但当你急需更多灵活性时，它们可以派上用场。