Gegeben eine Hintergrundfarbe, schwarzer oder weißer Text?

Question

Ich versuche eine Methode zu finden, um zu bestimmen, ob schwarzer oder weißer Text mit einer Hintergrundfarbe (als Hexadezimalwert) verwendet werden soll. Hat sich schon mal jemand damit beschäftigt? Gibt es einen effektiven Weg, dies zu tun?

In meinem Fall würde ich PHP verwenden, um die Logik zu implementieren (obwohl jede Erfahrung damit in anderen Sprachen willkommen ist).

Answer 1

Werfen Sie einen Blick auf dieser Seite: Calculating Color Contrast with PHP

Denken Sie daran, dass, wenn Schwarz und Weiß Ihre einzige Wahl ist sind Sie verpflichtet, Fälle haben, wo keiner von ihnen besonders großen Werken.

Answer 2

Eine einfache aber nicht perfekte Lösung wäre, die einzelnen Komponenten (RGB) zu summieren und je größer dieser Wert ist, desto "heller die Farbe". Für einen hohen Wert können Sie also Schwarz als Vordergrund und für einen niedrigen Wert Weiß verwenden.

Sie könnten diese Methode dann verbessern, indem Sie spezielle Fälle für Graustufenfarben (R = G = B) festlegen, die bis auf sehr dunkles Grau weißen Text nicht gut darstellen.

Bearbeiten: Dies bedeutet natürlich, dass Sie wissen müssen, das Format von RGB-Speicher in Ihrem Hexadezimalwert, Standard 24bpp Speicher ist 0x00RRGGBB für die 8 Hexadezimalziffern.

Answer 3

Ich würde den Durchschnittswert der RGB-Komponenten berechnen und dann entscheiden, ob schwarz oder weiß, z. weiß bis zu 0x66

Answer 4

Hier ist ein Algorithmus, der verwendet werden kann, eine Helligkeit Kontrastverhältnis Ihres Textes zu berechnen:

http://juicystudio.com/services/aertcolourcontrast.php

Sie diese Formel mit weißen und schwarzen Werte verwenden könnte zu berechnen, die Sie gibt das höhere Verhältnis und folglich lesbarerer Text.

Answer 5

Sie sollten sich the CSS Color library ansehen. Es ist in PHP implementiert und erledigt die ganze Arbeit für Sie.

Answer 6

function getTextColour($hex){ 
    list($red, $green, $blue) = sscanf($hex, "#%02x%02x%02x"); 
    $luma = ($red + $green + $blue)/3; 

    if ($luma < 128){ 
     $textcolour = "white"; 
    }else{ 
     $textcolour = "black"; 
    } 
    return $textcolour; 
    } 

Answer 7

Ich denke, die beste Art und Weise der Luminosity Contrast Algorithmus ist:

ADVISE: Die nächsten Funktionen gut funktioniert die meiste Zeit, aber manchmal gibt es Farben, in denen es nicht funktioniert richtig.

public function getContrastColor($hexColor) { 

     //////////// hexColor RGB 
     $R1 = hexdec(substr($hexColor, 0, 2)); 
     $G1 = hexdec(substr($hexColor, 2, 2)); 
     $B1 = hexdec(substr($hexColor, 4, 2)); 

     //////////// Black RGB 
     $blackColor = "#000000"; 
     $R2BlackColor = hexdec(substr($blackColor, 0, 2)); 
     $G2BlackColor = hexdec(substr($blackColor, 2, 2)); 
     $B2BlackColor = hexdec(substr($blackColor, 4, 2)); 

     //////////// Calc contrast ratio 
     $L1 = 0.2126 * pow($R1/255, 2.2) + 
       0.7152 * pow($G1/255, 2.2) + 
       0.0722 * pow($B1/255, 2.2); 

     $L2 = 0.2126 * pow($R2BlackColor/255, 2.2) + 
       0.7152 * pow($G2BlackColor/255, 2.2) + 
       0.0722 * pow($B2BlackColor/255, 2.2); 

     $contrastRatio = 0; 
     if ($L1 > $L2) { 
      $contrastRatio = (int)(($L1 + 0.05)/($L2 + 0.05)); 
     } else { 
      $contrastRatio = (int)(($L2 + 0.05)/($L1 + 0.05)); 
     } 

     //////////// If contrast is more than 5, return black color 
     if ($contrastRatio > 5) { 
      return 'black'; 
     } else { //////////// if not, return white color. 
      return 'white'; 
     } 
} 

Einige Ergebnisse:

HINWEIS:Die Schriftfarbe von der vorherigen Funktion bestimmt wird. Die Zahl in Klammern ist das Kontrastverhältnis.

---

Ein weiteres simpliest und weniger präziseYIQ genannt (weil es den RGB-Farbraum in YIQ umwandelt):

public function getContrastColor($hexcolor) {    
    $r = hexdec(substr($hexcolor, 0, 2)); 
    $g = hexdec(substr($hexcolor, 2, 2)); 
    $b = hexdec(substr($hexcolor, 4, 2)); 
    $yiq = (($r * 299) + ($g * 587) + ($b * 114))/1000; 
    return ($yiq >= 128) ? 'black' : 'white'; 
}