2016-05-01 123 views
6

我該如何計算最接近colourblind的友好顏色,如HEX顏色代碼,如#0a87af或三個RGB值(0-255)。計算最接近色彩的友好顏色?

我在尋找一種有效的方法來計算或做到這一點,所以我可以在PHP或者Python和算法實現它可以用於更好的網站可訪問性色盲的人。

+4

開始時有一種以上的「色盲」。然後轉換單一顏色是不好的,它將始終取決於至少2(前景\背景) –

+2

還有一個問題,你應該問:「什麼是色彩友好的顏色?」任何單獨的顏色都可以是色彩友好的,但是如果你將這種顏色與另一種顏色相沖突,它會突然變得不友好。看看這裏有一些顏色的網格,以及它們在不同版本的色彩盲目性中的外觀:http://safecolours.rigdenage.com/colours2.html –

+0

因此,第二個參數,我應該添加背景顏色。 colourblind友好的意思是「總是與背景相反的顏色」?我希望不是。感謝@NicRobertson這是一個有用的列表。 –

回答

3

正如他們的意見/回答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的例子。

這不會給你最接近的顏色,你問,因爲一個獨特的背景將有超過一個的彩色正面給予相同的對比結果,但它的計算對比的標準方式。

3

單一的顏色不是色盲用戶的問題(除非你需要運輸的色調非常特定的含義);顏色之間的差異是。

給定兩個或更多的顏色,你可以使用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')) 
1

Contrast-Finder是一個開源在線工具(由開放-S和M.福雷寫的),給定的前景和背景顏色,將計算的對比度,並且如果它根據WCAG式的不足,會給你使用不同的算法(如果要保留前景色或背景色,並且如果想要高於4.5:1或3:1的對比度,則必須告訴它)等級AA - 或7:1/4.5:1 - 等級AAA)。
這是很多對夫婦的顏色很漂亮。

來源 - 在Java中 - 是在GitHub上。

注:如已經寫在其他的答案,色盲的人(「人與色彩不足」)只是通過顏色的選擇人們關注的一部分:弱視人羣也有。當網頁設計師在#FFF上選擇#AAA時,對於許多人來說這是一個問題,不會有任何視力損失或顏色感知;他們只是在非理想的光照條件下有一個閃亮的Retina®屏幕......:p