Kontrastfarbe automatisch berechnen mit jquery/Javascript

Das hat jetzt mit WordPress nur insoweit was zu tun, als ich eine Anforderung vom Kunden hatte, ein Info-Widget mit in zufälligen Intervallen wechselnden Farben zu hinterlegen, der wollte das halt gern so haben. Dabei stellte sich aber gleich die Herausforderung, dass der Text (default schwarz) bei dunklen Hintergrundfarben natürlich schlecht bis gar nicht zu lesen war. Will heissen, die Textfarbe sollte dann auch dynamisch angepasst werden, und das mach ich mit jquery/Javascript. Dafür hab ich mir eine Lösungsstrategie zusammengegooglet, die man vielleicht mal irgendwo anders brauchen kann, deswegen kommt sie hier rein.

Zufällige Farbe für den Hintergrund bestimmen

Dafür habe ich mir dieses recht überschaubare Snippet ergooglet, das sehr zuverlässig funktioniert:

//******Zufällige Hex-Farbe erzeugen*********************/
    function randomColor(){
    
    var x=Math.round(0xffffff * Math.random()).toString(16);
    var y=(6-x.length);
    var z="000000";
    var z1 = z.substring(0,y);
    var color= "#" + z1 + x;
    
    return color;
    }

Relative (wahrgenommene) Helligkeit einer Farbe bestimmen

Dafür gibt es vom w3c eine Faustformel, die ich für den Kontrast bei barrierefreien Seiten immer wieder mal brauche, die geht so:

//***********relative Helligkeit von r,g,b bestimmen
    function Brightness(r, g, b)
    {
       return Math.sqrt(
          r * r * .241 + 
          g * g * .691 + 
          b * b * .068);
    }

Man füttert sie mit den RGB-Werten einer Farbe und kriegt einen Wert zwischen 0 und 255 heraus, der die relative Helligkeit einer Farbe bezeichnet. Man nimmt dann als Kontrastfarbe für die untere Hälfte des Farbspektrums weiß, für die obere Hälfte schwarz. Den Schwellwert von 130 kann man nach Geschmack noch ein bisschen nach oben oder unten anpassen.

//****************Textfarbe je nach Schwellwert zurückgeben
    function textfarbe(helligkeit){
    if (helligkeit > 130){return 'black'}
    if (helligkeit <= 130){return 'white'}

    }

Wir haben Hex und brauchen RGB

Deswegen gibts noch eine Umwandlungsfunktion, die uns den Hex-String zerlegt und die RGB_Werte liefert:

//************rgb-Werte aus hex holen
    function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
    function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
    function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
    function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

var R = hexToR(aktfarbe);
var G = hexToG(aktfarbe);
var B = hexToB(aktfarbe);

Mit den drei Variablen kann man dann die Funktion Brightness() aufrufen, und mit der wiederum die Funktion textfarbe(), die uns dann schlussendlich die passende Kontrastfarbe für unsere zufällige Hintergrundfarbe liefert. Ich gebe zu es ist ein bisschen von hinten durch die Brust ins Auge, aber es funktioniert. Hier mal das ganze Script zum Nachvollziehen:

Das Script

<script>
    $(document).ready(function(){
    setInterval(farbwechsler, 5000)
    farbwechsler();
    
    //******Zufällige Hex-Farbe erzeugen*********************/
    function randomColor(){
    
    var x=Math.round(0xffffff * Math.random()).toString(16);
    var y=(6-x.length);
    var z="000000";
    var z1 = z.substring(0,y);
    var color= "#" + z1 + x;
    
    return color;
    }

    //************rgb-Werte aus hex holen
    function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
    function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
    function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
    function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
    
    //***********relative Helligkeit von r,g,b bestimmen
    function Brightness(r, g, b)
    {
       return Math.sqrt(
          r * r * .241 + 
          g * g * .691 + 
          b * b * .068);
    }
    
    //****************Textfarbe je nach Schwellwert zurückgeben
    function textfarbe(helligkeit){
    if (helligkeit > 130){return 'black'}
    if (helligkeit < 130){return 'white'}

    }
        
function farbwechsler(){

var aktfarbe = randomColor();

var R = hexToR(aktfarbe);
var G = hexToG(aktfarbe);
var B = hexToB(aktfarbe);


           document.getElementById("zufall").style.backgroundColor = aktfarbe;
           document.getElementById("inhalt").innerHTML ="Hex: "+ aktfarbe;
           document.getElementById("rgb").innerHTML = "rgb: "+R+", "+G+", "+B;
           document.getElementById("brightness").innerHTML ="Helligkeit: "+ Brightness(R,G,B);
           document.getElementById("schrift").style.backgroundColor = aktfarbe;
           document.getElementById("schrift").style.color = textfarbe(Brightness(R,G,B));
           }

    
  })
</script>

Ich hab mal die Funktion farbwechsler() auf alle 5 Sekunden gesetzt, für den Demo-Effekt.

Und hier noch das passende HTML zum Ausprobieren:

<body>

<h1>Beispiel Contrast Colors mit Javascript</h1>
<div id = "zufall">Schriftfarbe statisch</div>
<div id="inhalt">...</div>
<div id="rgb">...</div>
<div id="brightness">...</div>
<div id="schrift"><h1>Schriftfarbe dynamisch</h1></div>

</body>

Das wars! So gibt es immer lesbare Schrift auch auf zufällig generierten Hintergrundfarben.

2 Gedanken zu „Kontrastfarbe automatisch berechnen mit jquery/Javascript

  1. Frank Becker

    Vielen Dank für das Script. Beim Einbauen in meine Umgebung ist mir ein kleiner logischer Fehler in der Funktion Textfarbe aufgefallen. Die Bedingung löst nicht aus bei einem Wert von genau 130.

    if (helligkeit > 130){return ‚black‘}
    if (helligkeit = 130){return ‚black‘}
    if (helligkeit < 130){return 'white'}

    Ansonsten super! Viiilen Dank

    Antworten
    1. admin Beitragsautor

      Oh. da hast du einen echten kleinen Bug gefunden, vielen Dank! 🙂
      Freut mich, wenn du mein Skript verwenden konntest.

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.