blocks|key|255826|text|网页内容可访问性指南(WCAG2.0)+(http://www.w3.org/TR/2008/REC-WCAG20-20081211)中有一些信息|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|255827|亮度视觉对比度：http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast|255828|Contrast+|unordered-list-item|255829|
|255830|：http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef|255831|255832|Relative亮度：http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef|255833|255834|有一个很好的例子in+this+site，但他计算两种颜色在哪里足够，而不是如何获得它们。|255835|要选择对比度好的颜色，我会选择补色:例如，选择随机颜色A，将其转换到HSV空间，获得互补色调。|255836|互补色调:将颜色从RGB转换为HSV后，互补色调将为180度(或0.5度，0-1规格化色调值)。This+site在PHP中提供了一些关于它的信息。|255837|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/2008/REC-WCAG20-20081211|1|http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast|2|http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef|3|http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef|4|http://snook.ca/technical/colour_contrast/colour.html|5|http://serennu.com/colour/rgbtohsl.php^0|L|19|0|0|8|25|1|0|0|0|1|1S|2|0|0|B|1V|3|0|0|8|C|4|0|0|1C|9|5|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|F|3|G|5|H|7|1M|8|@]|9|@]|C|$]]|$1|I|3|J|5|6|7|1N|8|@]|9|@]|C|$]]|$1|K|3|L|5|H|7|1O|8|@]|9|@$A|1P|B|1Q|1|1R]]|C|$]]|$1|M|3|J|5|6|7|1S|8|@]|9|@]|C|$]]|$1|N|3|O|5|H|7|1T|8|@]|9|@$A|1U|B|1V|1|1W]]|C|$]]|$1|P|3|-4|5|6|7|1X|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1Y|8|@]|9|@$A|1Z|B|20|1|21]]|C|$]]|$1|S|3|T|5|6|7|22|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|23|8|@]|9|@$A|24|B|25|1|26]]|C|$]]|$1|W|3|-4|5|6|7|27|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]|14|$5|Z|10|11|C|$12|15]]|16|$5|Z|10|11|C|$12|17]]|18|$5|Z|10|11|C|$12|19]]|1A|$5|Z|10|11|C|$12|1B]]|1C|$5|Z|10|11|C|$12|1D]]]]

There is some information in the Web Content Accessibility Guidelines (WCAG) 2.0 (http://www.w3.org/TR/2008/REC-WCAG20-20081211)

<ol>
<li>Visual contrast: <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast">http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast</a></li>
<li>Contrast ratio: <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef">http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef</a></li>
<li>Relative luminance : <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef">http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef</a></li>
</ol>

There's a good example <a href="http://snook.ca/technical/colour_contrast/colour.html">in this site</a> but he calculate where two colors are enough, not how to get them.

To choose a color with good contrast, I'd go with complementary colors: for example, choose the random color A, transform it to a HSV space, get the complementary hue.

Complementary hue: after you transform color from RGB to HSV, complementary hue will be 180 degrees appart (or 0.5, in a 0-1 normalized hue value). <a href="http://serennu.com/colour/rgbtohsl.php">This site</a> has something about it in PHP

blocks|key|255853|text|当我在寻找一种更好的方法时，我偶然发现了Adobe+Illustrator指南，其中提到了它们如何创建互补色。他们说：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|255854|255855|补色根据选定颜色中最高和最低RGB值的总和，将颜色的每个分量更改为新值。Illustrator将当前颜色的最低和最高RGB值相加，然后从该数值中减去每个组件的值以创建新的RGB值。例如，假设您选择一种RGB值为102的红色、153的绿色和51的蓝色。Illustrator将高(153)和低(51)值相加，以得到新值(204)。从新值中减去现有颜色中的每个RGB值以创建新的互补RGB值:+204+-+102+(当前红色值)=+102表示新的红色值，204+-+153+(当前绿色值)=+51表示新的绿色值，204+-+51+(当前蓝色值)=+153表示新的蓝色值。|blockquote|255856|255857|255858|通过编程的方式来实现这一点并不是太难，并且这一次它可能真的适用于您正在尝试做的事情。|255859|祝好运!|255860|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|O|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|P|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|M|$]]

As I was searching for a better way to do this, i stumbled across the Adobe Illustrator guide which mentions how they create complementary colors. They say:

<blockquote>
 Complement Changes each component of a color to a new value based on the sum of the highest and lowest RGB values in the selected color. Illustrator adds the lowest and highest RGB values of the current color, and then subtracts the value of each component from that number to create new RGB values. For example, suppose you select a color with an RGB value of 102 for red, 153 for green, and 51 for blue. Illustrator adds the high (153) and low (51) values, to end up with a new value (204). Each of the RGB values in the existing color is subtracted from the new value to create new complementary RGB values: 204 – 102 (the current red value) = 102 for the new red value, 204 – 153 (the current green value) = 51 for the new green value, and 204 – 51 (the current blue value) = 153 for the new blue value.
</blockquote>

It wouldn't be too hard to do this programmatically and think this time that it might actually work for what you are trying to do.

Good Luck!

Suppose, in your program:

<ol>
<li><code>color A</code> is a color we randomly select</li>
<li>Knowing <code>color A</code>, how can I pick a <code>color B</code> that will be in high contrast with <code>color A</code>?</li>
</ol>

The problem can be further reduced to: "imagine 2 squares filled with color next to one another. It should be unambiguously clear to a human eye that colors are not the same"

Example:

<ul>
<li>Black --> White</li>
<li>Blue --> White</li>
</ul>

How to pick good contrast RGB colors programmatically?

假设在你的程序中：color A是一种我们随机选择的颜色，了解color B color A**?**，color B color A，how can I pick a  be acolor A**？**be a high contrast这个问题可以进一步简化为：“想象两个相邻的方块都充满了颜色，对于人眼来说，颜色是...

问如何通过编程选择对比度好的RGB颜色？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过编程选择对比度好的RGB颜色？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过编程选择对比度好的RGB颜色？
EN