Comment calculer par programme le rapport de contraste entre deux couleurs ?

Question

C'est assez simple, il suffit de prendre le jaune et le blanc :

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

Quelle loi physique, sur la Terre de Dieu des constantes universelles, explique que le texte jaune ne puisse pas être lu sur un fond blanc alors que le texte bleu le peut ?

Pour les besoins de mon widget personnalisable, j'ai essayé tous les modèles de couleurs possibles pour lesquels j'ai trouvé des fonctions de conversion ; on ne peut pas non plus dire que le vert peut être sur du blanc et que le jaune ne le peut pas, en se basant uniquement sur des comparaisons numériques.

J'ai regardé Adsense (qui est créé par le Bouddha de l'Internet) et devinez ce qu'ils ont fait, ils ont créé des préréglages et des cellules de couleur pour calculer la distance. Je ne peux pas faire ça. Mes utilisateurs ont le droit de choisir les combinaisons les plus inesthétiques et les plus inflammatoires pour la rétine, tant que le texte reste lisible.

Answer 1

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;

};

Answer 2

Pour calculer le contraste de manière programmatique, vous pouvez utiliser la fonction Paquet de couleurs NPM ; si vous voulez juste un outil pour comparer les couleurs, vous pouvez utiliser un Calculateur de rapport de contraste