Можно ли сделать программу Javascript, которая автоматически меняет цвет текста на контраст фона?
У меня есть этот код Javascript и HTML, который меняет цвет фона, используя ввод с типом цвета.
Вот код:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
outline: none;
border: none;
background: none;
}
</style>
</head>
<body>
Change the color of the background:
<input type = "color" value = "#000000" name = "bgcolor" id = "bgcolor" />
<script>
const color = document.getElementById("bgcolor");
color.addEventListener("change", () => {
document.body.style.background = color.value;
});
</script>
</body>
</html>
Таким образом, это изменяет цвет фона страницы, когда пользователь меняет цвет в цветовой палитре, созданной <input type = "color" value = "#000000" name = "bgcolor" id = "bgcolor" /> .
Теперь представьте ситуацию, в которой пользователь выбирает черный цвет в качестве фона, а цвет текста по умолчанию также черный. Теперь есть две вещи, которые мы можем сделать:
Дайте возможность изменить цвет текста самостоятельно или изменить цвет текста на контраст фона автоматически.
Я хочу выбрать второй вариант, так как он немного красивее и выглядит немного более продвинутым для пользователя, как дополнительная продвинутая вещь, чтобы произвести впечатление на пользователей.
Итак, как мне реализовать второй вариант, может кто-нибудь объяснить мне, как изменить цвет текста на полную контрастность фона автоматически, когда пользователь устанавливает фон.
Я думаю, это может решить вашу проблему: stackoverflow.com/a/35970186/14201528
Дубликат: Как я могу сгенерировать противоположный цвет в соответствии с текущим цветом?
@ChrisG нет, я думаю, что моя ситуация немного отличается, я не хочу преобразовывать его в rgb, а затем обратно в шестнадцатеричный и прочее, что я просмотрел в ответах, но никто не помог.
@Vibhor Да, это помогло мне, но все же я немного застрял здесь, не смог понять некоторые концепции
@secan нет, извините, это не так
но спасибо @everyone, потому что все комментарии помогли, но ответ ниже был именно тем, что я хотел сделать
Чем именно отличается ваша ситуация...? Что еще должен означать change the text's color to its background's contrast automatically. тогда? Тот факт, что вы не понимаете код в существующих ответах, не означает, что ваш вопрос не является обманом.
@ChrisG хорошо, вы можете закрыть мой вопрос, но обратите внимание, что приведенный ниже ответ решил мою проблему, другие просто не подходили для моего кода, и многое из того, что я не смог понять.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Интересные ресурсы для этого:
- W3C — убедитесь, что сочетания цветов переднего плана и фона обеспечивают достаточную контрастность
- Расчет воспринимаемой яркости цвета
Вот алгоритм W3C (с демо JSFiddle тоже):
const rgb = [255, 0, 0];
// Randomly change to showcase updates
setInterval(setContrast, 1000);
function setContrast() {
// Randomly update colours
rgb[0] = Math.round(Math.random() * 255);
rgb[1] = Math.round(Math.random() * 255);
rgb[2] = Math.round(Math.random() * 255);
// http://www.w3.org/TR/AERT#color-contrast
const brightness = Math.round(((parseInt(rgb[0]) * 299) +
(parseInt(rgb[1]) * 587) +
(parseInt(rgb[2]) * 114)) / 1000);
const textColour = (brightness > 125) ? 'black' : 'white';
const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
$('#bg').css('color', textColour);
$('#bg').css('background-color', backgroundColour);
}#bg {
width: 200px;
height: 50px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "bg">Text Example</div>
Такой цвет, как
#ff0000, означаетFFдля красного и00для зеленого и синего. Вам нужно извлечь эти значения, разобрать их на 0-255 целых чисел, а затем вычесть каждое из них из 255, чтобы получить значение контраста. Теперь превратите их обратно в шестнадцатеричный формат, сложите вместе и используйте в качестве цвета текста.