颜色对比度计算器

颜色对比度描述前景与背景之间的相对亮度差异。足够的对比度有助于低视力、色觉差异、视力老化以及在眩光或低质量显示屏下使用界面的人阅读和操作。本计算器将两种 HEX 或 RGB 颜色转换为《网页内容无障碍指南》定义的相对亮度，再报告从相同亮度的 1:1 到黑白配色的 21:1 之间的比值。 计算并非直接比较红、绿、蓝通道原始值。每个 sRGB 通道都先归一化并线性化，以校正显示伽马。由于人眼对绿光最敏感，线性红、绿、蓝值分别采用 0.2126、0.7152 和 0.0722 的亮度权重。最终对比度为较亮颜色的亮度加 0.05，除以较暗颜色的亮度加 0.05。此标准方法不受颜色输入顺序影响。 WCAG 2.x 成功准则 1.4.3 要求 AA 级普通文字至少达到 4.5:1，大号文字至少达到 3:1。AAA 级将阈值提高到 7:1 和 4.5:1。大号文字通常指至少 18 磅的常规文字或 14 磅的粗体文字，在常见浏览器设定下约为 24 CSS 像素和 18.66 CSS 像素。用户界面组件及有意义的图形对象另有要求，通常需与相邻颜色达到 3:1。 达到对比度要求很重要，但不能保证设计完全无障碍。细字重、特殊字体、渐变、图像、悬停状态、透明度、抗锯齿和变化的背景都可能影响实际可读性。占位文字和禁用控件也应认真审查，即使具体准则对其有不同规定。不要仅用颜色传达状态，应结合标签、图标、图案或其他提示。应检查焦点指示和每一种交互状态，而非只看默认截图。 可输入六位 HEX、三位 HEX 或标准逗号分隔的 RGB 格式。计算器校验从零到 255 的通道值，并评估所输入的精确颜色。如果结果略低于阈值，可将前景调暗或背景调亮后重新计算。自动对比度检查之后，还应进行键盘操作、缩放与重排、屏幕阅读器检查，并征求残障用户反馈。在设计和实现阶段使用本工具可及早发现基本配色问题，最终仍须在真实条件下检查渲染后的界面。