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

查看:38
本文介绍了给定背景颜色,如何获得使其在该背景颜色上可读的前景色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

给定背景颜色,如何获得使其在该背景颜色上可读的前景色?

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?

推荐答案

最安全的选择是符合万维网联盟 (W3C) 的 Web 内容可访问性指南 2.0,该指南指定了亮度 常规文本的对比度为 4.5:1(12 pt 或更小),对比度为 3.0:1大文本.对比度定义为:

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]

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

其中 Y(b) 是较亮颜色的亮度(亮度),Y(d) 是较暗颜色的亮度.

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

首先将每种颜色的 RGB 值转换为伽马调整后的归一化 rgb 值来计算亮度 Y:

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

然后使用 sRGB 常量(四舍五入)将它们组合起来:

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

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

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

这使白色的 Y 为 1,黑色的 Y 为 0,因此最大可能的对比度为 (1.05/0.05) = 21(在舍入误差范围内).

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).

或者让 JuicyStudio 为您计算.

此计算假设在相对昏暗的房间(或用户可以在必要时调暗的房间)中使用标准性能的显示器.这使它适合家庭或办公室使用,但我不知道它是否适合户外使用的移动应用或其他设备.

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆