面向网页开发者的实用颜色对比指南

Source: Dev.to

颜色对比度决定了在真实环境下界面的可读性，影响从快速点击按钮到长篇阅读的方方面面。当你在户外、屏幕亮度较低或使用显示效果较差的设备时，这种影响最为明显。

这也是为什么对比度不仅是设计问题；它是前端工程的核心部分。你已经在性能、布局和交互稳定性上投入了时间。对比度同样属于这一类，因为它决定了 UI 在不同环境下的可靠表现。

对比度实际衡量的内容

网页内容可访问性指南（WCAG）使用一个公式比较两种颜色的相对亮度，以确定可见性。虽然你不需要手动计算，但必须了解目标值。

• 普通文本 需要至少 4.5:1 的比例。
• 大字号文本 需要至少 3:1 的比例。

这些数值的范围是 1 到 21，数值越高表示对比度越强。白底黑字的对比度是 21:1，而白对白的对比度是 1:1。现代网页项目中最易读的配色通常落在 5 到 14 之间。

这些比例并非随意设定。它们基于不同视力水平的人对亮度的感知。即使是视力正常的用户，在低光或户外强光下也会失去清晰度，因此 4.5:1 的配色比 3:1 的配色更能抵御环境因素。这就是为什么仅满足最低要求的配色可以用于标题，但往往会导致小段正文的可读性问题。

工作时检查对比度

要获得即时反馈，浏览器是最快的工具。打开 DevTools 并检查文本元素，你可以在可访问性或样式面板中直接看到对比度比例。这让你在布局草图或尝试新主题颜色时，能够及早捕获可访问性缺陷。

浏览器 DevTools 对于平面、纯色背景上的文本最为准确。如果文本位于渐变或复杂图像之上，浏览器可能无法可靠地计算背景颜色，这时需要使用专门的工具。

使用专用对比度检查工具

小块颜色样本可能会产生误导，因为某些组合虽然在数学上符合要求，但在实际界面中仍显得薄弱。像 colourcontrast.cc 这样的工具很有价值，因为它们会根据你的选择实时更新整页预览。

这种方式让你能够在不同尺寸下看到标题、段落和 UI 组件使用该配色的效果。它提供了一个比单纯计算器更真实的稳定性判断。有时 4.7:1 的比例在单独查看时看起来还可以，但放进密集布局后会显得过于细弱，看到实际效果有助于你做出正确的判断。

自动化工作流

为了减少团队成员的猜测，可集成自动化检查。虽然像 eslint-plugin-jsx-a11y 这样的 lint 插件可以帮助捕获缺失的标签，但它们有时难以计算颜色对比度，因为它们并不总能读取你的 CSS 文件。

人们常把可访问性当作单独的合规要求，但实际上，对比度提升了所有人的基本可用性。它让文本更易扫描，减轻眼睛疲劳，并在老旧硬件上保持界面清晰。把对比度视为技术约束而非仅仅是美学选择，你就能帮助让网络变得更好。