2010-04-12 6 views
5

Ich suche eine zu finden, warum eine geeignete Hintergrundfarbe und eine Farbe für den Text zu berechnen, die über die Spitze gehen würde, natürlich muss ich berücksichtigen Lesbarkeit und Zugänglichkeit nehmen.Die Wahl geeigneter Hintergrund/Vordergrundfarbe mit PHP

ich brauchen würde, um die zwei Farben aus dem Array zu holen, werden die Farben in ihren hex Darstellungen gespeichert.

#CC9966 
#996633 
#FFCC99 
#CCCC99 
#000000 
#333333 
#666633 
#663333 
#CC9933 
#FFCCCC 

ich eine PHP-Bibliothek wie GD/ImageMagick verwenden kann?

Irgendwelche Vorschläge (Bitte beachten Sie, ich PHP verwende)

Antwort

2

Zunächst einmal denke ich, Sie bei Particletree einen Blick auf dieser ausgezeichneten Blog-Post zu nehmen.

Davon abgesehen, würde ich ihre smarty_modifier_contrast() Funktion verwenden und es ein wenig ändern, um Ihre spezifischen Bedürfnisse zu adressieren, so etwas wie:

function color_contrast($bgcolor, $color1, $color2, $color3, ...) 
{ 
    return (hexdec($bgcolor) > 0xffffff/2) ? min(array_slice(func_get_args(), 1)) : max(array_slice(func_get_args(), 1)); 
} 

So würden Sie brauchen nur jede beliebige Farbe für die verwenden Hintergrund (vergessen Sie nicht, die fallen!) und dann alle anderen Farben an das Array übergeben, in diesem Fall habe ich eine variable Anzahl von Argumenten verwendet, aber Sie können es ändern, so dass es eine einzige akzeptiert Reihe von Farben - es wird dann automatisch die dunkelste oder die hellste Farbe auswählen, abhängig von der $bgcolor und gut genug Kontrast zur besseren Lesbarkeit bieten:

function color_contrast($bgcolor, $colors = array()) 
{ 
    return (hexdec($bgcolor) > 0xffffff/2) ? min($colors) : max($colors); 
} 

die $bgcolor zu wählen, können Sie es dem Zufall tun, wie ich vor der Verwendung, sagte eine zweite Funktion, die Sie mit dieser Aufgabe wie Sättigung oder Luminanz helfen Das hängt wirklich davon ab, was du suchst.

0

Pause jede Farbe in seine RGB-Komponenten, fügen 0x80 (oder einen anderen ähnlichen Wert, vielleicht 0x66) an jeden, Maske von 0xff, und finden Sie den nächsten Wert in der Tabelle.

+0

Haben Sie so etwas wie $ newRed = (($ rgb [ 'red'] + 0x80) * 0xFF) bedeuten; Wobei $ rgb ['red'] eigentlich so etwas wie 163 – Lizard

+0

'& 0xff' ist. Aber ja. –

1

zufällige Auswahl der Farben ist in der Regel keine gute Idee, um die Lesbarkeit und Zugänglichkeit, also würde ich vorschlagen, dass Sie Ihr Design überdenken. Oder beschränken Sie den Text zumindest auf Schwarz oder Weiß.

Wenn das keine Option ist, würde ich vorschlagen, einen "Abstand" zwischen zwei Farben zu berechnen, der ungefähr dem visuellen Unterschied zwischen den Farben entspricht und somit auch etwas mit der Lesbarkeit zu tun hat.

würde ich distance = abs(2*(r1-r2) + 3*(g1-g2) + (b1-b2)), verwenden und dann eine beliebige Kombination herauszufiltern, die keine ausreichend hohe Abstand hat. Dies sollte sicherstellen, dass Sie entweder eine dunkle Farbe auf einem hellen Hintergrund oder eine helle Farbe auf einem dunklen Hintergrund haben, was so gut wie Voraussetzung für eine gute Lesbarkeit ist, und gewährleistet, dass Farbenblinde auch zwei deutlich unterschiedliche Farbtöne sehen. Die Farbkomponenten werden unterschiedlich gewichtet, da sie unterschiedliche Auswirkungen auf die wahrgenommene Gesamthelligkeit haben.