Цвет текста на фоне

153

17 апреля 2018, 03:51

Возник вопрос: Есть панель, которая меняет свой цвет в зависимости от действий пользователя, а на ней должен отображаться текст. Из-за того что цвет фона может быть любым, необходимо обеспечить читабельность текста на нём.

Изначально думал инвертировать цвет панели и окрашивать ним текст. Но это не обеспечивает должной контрастности.

Решил это так: Суммировал RGB каналы фона и делил на 3 (получал Ч/Б альтернативу), затем если значение превышало 127 (Ч/Б версия цвета была ближе к белому) окрашивал текст в черный, иначе в белый.

Существуют ли другие (возможно более интересные) способы решения этой задачи?

Answer 1

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

Answer 2

Существуют ли другие (возможно более интересные) способы решения этой задачи?

Существует CSS свойство mix-blend-mode. Может не "интересно", зато эффективно.
Ведущей тройкой браузеров поддерживается полностью (в статье по ссылке инфа не обновлена, Оперой тоже поддерживается... уже 2 года как).

В графических библиотеках тоже есть работа с режимами наложения.

А если интересуют самостоятельные вычисления, то лучшие результаты будут с преобразованием RGB → HSV → RGB (т.е., изменения производить в пространстве HSV). Но, в сумме все это будет весьма медленно.