Хороший цвет переднего плана текста для данного цвета фона

Question

Я рисую кнопку выбора цвета и ищу красивую и простую формулу, позволяющую получить хороший цвет текста (переднего плана) для заданного цвета фона в RGB.

Простая попытка — просто взять дополнительный цвет, но в результате получится странная кнопка для таких цветов, как чистый синий или чистый красный.
Есть ли что-то хорошо известное, что делает это?

Если это вообще имеет значение, я использую QT.

Answer 1

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

Чтобы выбрать между черным и белым, вам нужно знать яркость фона.Это становится немного сложнее из-за двух факторов:

• Воспринимаемая яркость отдельных основных цветов — красного, зеленого и синего — не идентична.Самый быстрый совет, который я могу дать, — использовать традиционную формулу преобразования RGB в серый — R*0,299 + G*0,587 + B*0,114.Есть много других формул.

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

Answer 2

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

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

Дополнительные цвета на самом деле могут быть очень болезненными для глаз и ухудшать читаемость.

Answer 3

Используйте схему для удобочитаемости

Если по «хороший цвет текста (передний план)» ты предназначаешь это для разборчивость целей, когда пользователь выбирает any background colour, вы всегда можете создать белый текст с черным контуром.Он будет разборчив на любом сплошном, узорчатом или градиентном фоне, от черного до белого и на любом промежуточном фоне.

Даже если это не соответствует вашим намерениям, я думаю, что это стоит опубликовать здесь, потому что я искал похожие решения.

Answer 4

Основываясь на ответе Марка, вот код Ruby, который выполнит всю работу.

rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"

Answer 5

Вам лучше иметь большую разницу в яркости.В общем, цветной фон с цветным текстом ухудшает читабельность, со временем причиняя вред глазам.Слегка тонированные цвета (напр.в HSB S~10%, B>90%) с черным текстом работают нормально или слегка тонированный текст на черном фоне.Я бы воздержался от окрашивания обоих.Темный текст (b~30%, s>50%) с едва заметной окраской на белом фоне также подойдет.Желтый (янтарный) текст на темно-синем фоне отлично читается, равно как и желтый или зеленый на черном.Вот почему старые тупицы (vt100, vt52 и т. д.) выбрали эти цвета.

Если вам действительно нужно сделать «цвет в цвете» для «образа», вы можете поменять местами H и B, при этом закрепив насыщенность на уровне от умеренного до низкого.

И последнее замечание:если у вас 50% серого фона, переосмыслите свой интерфейс.Вы лишаете себя половины своего динамического диапазона!Вы отталкиваете малозаметных пользователей, в том числе всех, кто старше 35 лет...

Answer 6

Цветовые сочетания часто выглядят ужасно, если их подобрать неаккуратно.Почему бы не использовать для текста белый или черный цвет, в зависимости от яркости цвета.(Сначала нужно будет конвертировать в HSB.)

Или позвольте пользователю выбрать черный или белый текст.

Или используйте заранее определенные комбинации.Это то, что Google делает в своем календаре.

Answer 7

Я искал ответ на simailr и наткнулся на этот пост и некоторые другие, которыми решил поделиться.В соответствии с http://juicystudio.com/services/luminositycontrastratio.php#specify «Критерий успеха 1.4.3 WCAG 2.0 требует, чтобы визуальное представление текста и изображений текста имело коэффициент контрастности не менее 4,5:1», за некоторыми исключениями.Этот сайт позволяет вам задавать цвета переднего плана и фона, чтобы вычислить их контраст, хотя было бы полезно, если бы он предлагал альтернативы или диапазоны.

Один из лучших сайтов, которые я нашел для визуализации цветового контраста, — это http://colorizer.org/ Он позволяет одновременно настраивать практически все цветовые шкалы (RGB, CMYK и т. д.), а затем отображает результат на экране, например белый текст на желтом фоне.

Answer 8

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

http://www.makart.com/resources/artclass/cwheel.html

Если ваш цвет HSL, переверните оттенок на 180 градусов для более точного расчета.

Answer 9

Я думаю, что преобразование в HSV может быть выходом, но изменение оттенка IMO будет выглядеть странно.Я бы попробовал сохранить оттенок и поиграться со значением и, возможно, насыщенностью (светло-красные кнопки с темно-красным текстом...хм звучит страшно :-) ).