我該如何計算最接近colourblind的友好顏色,如HEX顏色代碼,如#0a87af或三個RGB值(0-255)。計算最接近色彩的友好顏色?
我在尋找一種有效的方法來計算或做到這一點,所以我可以在PHP或者Python和算法實現它可以用於更好的網站可訪問性色盲的人。
我該如何計算最接近colourblind的友好顏色,如HEX顏色代碼,如#0a87af或三個RGB值(0-255)。計算最接近色彩的友好顏色?
我在尋找一種有效的方法來計算或做到這一點,所以我可以在PHP或者Python和算法實現它可以用於更好的網站可訪問性色盲的人。
正如他們的意見/回答mentionned別人,兩種顏色之間的對比將具有重要意義。
W3已經創建了一種方法來定義顏色之間的最小對比度,以便通過不同級別的可訪問性。
他們提供的說明here和公式來計算的話是在同一頁上,在底部,here:
contrast ratio = (L1 + 0.05)/(L2 + 0.05)
對於這個看似簡單的公式,你需要計算相對亮度指出L1
並且使用其他式所發現here兩種顏色的L2
:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055)^2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055)^2.4
if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055)^2.4
和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是一個開源在線工具(由開放-S和M.福雷寫的),給定的前景和背景顏色,將計算的對比度,並且如果它根據WCAG式的不足,會給你使用不同的算法(如果要保留前景色或背景色,並且如果想要高於4.5:1或3:1的對比度,則必須告訴它)等級AA - 或7:1/4.5:1 - 等級AAA)。
這是很多對夫婦的顏色很漂亮。
來源 - 在Java中 - 是在GitHub上。
注:如已經寫在其他的答案,色盲的人(「人與色彩不足」)只是通過顏色的選擇人們關注的一部分:弱視人羣也有。當網頁設計師在#FFF上選擇#AAA時,對於許多人來說這是一個問題,不會有任何視力損失或顏色感知;他們只是在非理想的光照條件下有一個閃亮的Retina®屏幕......:p
開始時有一種以上的「色盲」。然後轉換單一顏色是不好的,它將始終取決於至少2(前景\背景) –
還有一個問題,你應該問:「什麼是色彩友好的顏色?」任何單獨的顏色都可以是色彩友好的,但是如果你將這種顏色與另一種顏色相沖突,它會突然變得不友好。看看這裏有一些顏色的網格,以及它們在不同版本的色彩盲目性中的外觀:http://safecolours.rigdenage.com/colours2.html –
因此,第二個參數,我應該添加背景顏色。 colourblind友好的意思是「總是與背景相反的顏色」?我希望不是。感謝@NicRobertson這是一個有用的列表。 –