Я хочу показать несколько изображений, как этот пример
Цвет заливки определяется полем в базе данных с цветом в шестнадцатеричном формате (например, ClassX -> Color: # 66FFFF). Теперь я хочу показать данные над заливкой с выбранным цветом (как на картинке выше), но мне нужно знать, является ли цвет темным или светлым, поэтому я знаю, должны ли слова быть белыми или черными. Есть ли способ? ТКС
Ответы:
Опираясь на мой ответ на аналогичный вопрос .
Вам нужно разбить шестнадцатеричный код на 3 части, чтобы получить индивидуальные интенсивности красного, зеленого и синего. Каждые 2 цифры кода представляют значение в шестнадцатеричной (основа-16) записи. Я не буду вдаваться в подробности преобразования здесь, их легко найти.
Если у вас есть интенсивности для отдельных цветов, вы можете определить общую интенсивность цвета и выбрать соответствующий текст.
Порог 186 основан на теории, но может быть скорректирован по вкусу. Исходя из комментариев ниже порога 150 может работать лучше для вас.
Изменить: Выше, просто и работает достаточно хорошо, и, кажется, здесь хорошо, в StackOverflow. Тем не менее, один из комментариев ниже показывает, что в некоторых случаях это может привести к несоблюдению рекомендаций W3C. При этом я получаю модифицированную форму, которая всегда выбирает самый высокий контраст на основе руководящих принципов. Если вам не нужно соответствовать правилам W3C, я бы придерживался более простой формулы, приведенной выше.
Формула, приведенная для контраста в Рекомендациях W3C, - это
(L1 + 0.05) / (L2 + 0.05)
гдеL1
яркость самого светлого цвета иL2
яркость самого темного по шкале 0,0-1,0. Яркость черного цвета равна 0,0, а белого - 1,0, поэтому подстановка этих значений позволяет определить значение с самым высоким контрастом. Если контраст для черного больше, чем для белого, используйте черный, в противном случае используйте белый. Учитывая яркость цвета, который вы тестируете воL
время теста:Это упрощает алгебраически до:
Или примерно:
Осталось только вычислить
L
. Эта формула также приводится в руководствах и выглядит как преобразование из sRGB в линейный RGB, за которым следует рекомендация МСЭ-R BT.709 для яркости.Порог 0,179 не должен изменяться, поскольку он привязан к рекомендациям W3C. Если вы находите результаты не по вкусу, попробуйте более простую формулу выше.
источник
#D6B508
значение 171, следовательно белый контраст. Однако контраст должен быть черным (подтверждено здесь: webaim.org/resources/contrastchecker )Я не беру на себя ответственность за этот код, поскольку он не мой, но я оставляю его здесь, чтобы другие могли быстро найти его в будущем:
Основываясь на ответе Марка Рэнсомса, вот фрагмент кода для простой версии:
и вот фрагмент кода для расширенной версии:
Чтобы использовать их просто позвоните:
Также спасибо
Alx
иchetstone
.источник
isDark(bgColor)
Тогда я просто использую'color': isDark(color)?'white':'black'
Как насчет этого (код JavaScript)?
источник
В дополнение к арифметическим решениям также можно использовать нейронную сеть ИИ. Преимущество состоит в том, что вы можете адаптировать его по своему вкусу и потребностям (т.е. не совсем белый текст на ярких насыщенных красных тонах выглядит хорошо и читается так же, как черный).
Вот хорошая демонстрация Javascript, которая иллюстрирует эту концепцию. Вы также можете создать собственную формулу JS прямо в демоверсии.
https://harthur.github.io/brain/
Ниже приведены некоторые диаграммы, которые помогли мне разобраться в проблеме . На первом графике яркость постоянна 128, а оттенок и насыщенность меняются. На втором графике насыщенность постоянна 255, а оттенок и яркость варьируются.
источник
Вот мое решение на Java для Android:
источник
Основываясь на ответе @MarkRansom, я создал скрипт PHP, который вы можете найти здесь:
источник
Это быстрая версия ответа Марка Рэнсома как расширение UIColor
источник
Это всего лишь пример, который изменит цвет галочки SVG при нажатии на элемент. Он установит цвет галочки на черный или белый в зависимости от цвета фона выбранного элемента.
https://gist.github.com/dcondrey/183971f17808e9277572
источник
Я использую эту функцию JavaScript для преобразования
rgb
/rgba
в'white'
или'black'
.Вы можете ввести любой из этих форматов, и он выведет
'black'
или'white'
rgb(255,255,255)
rgba(255,255,255,0.1)
color:rgba(255,255,255,0.1)
255,255,255,0.1
источник
Подробный ответ Марка прекрасно работает. Вот реализация в JavaScript:
Затем можно вызвать эту функцию,
lum([111, 22, 255])
чтобы получить белый или черный.источник
Я никогда не делал ничего подобного, но как насчет написания функции для проверки значений каждого из цветов относительно среднего цвета Hex 7F (FF / 2). Если два из трех цветов больше, чем 7F, то вы работаете с более темным цветом.
источник
Основываясь на различных входных данных ссылки Сделайте цвет переднего плана черным или белым в зависимости от фона и этой темы, я создал класс расширения для цвета, который дает требуемые контрастные цвета.
Код выглядит следующим образом:
источник
Если вы, как и я, искали версию RGBA, в которой учитывается альфа, то вот такая, которая действительно хорошо работает для обеспечения высокой контрастности.
источник
Это R-версия ответа Марка Рэнсома, использующая только базу R.
источник
@ SoBiT, я смотрел на твой ответ, который выглядит хорошо, но в этом есть небольшая ошибка. Ваша функция hexToG и hextoB нуждаются в незначительном редактировании. Последнее число в substr - это длина строки, поэтому в этом случае ее должно быть «2», а не 4 или 6.
источник
У LESS есть хорошая
contrast()
функция, которая отлично сработала для меня, см. Http://lesscss.org/functions/#color-operations-contrast«Выберите, какой из двух цветов обеспечивает наибольший контраст с другим. Это полезно для обеспечения того, чтобы цвет читался на фоне, что также полезно для обеспечения доступности. Эта функция работает так же, как и функция контрастности в Compass для SASS. В соответствии с WCAG 2.0 цвета сравниваются с использованием гамма-скорректированного значения яркости, а не их яркости ».
Пример:
Вывод:
источник
От шестнадцатеричного до черного или белого:
источник
Код версии Objective-c для iOS, основанный на ответе Марка:
источник
Как насчет тестирования всех 24-битных цветов?
Имейте в виду, что метод YIQ будет возвращать минимальный коэффициент контрастности 1,9: 1, который не проходит тесты AA и AAA WCAG2.0 при условии 128-порогового значения.
Для метода W3C он вернет минимальный коэффициент контрастности 4,58: 1, который пройдет тесты AA и AAA для большого текста, и тест AA для маленького текста, он не пройдет тест AAA для маленького текста для всех цветов.
источник
Вот мой собственный метод, который я использовал и с которым до сих пор не было проблем 😄
источник
Я сделал модуль Python для выбора цвета переднего плана на основе значения цвета фона RGB или HEX: https://github.com/azaitsev/foreground
источник
Вот мой код для Java Swing, основанный на удивительном ответе Марка:
источник