亮度对比度计算器

理解亮度对比度对于设计方便不同视觉能力用户使用的可访问的数字媒体至关重要。本综合指南解释了亮度对比度背后的科学原理，提供了实用的公式，并演示了如何优化您的设计以获得更好的可读性和可访问性。

为什么亮度对比度很重要：增强可读性和可访问性

必要的背景知识

亮度对比度是指两个区域之间的亮度差异，通常用于评估屏幕上文本或图像的可读性。亮度对比度重要的关键原因：

• 可访问性合规性：确保内容符合 WCAG 2.1 等标准，以满足有视觉障碍的用户的需求。
• 用户体验：更高的对比度可以提高可读性，减少眼睛疲劳。
• 设计一致性：为创建视觉上吸引人且功能齐全的界面建立明确的指导方针。

人眼将对比度感知为亮区和暗区之间亮度的比率。对比度不足会导致文本难以阅读，特别是对于视力低下或色盲的人。

精确的亮度对比度公式：简化您的设计流程

亮度对比度 (CR) 使用以下公式计算：

\[ CR = \frac{(L_b + 0.05)}{(L_d + 0.05)} \]

其中：

• \(L_b\) 是较亮区域的亮度（单位为 cd/m²）。
• \(L_d\) 是较暗区域的亮度（单位为 cd/m²）。
• 添加 0.05 是为了考虑亮度感知中的微小变化。

计算步骤：

1. 将 0.05 添加到 \(L_b\) 和 \(L_d\)。
2. 将调整后的较亮区域的亮度除以调整后的较暗区域的亮度。

例如，如果 \(L_b = 100\) 且 \(L_d = 10\)： \[ CR = \frac{(100 + 0.05)}{(10 + 0.05)} = \frac{100.05}{10.05} \approx 9.96 \]

实际计算示例：为所有用户优化您的设计

示例 1：白色背景上的文本

场景： 一个网站在白色背景 (\(L_d = 10\)) 上使用黑色文本 (\(L_b = 100\))。

1. 调整亮度值：\(100 + 0.05 = 100.05\)，\(10 + 0.05 = 10.05\)。
2. 计算对比度：\(CR = \frac{100.05}{10.05} \approx 9.96\)。

结果： 这符合 WCAG Level AA 要求（正常文本的最小对比度为 4.5:1）。

示例 2：低对比度设计

场景： 一个移动应用程序在浅灰色背景 (\(L_d = 40\)) 上使用灰色文本 (\(L_b = 50\))。

1. 调整亮度值：\(50 + 0.05 = 50.05\)，\(40 + 0.05 = 40.05\)。
2. 计算对比度：\(CR = \frac{50.05}{40.05} \approx 1.25\)。

结果： 这不符合可访问性标准，应加以改进以提高可用性。

亮度对比度常见问题解答：专家解答，改进您的设计

Q1：可访问性的可接受对比度是多少？

WCAG 指南建议：

• Level AA：正常文本的最小对比度为 4.5:1，大文本的最小对比度为 3:1。
• Level AAA：正常文本的最小对比度为 7:1，大文本的最小对比度为 4.5:1。

*专家提示：* 使用像这样的计算器，在最终确定设计之前确保合规性。

Q2：颜色如何影响亮度对比度？

虽然颜色可以增强视觉吸引力，但它不会直接影响亮度对比度。在优化可访问性时，请关注亮度差异而不是色调。

Q3：过高的对比度是否有害？

过高的对比度（例如，纯白色背景上的纯黑色文本）会导致眩光和眼睛疲劳。目标是平衡比率，在不牺牲舒适度的情况下优先考虑可读性。

亮度术语表

帮助您掌握亮度对比度的关键术语：

亮度 (\(L\))： 从表面发射或反射的光量，以每平方米烛光 (cd/m²) 为单位测量。

对比度 (\(CR\))： 最亮和最暗区域之间的亮度比率，指示可见性差异。

WCAG（Web 内容可访问性指南）： 确保 Web 内容可供残疾人士访问的标准，包括最低对比度要求。

关于亮度对比度的有趣事实

1. 自然的对比： 在理想条件下，例如在夜空中观看星星，人眼可以感知高达 1,000,000:1 的对比度。

2. 数字限制： 大多数监视器的对比度范围为 1,000:1 到 10,000:1，远低于人眼可以检测到的范围。

3. 艺术应用： 高对比度图像通常用于艺术和摄影中以创造戏剧效果，而低对比度图像则唤起更柔和、更宁静的心情。