it-swarm.com.ru

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

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

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

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

72
shoosh

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

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

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

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

121
Mark Ransom

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

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

Цвета комплемента на самом деле могут быть очень болезненными для глаз.

11
Gabriel Hurley

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

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

enter image description here

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

9
John K

Основываясь на ответе Марка, вот код 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"
4
Darren Hicks

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

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

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

3
Alex Feinman

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

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

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

2
Larry K

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

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

1
elg

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

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

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

0
Bob