1. 颜色对比度的基础与标准
1.1 对比度的定义与计算
在前端设计中，颜色对比度是衡量前景文本与背景色在视觉上的区分度，直接影响可读性和无障碍可访问性。对比度可通过下列公式来计算：对比度比 = (L1 + 0.05) / (L2 + 0.05)，其中 L1 >= L2，L1、L2 分别是两种颜色的相对亮度。此公式来自于 WCAG 的定义，用于评估文本在不同光照条件下的可辨识程度。
要正确应用该公式，需要先将颜色转换为线性亮度值。RGB 颜色通常先经过伽马校正，再计算得到的相对亮度用于对比度的比值。不同的颜色组合在不同显示设备上可能产生变化，因此将对比度作为跨设备的可读性指标很常见。
function rgbToLuminance(r, g, b) {// 将 RGB 转换为相对亮度const a = [r, g, b].map(v => {v = v / 255;return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);});return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
}
function hexToRgb(hex) {const s = hex.replace('#', '');const bigint = parseInt(s.length === 3 ? s.split('').map(ch => ch + ch).join('') : s, 16);return { r: (bigint >> 16) & 255, g: (bigint >> 8) & 255, b: bigint & 255 };
}
function contrastRatio(hex1, hex2) {const L1 = rgbToLuminance(...Object.values(hexToRgb(hex1)));const L2 = rgbToLuminance(...Object.values(hexToRgb(hex2)));const hi = Math.max(L1, L2);const lo = Math.min(L1, L2);return (hi + 0.05) / (lo + 0.05);
}
console.log(contrastRatio('#000000', '#FFFFFF').toFixed(2)); // 21.00
在设计流程中，对比度的数值是评估的核心指标之一。WCAG 将不同文本尺寸与权重对应的阈值设定为：4.5:1用于普通文本，3:1用于大文本，以及对某些界面控件提供更高的对比需求。
1.2 WCAG 指南中的阈值与等级
根据 WCAG 指南，AA 级通常要求普通文本对比度达到 4.5:1，对大文本可以达到 3:1。而 AAA 级有更高的要求，常用于对残障人士提供的高级无障碍支持。不同文本尺寸、字体重量与显示设备共同影响实际观感。
在设计阶段，颜色系统应明确哪些颜色组合被允许出现在文本背景对比中，并对不同主题（明亮、深色、暗色模式）进行对比度校验。通过将阈值写入设计规范，可以确保 UI 元素在多场景下保持一致的可读性。
2. 在前端设计中的实际应用
2.1 如何为文本选择可读的颜色组合
在实际的前端设计中，文本可读性是核心目标。为文本选择背景与字体颜色时，优先遵循 4.5:1 的最低对比度要求，大文本需要满足 3:1 的条件。为了提升可读性，可以采用高对比度的配色或增大文本大小。不同设备和光线条件下的可读性也应考量在设计中。
除了对比度，颜色的 hues 与 饱和度也影响可感知的对比度。色弱用户在辨识某些颜色时可能产生误读，因此应增加文本的轮廓、阴影或背景色差，以帮助区分信息。
/* 高对比度按钮示例 */
.btn {background-color: #1e90ff; /* 主色 */color: #ffffff; /* 文本颜色，确保对比度 ≥ 4.5:1 */border: 1px solid rgba(0,0,0,.2);
}
.btn:focus-visible {outline: 3px solid #ffbf47;outline-offset: 2px;
}
在组件层面，控件状态对比度也需要关注，如未激活、悬停、聚焦和禁用状态。通过标签文本可访问性辅助信息，与颜色对比共同提升识别度。
为了快速判断，可以在设计阶段使用 颜色检查工具，如在设计稿中嵌入对比度标记，或在浏览器中通过开发者工具进行即时计算。
2.2 考虑视觉传达和品牌一致性
品牌配色通常包含主色、辅助色与背景色。色彩一致性与对比度同样重要，确保品牌视觉在不同主题和设备上仍然可读。实现时，可以通过 颜色变量体系（如 CSS 变量）来统一对比度策略。
{"palette": {"bg": "#ffffff","text": "#1f2937","primary": "#2563eb","secondary": "#9333ea"},"notes": "在所有场景中保持 text 与 bg 的对比度 >= 4.5:1"
}
此外，考虑到无障碍性，文本与背景色的组合应确保在 暗色模式、日间模式 和不同屏幕设置下都具备足够对比度。设计师应记录一组可重复使用的对比度规则，以确保跨页面的可访问性连贯性。
3. 无障碍测试与工具
3.1 常用工具与测试步骤
实现无障碍性最直接的办法是借助专门的测试工具。WebAIM 对比度检查器、axe-core、以及 Lighthouse 的无障碍审计都能帮助发现对比度不足的区域。通过将测试嵌入开发流程，可以在改动后快速定位问题。
测试步骤通常包括：统计页面中所有文本元素、按钮、链接和通知的对比度，检查不同主题切换后的表现，以及确保 焦点可见性在键盘导航时清晰呈现。对比度不足的组件应被标注并替换为更高对比度的配色。
// 使用 axe-core 进行对比度检查的示例（浏览器端）
import axe from 'axe-core';
axe.run((err, results) => {if (err) throw err;console.log(results.violations.length + ' accessibility violations');
});
在实现端，无障碍测试要覆盖文本、控件、错误提示等常见信息的对比度需求，并结合 ARIA 属性 与语义 HTML 来提升可访问性。
3.2 如何将测试融入持续集成
为了在 CI 流水线中持续保障可访问性，可以将对比度与无障碍测试纳入 持续集成 流程。通过设置自动化任务，在每次提交后执行对比度检查与无障碍审计，确保新改动不破坏现有的对比度标准。
name: Accessibility check
on: [ push ]
jobs:audit:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v3- name: Install dependenciesrun: npm ci- name: Run accessibility checksrun: npm run audit:accessibility
输出报告应明确标注不符合对比度的区域，便于开发者在下次迭代中进行适配。通过统计与历史趋势，可以观察到对比度策略的改动对最终可访问性的影响。
