Расчет контрастных цветов в JavaScript
В Великобритании также лучше всего включить реальный физический адрес для вашей компании и ее зарегистрированный номер.
Таким образом, все это открыто и честно, и они с меньшей вероятностью будут вручную отмечать его как спам .
4 ответа
С точки зрения чистой удобочитаемости Вы хотите использовать черно-белый текст на любом фоне, который это. Поэтому преобразуйте 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 далеко с точки зрения яркости и поэтому все еще читаемый. Я надеюсь, что это выглядит хорошим:)
-
1Спецификация: w3.org/TR/SVG11/filters.html#FilterEffectsRegion – Tangui 2 July 2011 в 11:11
Это немного сложно реализация t из-за способа JavaScript иметь дело с десятичными значениями. С этой целью я нашел, что это намного лучше позволить фону изменить любой цвет, но текст просто переключается между черным цветом и белым цветом. При использовании контрастирующих цветов, много комбинаций будет действительно трудно стоять. Также обратите внимание, что некоторые люди являются страдающими дальтонизмом, таким образом, это не очень хорошая идея с точки зрения доступности.
-
1Ссылка на документацию WebGrid устарела (перенаправления к другой странице) – Androiderson 8 October 2012 в 14:29
Вы, вероятно, хотите сместить оттенок, но не насыщенность или значение.
Так, преобразуйте свое значение RGB в HSV, добавьте 180 градусов к H (360 градусов по модулю, конечно) и преобразуйте назад в RGB.
Попробуйте этот пример , который просто устанавливает его на черный цвет или белый цвет в зависимости от среднего числа 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>