Как изменить текст цвета в зависимости от фона?

Ссылка скопирована
CSS HTML JavaScript
7 февраля 2026 1 ответ

Здравствуйте, может кто-то подобное решал, нужно изменить цвет текста в зависимости от фона, например фон темный - цвет текста белый, фон белый - цвет текста черный.
Вот как это должно выглядеть в дизайне:

Как изменить текст цвета в зависимости от фона?

Изучаю верстку и с таким еще не сталкивался, сайт многостраничный и в дальнейшем хочу попробовать посадить его на WP, поэтому желательно один header и простыми добавлениями классов к нужному пункту в меню не вариант.
Буду рад если кто-то подскажет как такое реализовать, а то гуглил и находил пару вариантов реализации, но они не работали

Дополнительно:

https://developer.mozilla.org/ru/docs/Web/CSS/mix-... ?

  • imko, не совсем понимаю какое свойство использовать в моем случае и применяется ли оно к тексту + фону ?
  • bazliiii, читайте) на то это и комментарий а не ответ) В целом идея - задать тексту цвет с прозрачностью, смешивать его с фоном шапки каким-либо образом
  • Не знаю, как получится на практике. Я бы назначил цвет текста inherit, и свойство filter: invert(желаемый процент);
    https://developer.mozilla.org/ru/docs/Web/CSS/filt...
  • imko, Это для предопределённых статических цветов. А цвет текста должен адаптироваться к изменениям цвета фона.
  • SmartReptiloid, Хорошее решение, если цвет фона однородный. А если он картинка?..
    Кстати, а может можно тексту назначить в качестве цвета картинку?
  • pddev, А если фон - картинка, то делайте текст с обводкой. Тогда он будет читаться на любом фоне.
  • Rsa97, понятное дело, но суть в том что бы не откланяться от изначального дизайна. Как-то же люди такое делают
  • pddev, Не совсем понял идею

    • Ответы:

    Если вам подойдет использование js, то можно попробовать рассмотреть такой пример:

    <!DOCTYPE html> <html lang="en"> <head>   <script src="script.js"></script>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="styles.css">   <title>Dynamic Text Color</title> </head> <body>   <div class="container">     <p id="content">Ваш текст.</p>   </div> </body> </html>

    <!DOCTYPE html> <html lang="en"> <head> <script src="script.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Dynamic Text Color</title> </head> <body> <div class="container"> <p id="content">Ваш текст.</p> </div> </body> </html>

    Css:

    body {   margin: 0;   padding: 0;   font-family: Arial, sans-serif; }  .container {   width: 100%;   height: 100vh;   display: flex;   justify-content: center;   align-items: center;   background-color: white; /* Default background color */ }  .container.dark {   background-color: black; /* Dark background color */   color: white; /* Text color for dark background */ }

    body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: white; /* Default background color */ } .container.dark { background-color: black; /* Dark background color */ color: white; /* Text color for dark background */ }

    JS:

    const container = document.querySelector('.container'); const content = document.getElementById('content');  // Функция для определения цвета фона function getBackgroundColor(element) {   const bgColor = window.getComputedStyle(element).backgroundColor;   return bgColor; }  // Функция для определения оптимального цвета текста function getTextColor(backgroundColor) {   // Пример простой проверки на светлый или тёмный цвет фона   const rgb = backgroundColor.match(/d+/g);   const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000;    return brightness >= 128 ? 'black' : 'white'; }  // Изменение цвета текста в зависимости от цвета фона function updateTextColor() {   const bgColor = getBackgroundColor(container);   const textColor = getTextColor(bgColor);   content.style.color = textColor; }  // Обновляем цвет текста при загрузке и изменении размера окна window.addEventListener('load', updateTextColor); window.addEventListener('resize', updateTextColor);

    const container = document.querySelector('.container'); const content = document.getElementById('content'); // Функция для определения цвета фона function getBackgroundColor(element) { const bgColor = window.getComputedStyle(element).backgroundColor; return bgColor; } // Функция для определения оптимального цвета текста function getTextColor(backgroundColor) { // Пример простой проверки на светлый или тёмный цвет фона const rgb = backgroundColor.match(/d+/g); const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000; return brightness >= 128 ? 'black' : 'white'; } // Изменение цвета текста в зависимости от цвета фона function updateTextColor() { const bgColor = getBackgroundColor(container); const textColor = getTextColor(bgColor); content.style.color = textColor; } // Обновляем цвет текста при загрузке и изменении размера окна window.addEventListener('load', updateTextColor); window.addEventListener('resize', updateTextColor);

    P.S Нагенерил код gpt

    • Он странно работает, я бы даже сказал не работает. Я пробовал у gpt генерировать, но ничего путного пока что не получилось
    • Он перекрашивает все пункты в черный независимо от цвета фона, ставил и темный фон и белый и градиент
    • bazliiii, вот у gpt уточнил, он вроде дополнил чтобы работало с градиентами. Сказал что код измеряет контрастность и в зависимости от этого меняет цвет текста. Звучит рабоче) 
      const content = document.getElementById('content');  // Функция для определения контрастности между двумя цветами function getContrastRatio(color1, color2) {   const lum1 = getRelativeLuminance(color1);   const lum2 = getRelativeLuminance(color2);   const brightest = Math.max(lum1, lum2);   const darkest = Math.min(lum1, lum2);    return (brightest + 0.05) / (darkest + 0.05); }  // Функция для вычисления относительной яркости цвета function getRelativeLuminance(color) {   const rgb = color.match(/d+/g);   const srgb = rgb.map(value => value / 255);    for (let i = 0; i < srgb.length; i++) {     if (srgb[i] <= 0.03928) {       srgb[i] /= 12.92;     } else {       srgb[i] = Math.pow((srgb[i] + 0.055) / 1.055, 2.4);     }   }    return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2]; }  // Изменение цвета текста в зависимости от контрастности фона function updateTextColor() {   const bgColor = window.getComputedStyle(document.body).backgroundColor;   const textColor = getContrastRatio(bgColor, 'white') >= getContrastRatio(bgColor, 'black') ? 'white' : 'black';   content.style.color = textColor; }  // Обновляем цвет текста при загрузке и изменении размера окна window.addEventListener('load', updateTextColor); window.addEventListener('resize', updateTextColor);

      const content = document.getElementById('content'); // Функция для определения контрастности между двумя цветами function getContrastRatio(color1, color2) { const lum1 = getRelativeLuminance(color1); const lum2 = getRelativeLuminance(color2); const brightest = Math.max(lum1, lum2); const darkest = Math.min(lum1, lum2); return (brightest + 0.05) / (darkest + 0.05); } // Функция для вычисления относительной яркости цвета function getRelativeLuminance(color) { const rgb = color.match(/d+/g); const srgb = rgb.map(value => value / 255); for (let i = 0; i < srgb.length; i++) { if (srgb[i] <= 0.03928) { srgb[i] /= 12.92; } else { srgb[i] = Math.pow((srgb[i] + 0.055) / 1.055, 2.4); } } return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2]; } // Изменение цвета текста в зависимости от контрастности фона function updateTextColor() { const bgColor = window.getComputedStyle(document.body).backgroundColor; const textColor = getContrastRatio(bgColor, 'white') >= getContrastRatio(bgColor, 'black') ? 'white' : 'black'; content.style.color = textColor; } // Обновляем цвет текста при загрузке и изменении размера окна window.addEventListener('load', updateTextColor); window.addEventListener('resize', updateTextColor);

    • Артём Варламов, градиент я как пример сделал, по сути там часть серое фото ( на цвете серого фоно нужен белый текст и белый фон, на нем нужен черный текст )
    • bazliiii, А, там фото а не бэкграунд?
    • Часть фото, часть бэкграунд
    • bazliiii, Где иконка я так понимаю фото?

    Погуглите в сторону css-свойства:

    mix-blend-mode

    Кажется это именно то що вам надо, но на старых браузерах может не работать.

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Мария Код Ответ

    Для того чтобы изменить текст цвета в зависимости от фона, необходимо учитывать контрастность между текстом и фоном. Это важно для того, чтобы текст был читаемым и пользователи могли легко воспринимать информацию.

    Есть несколько способов, которые можно применить для достижения этой цели. Один из них - использование функции `contrast()` в CSS. Эта функция вычисляет контраст между двумя цветами и возвращает значение от 0 до 21. Чем выше значение контраста, тем лучше текст будет виден на фоне.

    Пример использования функции `contrast()` в CSS:

    .text {
    color: white; /* Цвет текста */
    background: black; /* Цвет фона */
}
 
/* Проверяем контраст между цветом текста и фоном */
.text {
    color: if(contrast(white, black) > 4.5, white, black);
}

    .text { color: white; /* Цвет текста */ background: black; /* Цвет фона */ } /* Проверяем контраст между цветом текста и фоном */ .text { color: if(contrast(white, black) > 4.5, white, black); }

    Если контраст между белым текстом и черным фоном больше 4.5, то текст будет белым, иначе он будет черным. Это поможет обеспечить хорошую читаемость текста на фоне.

    Также можно использовать другие методы, такие как использование полупрозрачных цветов или текстовых эффектов (например, тень), чтобы улучшить читаемость текста на различных фонах.

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

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов