Вычисление контрастных цветов в javascript

На одной из страниц, которые мы сейчас работаем над пользователями, можно изменить фон отображаемого текста.

Мы хотели бы автоматически изменить цвет переднего плана, чтобы поддерживать разумный контраст текста.

Мы также предпочли бы, чтобы диапазон цветов был дискреционным. Например, если фон меняется с белого на черный с шагом 255, мы не хотим видеть 255 оттенков цвета переднего плана. В этом сценарии, возможно, от 2 до 4, просто для поддержания разумного контраста.

Любые специалисты/дизайнеры/дизайнеры/художники UI, чтобы выжать формулу?

Ответ 1

С точки зрения чистой читаемости вы хотите использовать черно-белый текст на любом фоне. Поэтому конвертируйте RGB в HSV и просто проверьте, является ли V < 0,5. Если это так, белый, если нет, черный.

Попробуй это первым и посмотри, понравилось ли тебе это.

Если вы этого не сделаете, вы, вероятно, хотите, чтобы белый и черный не были настолько резкими, когда ваш фон слишком яркий или слишком темный. Чтобы уменьшить это значение, сохраните тот же оттенок и насыщенность и используйте эти значения для яркости:

background V  foreground V
0.0-0.25      0.75
0.25-0.5      1.0
0.5-0.75      0.0
0.75-1.0      0.25

На среднем цвете вы по-прежнему увидите черный или белый текст, который будет хорошо читаемым. На темном цвете или светлом цвете вы увидите один и тот же цветной текст, но по крайней мере 3/4 прочь с точки зрения яркости и, следовательно, еще читаемый. Надеюсь, это выглядит красиво:)

Ответ 2

Основа вашего черно-белого решения от яркости работает очень хорошо для меня. Luma - взвешенная сумма значений R, G и B, приспособленная для восприятия человеком относительной яркости, по-видимому, распространенная в видеоприложениях. Официальное определение яркости со временем изменилось с разным весом; см. здесь: http://en.wikipedia.org/wiki/Luma_ (видео). Я получил наилучшие результаты, используя Rec. 709, как в приведенном ниже коде. Возможно, черно-белый порог, возможно, 165.

function contrastingColor(color)
{
    return (luma(color) >= 165) ? '000' : 'fff';
}
function luma(color) // color can be a hx string or an array of RGB values 0-255
{
    var rgb = (typeof color === 'string') ? hexToRGBArray(color) : color;
    return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); // SMPTE C, Rec. 709 weightings
}
function hexToRGBArray(color)
{
    if (color.length === 3)
        color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);
    else if (color.length !== 6)
        throw('Invalid hex color: ' + color);
    var rgb = [];
    for (var i = 0; i <= 2; i++)
        rgb[i] = parseInt(color.substr(i * 2, 2), 16);
    return rgb;
}

Ответ 3

Попробуйте этот пример, который просто устанавливает его на черный или белый в зависимости от среднего значения r, g и b. Также полезно для тестирования! Замените лучший алгоритм там, если вы найдете случаи, которые не работают очень хорошо.

<html> 
<head> 
<script> 
function rgbstringToTriplet(rgbstring)
{
    var commadelim = rgbstring.substring(4,rgbstring.length-1);
var strings = commadelim.split(",");
var numeric = [];
for(var i=0; i<3; i++) { numeric[i] = parseInt(strings[i]); }
return numeric;
}

function adjustColour(someelement)
{
   var rgbstring = someelement.style.backgroundColor;
   var triplet = rgbstringToTriplet(rgbstring);
   var newtriplet = [];
   // black or white:
   var total = 0; for (var i=0; i<triplet.length; i++) { total += triplet[i]; } 
   if(total > (3*256/2)) {
     newtriplet = [0,0,0];
   } else {
 newtriplet = [255,255,255];
   }
   var newstring = "rgb("+newtriplet.join(",")+")";
   someelement.style.color = newstring;
   return true;
}

function randomiseBackground(someelement)
{
 var vals = [];
 for(var i=0; i<3; i++) { vals[i]=Math.floor(Math.random()*256+1); }
 someelement.style.backgroundColor="rgb("+vals.join(",")+")";
 return true;
}
</script> 
</head> 
<body onload="adjustColour(document.getElementById('mypara'));"> 
<p id="mypara" style="background-color:#2287ea">Some text</p> 
<form> 
    <input type=button onclick="var elem=document.getElementById('mypara'); randomiseBackground(elem); adjustColour(elem);" value="randomise background" /> 
</form> 
</body> 
</html>

Ответ 4

Вероятно, вы хотите изменить оттенок, но не насыщенность или значение.

Итак, преобразуйте значение RGB в HSV, добавьте 180 градусов к Н (по модулю 360 градусов) и конвертируйте обратно в RGB.

Конверсионный форумла здесь.

Ответ 5

Это немного сложнее t реализовать из-за javascript-способа работы с десятичными значениями. Для этого я нашел намного лучше, чтобы фон менял любой цвет, но текст только переключался между черным и белым. Если вы используете контрастные цвета, то много комбинаций будет очень сложно стоять. Также обратите внимание, что некоторые люди относятся к цветным следам, поэтому это не очень хорошая идея из перспективы доступности.