Wie kann das Kontrastverhältnis zwischen zwei Farben programmgesteuert berechnet werden?

Ziemlich einfach, nimm gelb und weiß:

back_color = {r:255,g:255,b:255}; //white
text_color = {r:255,g:255,b:0}; //yellow

Welches Gesetz der Physik auf Gottes Erde der universellen Konstanten macht die Tatsache aus, dass gelber Text nicht auf weißem Hintergrund gelesen werden kann, blauer Text jedoch?

Für mein anpassbares Widget habe ich alle möglichen Farbmodelle ausprobiert, für die ich Konvertierungsfunktionen gefunden habe. Keiner kann sagen, dass Grün auf Weiß sein kann und Gelb nicht, basierend auf nur numerischen Vergleichen.

Ich habe mir Adsense angesehen (das von der Budda des gesamten Internets erstellt wurde) und erraten, was sie getan haben. Sie haben Voreinstellungen und Berechnungen der Entfernung von Farbzellen vorgenommen. Das kann ich nicht machen. Meine Benutzer haben das Recht, selbst die entzündungshemmendsten, unästhetischsten Kombinationen auszuwählen, solange der Text noch gelesen werden kann.

Laut Wikipedia muss bei der Konvertierung in die Graustufendarstellung der Luminanz "die Werte für Rot, Grün und Blau ermittelt werden" und im nächsten Verhältnis gemischt werden: R: 30% G: 59% B: 11%

Daher hat Weiß eine Leuchtdichte von 100% und Gelb eine Leuchtdichte von 89%. Gleichzeitig hat Grün nur 59%. 11% sind fast viermal niedriger als 41% Unterschied!

Und selbst lime ( #00ff00) eignet sich nicht zum Lesen großer Textmengen.

IMHO für gute Kontrastfarben sollte die Helligkeit mindestens um 50% abweichen. Und diese Helligkeit sollte als in Graustufen umgewandelt gemessen werden.

upd : Kürzlich wurde ein umfassendes Tool für das im Web gefunden, das in der Reihenfolge die Formel aus dem w3-Dokument verwendet. Die Schwellenwerte können aus # 1.4 entnommen werden. Hier ist eine Implementierung für diese fortgeschrittenere Sache.

function luminanace(r, g, b) {
    var a = [r, g, b].map(function (v) {
        v /= 255;
        return v <= 0.03928
            ? v / 12.92
            : Math.pow( (v + 0.055) / 1.055, 2.4 );
    });
    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
function contrast(rgb1, rgb2) {
    var lum1 = luminanace(rgb1[0], rgb1[1], rgb1[2]);
    var lum2 = luminanace(rgb2[0], rgb2[1], rgb2[2]);
    var brightest = Math.max(lum1, lum2);
    var darkest = Math.min(lum1, lum2);
    return (brightest + 0.05)
         / (darkest + 0.05);
}
contrast([255, 255, 255], [255, 255, 0]); // 1.074 for yellow
contrast([255, 255, 255], [0, 0, 255]); // 8.592 for blue
// minimal recommended contrast ratio is 4.5, or 3 for larger font-sizes

Weitere Informationen zur Berechnung dieses Werts finden Sie in der WCAG 2.0-Dokumentation .

Es gibt verschiedene Methoden zur Berechnung des Kontrasts, aber eine übliche Methode ist diese Formel:

brightness = (299*R + 587*G + 114*B) / 1000

Sie tun dies für beide Farben und nehmen dann den Unterschied. Dies ergibt offensichtlich einen viel größeren Kontrast für Blau auf Weiß als für Gelb auf Weiß.

Kürzlich bin ich auf die Antwort auf dieser Seite gestoßen und habe mit dem Code ein Skript für Adobe Illustrator erstellt, um die Kontrastverhältnisse zu berechnen.

Hier sehen Sie das Ergebnis: http://screencast.com/t/utT481Ut

Einige der Kurznotationen des obigen Skripts waren für mich verwirrend und funktionierten nicht in Adobe Extend Script. Daher dachte ich, es wäre schön, meine Verbesserung / Interpretation des Codes zu teilen, den kirilloid geteilt hat.

function luminance(r, g, b) {
    var colorArray = [r, g, b];
    var colorFactor;
    var i;
    for (i = 0; i < colorArray.length; i++) {
        colorFactor = colorArray[i] / 255;
        if (colorFactor <= 0.03928) {
            colorFactor = colorFactor / 12.92;
        } else {
            colorFactor = Math.pow(((colorFactor + 0.055) / 1.055), 2.4);
        }
        colorArray[i] = colorFactor;
    }
    return (colorArray[0] * 0.2126 + colorArray[1] * 0.7152 + colorArray[2] * 0.0722) + 0.05;
}

Und natürlich müssen Sie diese Funktion aufrufen

Innerhalb einer for-Schleife bekomme ich alle Farben von meinem Illustrator-Objekt

//just a snippet here to demonstrate the notation
var selection = app.activeDocument.selection;
for (i = 0; i < selection.length; i++) {
   red[i] = selection[i].fillColor.red;
   //I left out the rest,because it would become to long
}

//this can then be used to calculate the contrast ratio.
var foreGround = luminance(red[0], green[0], blue[0]);
var background = luminance(red[1], green[1], blue[1]);
luminanceValue = foreGround / background;
luminanceValue = round(luminanceValue, 2);

//for rounding the numbers I use this function:
function round(number, decimals) {
   return +(Math.round(number + "e+" + decimals) + "e-" + decimals);
}

Weitere Informationen zum Kontrastverhältnis: http://webaim.org/resources/contrastchecker/

Basierend auf der kirilloiden Antwort:

Angular Service, der Kontrast und Lumineszenz berechnet, indem der Hex-Wert eingegeben wird:

.service('ColorContrast', [function() {
var self = this;

/**
 * Return iluminance value (base for getting the contrast)
 */
self.calculateIlluminance = function(hexColor) {
    return calculateIluminance(hexColor);
};

/**
 * Calculate contrast value to white
 */
self.contrastToWhite = function(hexColor){
    var whiteIlluminance = 1;
    var illuminance = calculateIlluminance(hexColor);
    return whiteIlluminance / illuminance;
};

/**
* Bool if there is enough contrast to white
*/
self.isContrastOkToWhite = function(hexColor){
    return self.contrastToWhite(hexColor) > 4.5;
};

/**
 * Convert HEX color to RGB
 */
var hex2Rgb = function(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
};

/**
 * Calculate iluminance
 */
var calculateIlluminance = function(hexColor) {
    var rgbColor = hex2Rgb(hexColor);
    var r = rgbColor.r, g = rgbColor.g, b = rgbColor.b;
    var a = [r, g, b].map(function(v) {
        v /= 255;
        return (v <= 0.03928) ?
            v / 12.92 :
            Math.pow(((v + 0.055) / 1.055), 2.4);
    });
    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
};

}]);

module.exports = function colorcontrast (hex) {
    var color = {};

    color.contrast = function(rgb) {
        // check if we are receiving an element or element background-color
        if (rgb instanceof jQuery) {
            // get element background-color
            rgb = rgb.css('background-color');
        } else if (typeof rgb !== 'string') {
            return;
        }

        // Strip everything except the integers eg. "rgb(" and ")" and " "
        rgb = rgb.split(/\(([^)]+)\)/)[1].replace(/ /g, '');

        // map RGB values to variables
        var r = parseInt(rgb.split(',')[0], 10),
            g = parseInt(rgb.split(',')[1], 10),
            b = parseInt(rgb.split(',')[2], 10),
            a;

        // if RGBA, map alpha to variable (not currently in use)
        if (rgb.split(',')[3] !== null) {
            a = parseInt(rgb.split(',')[3], 10);
        }

        // calculate contrast of color (standard grayscale algorithmic formula)
        var contrast = (Math.round(r * 299) + Math.round(g * 587) + Math.round(b * 114)) / 1000;

        return (contrast >= 128) ? 'black' : 'white';
    };

    // Return public interface
    return color;

};

const getLuminanace = (values) => {
  const rgb = values.map((v) => {
    const val = v / 255;
    return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
  });
  return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
};

const getContrastRatio = (colorA, colorB) => {
  const lumA = getLuminanace(colorA);
  const lumB = getLuminanace(colorB);

  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
};

// usage:
const back_color = [255,255,255]; //white
const text_color = [255,255,0]; //yellow

getContrastRatio(back_color, text_color); // 1.0736196319018405