2024-09-24 00:27:38 发布
网友
如何从十六进制颜色代码(如#0a87af)或三个RGB值(0-255)计算最接近的色盲友好颜色。在
我正在寻找一种有效的方法来计算或做这个,这样我就可以在PHP或Python中实现它,并且该算法可以用于色盲者更好地访问网站。在
正如其他人在评论/回答中提到的,两种颜色之间的对比非常重要。在
W3已经创建了一个方法来定义颜色之间的最小对比度,以便通过不同级别的可访问性。在
它们提供了描述here和计算它的公式在同一页的底部here:
contrast ratio = (L1 + 0.05) / (L2 + 0.05)
对于这个显然很简单的公式,您需要使用另一个公式来计算两种颜色的相对亮度L1和{},您可以找到here:
L1
RsRGB、GsRGB和BsRGB定义为:
RsRGB = R8bit/255 GsRGB = G8bit/255 BsRGB = B8bit/255
文本与背景的最小对比度应为AA级的4.5:1和AAA级的7:1。这仍然为创造漂亮的设计留下了空间。在
有一个implementation in JS by Lea Verou的例子。在
这不会像你要求的那样给你最接近的颜色,因为在一个独特的背景下,会有不止一种正面颜色给出相同的对比度结果,但这是一种计算对比度的标准方法。在
对于色盲用户来说,单一颜色不是问题(除非您想传达该色阶的特定含义);颜色之间的区别在于。在
给定两种或两种以上的颜色,可以使用colorsys将它们转换为HLS,并检查亮度差异是否足够。如果差异太小,请增大,如下所示:
import colorsys import re def rgb2hex(r, g, b): return '#%02x%02x%02x' % (r, g, b) def hex2rgb(hex_str): m = re.match( r'^\#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$', hex_str) assert m return (int(m.group(1), 16), int(m.group(2), 16), int(m.group(3), 16)) def distinguish_hex(hex1, hex2, mindiff=50): """ Make sure two colors (specified as hex codes) are sufficiently different. Returns the two colors (possibly changed). mindiff is the minimal difference in lightness. """ rgb1 = hex2rgb(hex1) rgb2 = hex2rgb(hex2) hls1 = colorsys.rgb_to_hls(*rgb1) hls2 = colorsys.rgb_to_hls(*rgb2) l1 = hls1[1] l2 = hls2[1] if abs(l1 - l2) >= mindiff: # ok already return (hex1, hex2) restdiff = abs(l1 - l2) - mindiff if l1 >= l2: l1 = min(255, l1 + restdiff / 2) l2 = max(0, l1 - mindiff) l1 = min(255, l2 + mindiff) else: l2 = min(255, l2 + restdiff / 2) l1 = max(0, l2 - mindiff) l2 = min(255, l1 + mindiff) hsl1 = (hls1[0], l1, hls1[2]) hsl2 = (hls2[0], l2, hls2[2]) rgb1 = colorsys.hls_to_rgb(*hsl1) rgb2 = colorsys.hls_to_rgb(*hsl2) return (rgb2hex(*rgb1), rgb2hex(*rgb2)) print(distinguish_hex('#ff0000', '#0000ff'))
Contrast-Finder是一个开源的在线工具(由open-S和M.Faure编写),在给定前景和背景颜色的情况下,它将计算对比度,如果根据WCAG公式,它将为您提供一组具有足够对比度的背景或前景颜色,从而提供选项,使用不同的算法(您必须告诉it部门您是想保持前景色还是背景色,以及您希望对比度高于4.5:1或3:1(AA级)或7:1/4.5:1(AAA级)。 对许多颜色来说,这是非常合适的。在
源代码—在Java中—在GitHub上。在
注:如其他答案所述,色盲者(“色盲者”)只是关注颜色选择的一部分人:部分视力正常的人也是。当一个网页设计师在FFF上选择AAA时,这对很多人来说都是个问题,他们没有任何视觉或色觉损失;他们只是在非最佳光照条件下有一个闪亮的Retina®屏幕。。。:p
正如其他人在评论/回答中提到的,两种颜色之间的对比非常重要。在
W3已经创建了一个方法来定义颜色之间的最小对比度,以便通过不同级别的可访问性。在
它们提供了描述here和计算它的公式在同一页的底部here:
对于这个显然很简单的公式,您需要使用另一个公式来计算两种颜色的相对亮度},您可以找到here:
^{pr2}$L1
和{RsRGB、GsRGB和BsRGB定义为:
文本与背景的最小对比度应为AA级的4.5:1和AAA级的7:1。这仍然为创造漂亮的设计留下了空间。在
有一个implementation in JS by Lea Verou的例子。在
这不会像你要求的那样给你最接近的颜色,因为在一个独特的背景下,会有不止一种正面颜色给出相同的对比度结果,但这是一种计算对比度的标准方法。在
对于色盲用户来说,单一颜色不是问题(除非您想传达该色阶的特定含义);颜色之间的区别在于。在
给定两种或两种以上的颜色,可以使用colorsys将它们转换为HLS,并检查亮度差异是否足够。如果差异太小,请增大,如下所示:
Contrast-Finder是一个开源的在线工具(由open-S和M.Faure编写),在给定前景和背景颜色的情况下,它将计算对比度,如果根据WCAG公式,它将为您提供一组具有足够对比度的背景或前景颜色,从而提供选项,使用不同的算法(您必须告诉it部门您是想保持前景色还是背景色,以及您希望对比度高于4.5:1或3:1(AA级)或7:1/4.5:1(AAA级)。
对许多颜色来说,这是非常合适的。在
源代码—在Java中—在GitHub上。在
注:如其他答案所述,色盲者(“色盲者”)只是关注颜色选择的一部分人:部分视力正常的人也是。当一个网页设计师在FFF上选择AAA时,这对很多人来说都是个问题,他们没有任何视觉或色觉损失;他们只是在非最佳光照条件下有一个闪亮的Retina®屏幕。。。:p
相关问题 更多 >
编程相关推荐