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

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%) с тонкой окраской на белом фоне также может подойти. Желтый (янтарный) текст на темно-синем фоне имеет отличную читаемость, как янтарный или зеленый на черном. Вот почему старые dumbterms (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

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

Answer 9

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

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

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