给定背景颜色,如何获得前景色,使其可读的背景颜色? [英] given a background color, how to get a foreground color that make it readable on that background color?
问题描述
给定背景颜色,如何获得前景色,使其在背景色上可读?
ps:我的意思是在程序中自动计算前景色。
或简化问题,如果前景颜色选自白色/空白,如何在程序中做选择?
<最安全的做法是遵守万维网联盟(W3C)Web内容无障碍指南2.0,该指南规定了亮度 www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.htmlrel =nofollow noreferrer>正常文字(12 pt或更小)的对比度为4.5:1,以及3.0:1大文字。对比度定义为:
[Y(b)+ 0.05] / [Y(d)+ 0.05]
其中Y(b)是较亮颜色的亮度(亮度),Y(d)是较暗颜色的亮度。
通过首先将每个颜色的RGB值转换为伽马调整的归一化rgb值:
- r =(R / 255)^ 2.2
- b =(B / 255)^ 2.2
- g =(G / 255)^ 2.2
然后使用sRGB常数(四舍五入为4)组合它们:
Y = 0.2126 * r + 0.7151 * g + 0.0721 * b
这使得白色的Y为1,黑色的Y为0,所以最大可能的对比度为(1.05 / 0.05)= 21(舍入误差范围内)。
此计算假设在相对昏暗的房间(或房间,如果她或他必须让用户可以变暗)的标准执行监视器。这使得它适合家庭或办公室使用,但我不知道它是否足以用于户外使用的移动应用或其他设备。
given a background color, how to get a foreground color that make it readable on that background color?
ps: I mean computing that foreground color automatically in a program.
or simplify the problem, if the foreground color is chosen from white/blank, how to do the choise 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屋!