给定背景色，如何获得使其在该背景色上可读的前景色？ [英] Given a background color, how to get a foreground color that makes it readable on that background color?

问题描述

给出背景色，如何获得使其在该背景色上可读的前景色？

我的意思是在程序中自动计算该前景色。 / p>

还是简化问题，如果从白色/黑色中选择了前景色，如何在程序中进行选择？

解决方案

最安全的选择是遵守万维网联盟（W3C）的Web内容可访问性指南2.0，该指南指定了常规文本（12磅或更小）的对比度为4.5：1，大文本为3.0：1 。对比度定义为：

[Y（b）+ 0.05] / [Y（d）+ 0.05]

其中Y（b）是较亮颜色的亮度（亮度），Y（d）是较暗颜色的亮度。

您可以计算亮度Y首先将每种颜色的RGB值转换为伽玛调整后的归一化rgb值：

• r =（R / 255）^ 2.2


• b =（B / 255）^ 2.2


• g =（G / 255）^ 2.2

然后使用sRGB常数（四舍五入）组合它们：

Y = 0.2126 * r + 0.7151 * g + 0.0721 * b

这使白色的Y为1，黑色的Y为0，因此最大可能的对比度为（1.05 / 0.05）= 21（在四舍五入误差内）。 / p>

或让JuicyStudio进行数学计算

此计算假设在光线较暗的房间（或房间t使用者可以根据需要调暗帽子）。这足以满足家庭或办公室使用需求，但我不知道它是否适合用于户外使用的移动应用或其他设备。

Given a background color, how to get a foreground color that makes it readable on that background color?

I mean computing that foreground color automatically in a program.

Or simplify the problem, if the foreground color is chosen from white/black, how to do the choice in a program?

解决方案

The safest bet is to conform with the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines 2.0, which specify a brightness contrast ratio of 4.5:1 for regular text (12 pt or smaller), and 3.0:1 for large text. Contrast ratio is defined as:

[Y(b) + 0.05] / [Y(d) + 0.05]

Where Y(b) is the brightness (luminance) of the brighter color and Y(d) is the brightness of the darker color.

You calculate luminance Y by first converting each of the color’s RGB values to gamma adjusted normalize rgb values:

• r = (R/255)^2.2
• b = (B/255)^2.2
• g = (G/255)^2.2

Then combine them using sRGB constants (rounded to 4 places):

Y = 0.2126*r + 0.7151*g + 0.0721*b

This gives white a Y of 1 and black a Y of 0, so the maximum possible contrast is (1.05/ 0.05) = 21 (within rounding error).

Or let JuicyStudio do the math for you.

This calculation assumes a standard-performing monitor in a relatively dimly lit room (or a room that the user can make dim if she or he has to). That makes it adequate for home or office use, but I don’t know if it’s adequate for mobile apps or other devices that are used outdoors.

这篇关于给定背景色，如何获得使其在该背景色上可读的前景色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！