2016-05-01 7 views
6

Wie kann ich aus einem HEX-Farbcode wie # 0a87af oder aus den drei RGB-Werten (0-255) die nächste farbblindfreundliche Farbe berechnen?Berechnen Sie die nächste farbblindfreundliche Farbe?

Ich bin auf der Suche nach einem effizienten Weg zu berechnen oder tun dies, so dass ich es in PHP oder Python implementieren kann und der Algorithmus kann für bessere Barrierefreiheit für farbenblinde Menschen verwendet werden.

+4

für den Anfang gibt es mehr als eine Art von 'farbenblind'. dann ist das Umwandeln einer einzelnen Farbe nicht gut, es wird immer von mindestens 2 abhängen (Vordergrund \ Hintergrund). –

+2

Auch eine Frage, die Sie fragen sollten, ist "Was ist eine farbenblindfreundliche Farbe?" Jede einzelne Farbe kann farbblindfreundlich sein, aber wenn Sie diese Farbe mit einer anderen Farbe kombinieren, die kollidiert, wird sie plötzlich unfreundlich. Schau mal hier nach einem Raster mit einigen Farben und wie sie in den verschiedenen Versionen von colorblindness aussehen: http://safecolours.rigdenage.com/colours2.html –

+0

Also ein zweiter Parameter, Hintergrundfarbe sollte hinzugefügt werden nehme ich an. Würde colourblind friendly "immer die entgegengesetzte Farbe des Hintergrundes" bedeuten? Ich hoffe nicht. Danke @NicRobertson, das ist eine hilfreiche Liste. –

Antwort

3

Da die in ihren Kommentaren/Antwort erwähnt andere, der Kontrast zwischen zwei Farben von Bedeutung sein wird.

Der W3 hat bereits eine Methode entwickelt, die einen Mindestkontrast zwischen Farben definiert, um unterschiedliche Zugänglichkeitsgrade zu erreichen.

Sie bieten die Beschreibung here und die Formel berechnen sie auf der gleichen Seite ist, an der Unterseite, here:

contrast ratio = (L1 + 0.05)/(L2 + 0.05) 

Für diese scheinbar einfache Formel, die Sie benötigen die relative Leuchtdichte L1 anzumerken berechnen und L2 beiden Farben eine andere Formel, die Sie here finden:

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 

und RsRGB, GsRGB und BsRGB sind definiert als:

Das minimale Kontrastverhältnis zwischen Text und Hintergrund sollte 4,5: 1 für Level AA und 7: 1 für Level AAA betragen. Dies lässt noch Raum für die Schaffung von schönen Designs.

Es gibt ein Beispiel für implementation in JS by Lea Verou.

Dies gibt Ihnen nicht die nächste Farbe wie Sie gefragt haben, denn auf einem einzigartigen Hintergrund gibt es mehr als eine Frontfarbe, die das gleiche Kontrastergebnis ergibt, aber es ist eine Standardmethode zur Berechnung von Kontrasten.

3

Eine einzige Farbe ist kein Problem für farbenblinde Benutzer (es sei denn, Sie möchten eine ganz bestimmte Bedeutung dieses Farbtons transportieren); Der Unterschied zwischen Farben ist.

Bei zwei oder mehr Farben können Sie sie unter Verwendung von colorsys in HLS umwandeln und prüfen, ob der Helligkeitsunterschied ausreicht. Ist die Differenz zu klein ist, erhöhen sie, wie folgt aus:

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 sind ein Open Source Online-Tool (geschrieben von Open-S und M. Faure), dass angesichts Vordergrund- und Hintergrundfarben, das Kontrastverhältnis berechnen, und wenn es nach WCAG Formel unzureichend ist, werden Sie eine Hintergrund- oder Vordergrundfarben mit ausreichendem Kontrastverhältnis und damit Optionen, die verschiedene Algorithmen verwenden (Sie müssen es angeben, wenn Sie die Vordergrund- oder die Hintergrundfarbe beibehalten möchten und wenn das Kontrastverhältnis höher als 4,5: 1 oder 3: 1 sein soll) Stufe AA - oder 7: 1/4,5: 1 - Stufe AAA).
Es ist ziemlich genau richtig für viele Paare von Farben.

Quellen - in Java - sind auf GitHub.

Hinweis: Farbblinde Menschen ("Menschen mit Farbdefiziten") sind, wie bereits in anderen Antworten beschrieben, nur ein Teil von Menschen, die von der Farbwahl betroffen sind: auch sehbehinderte Menschen.Und wenn ein Webdesigner #AAA auf #FFF wählt, ist das ein Problem für viele Menschen ohne Verlust der Sehkraft oder Farbwahrnehmung; Sie haben nur einen glänzenden Retina® Bildschirm bei nicht optimalen Lichtverhältnissen ...: p