Я рисую кнопку выбора цвета, и я ищу красивую и простую формулу, чтобы получить хороший цвет текста (переднем плане) для заданного цвета фона в RGB.Хороший цвет текста переднего плана для заданного цвета фона
Простая попытка состоит в том, чтобы просто взять цвет дополнения, но это создаст странную кнопку для цветов, таких как чистый синий или чистый красный.
Есть ли что-то хорошо известное, что делает это?
Если это имеет значение, я использую QT.
Для максимальной удобочитаемости вы хотите получить максимальный контраст яркости, не попадая в оттенки, которые не работают вместе. Самый последовательный способ сделать это - придерживаться черный или белый для текста.Возможно, вы сможете придумать более эстетичные схемы, но ни один из них не будет более разборчивым.
Чтобы выбрать между черным или белым цветом, вам необходимо знать яркость фона. Это становится немного более сложным, из-за два факторов:
Воспринимается яркость отдельных праймериз красного, зеленые и синие цветы не являются идентичными. Самый быстрый совет, который я могу дать, - использовать традиционную формулу для преобразования RGB в серый цвет - R * 0.299 + G * 0.587 + B * 0.114. Есть много других формул.
Гамма-кривая, применяемая к дисплеям, делает среднее серое значение выше, чем вы ожидали. Это легко решить, используя 186 как среднее значение, а не 128. Все, что меньше 186, должно использовать белый текст, что-то большее, чем 186, должно использовать черный текст.
Предположим, что у нас есть цвет фона, который находится прямо в середине спектра оттенков серого.Разве этот цвет не гамма-кодируется системой до гамма-декодирования монитором? Если да, то зачем нам применять второй уровень гамма-декодирования, установив среднюю точку на 186? Или я чего-то не хватает? –
@ LeviBotelho, система не использует гамма-кодирование - все значения RGB, с которыми она работает, считаются уже закодированными гамма-кодировками. На правильно откалиброванном мониторе вы обнаружите, что чередующиеся линии 0/255 будут иметь ту же яркость, что и серый блок 186. Поскольку большинство мониторов не откалиброваны, это будет несколько меняться, например, мое собственное ближе к 167. –
Спасибо для объяснения. Хороший пример с чередующимися линиями! –
Я не специалист по программированию вещей, связанных с RGB, но с точки зрения дизайнера, часто наиболее читаемый цвет будет намного легче (если цвет фона темный) или темнее (если цвет фона светлый) версия того же оттенка.
В основном вы берете свои значения RGB, и если они ближе к 0 (темному), вы нажимаете их каждый на равную сумму для вашего цвета переднего плана, или наоборот, если это светлый BG.
Цвет дополнений на самом деле может быть очень болезненным на глазах для удобства чтения.
Я согласен с этим, идите для более темного или более светлого оттенка того же цвета. Это также было бы легко сделать programmaticaly – gonzohunter
Помните [daltonic people] (http://en.wikipedia.org/wiki/Color_blindness). Один из моих преподавателей университета, например, с большим трудом различал оттенки синего. – ANeves
Самый эффективный способ сделать это - использовать непрозрачность, а не изменять значения RGB. Поэтому, если вы хотите, чтобы текст был светлее, используйте прозрачный белый и более темный прозрачный черный цвет. https://www.google.com/design/spec/style/color.html#color-text-background-colors –
Я обычно смотрю на цвета комплементов, они также имеют цвет комплемента колеса, чтобы помочь
http://www.makart.com/resources/artclass/cwheel.html
Если ваш цвет HSL, переверните Hue на 180 градусов для приличного расчета
Дайте мне заявку с зеленым текстом на красном фоне (или наоборот), и вы узнаете где я похоронил другие тела. –
я вещь что преобразование в HSV может быть таким, но изменение IMO оттенка будет выглядеть странно. Я бы постарался сохранить оттенок и возиться со значением и, возможно, насыщенностью (светло-красные кнопки с темно-красным текстом ... hm звучит страшно :-)).
Цветовые комбинации часто выглядят ужасно, когда их не выбрали тщательно. Почему бы не использовать белый или черный текст, в зависимости от яркости цвета. (Сначала нужно будет конвертировать в HSB.)
Или позвольте пользователю выбрать черный или белый текст.
Или используйте предопределенные комбинации. Это то, что Google делает в своем календарном продукте.
Вам лучше с высокой разницей в светимости. В общем, цветные фоны с цветным текстом сосут для удобочитаемости, вредя глазам со временем. Слегка тонированные цвета (например, в HSB, S ~ 10%, B> 90%), черный текст работает нормально или слегка тонированный текст на черном фоне. Я бы держался подальше от раскраски обоих. Темный текст (b ~ 30%, s> 50%) с тонкой окраской на белом фоне также может быть прекрасным. Желтый (янтарный) текст на глубоком синем фоне имеет отличную читаемость, как и янтарный или зеленый на черном. Вот почему старые тумбы (vt100, vt52 и т. Д.) Пошли на эти цвета.
Если вам действительно нужно сделать цвет на цвет для «взгляда», вы можете отменить и H и B, а насыщение насыщения на уровне от умеренного до низкого.
И последнее примечание: если у вас есть 50% серый фон, переосмыслите свой интерфейс. Ты ограбишь половину своего динамического диапазона! Вы отчуждаете пользователей с низкой видимостью, включая кого-то более 35 ...
Рычаги план для удобочитаемости
Если по «хороший цвет текста (на переднем плане)» вы намерены его разборчивости цели, когда пользователь выбирает any background colour, вы всегда можете получить белый текст с черным контуром. Он будет разборчивым на любом сплошном, узорном или градиентном фоне, от черного до белого и любого другого.
Даже если это не попало в цели вашего намерения, я думаю, что это стоит размещен здесь, потому что я пришел ищу подобные решения.
Я искал ответ на simailr и наткнулся на это сообщение и некоторые другие, которые, как я думал, я поделюсь. Согласно http://juicystudio.com/services/luminositycontrastratio.php#specify «Критерий успеха 1.4.3 WCAG 2.0 требует визуального представления текста, а изображения текста имеют коэффициент контрастности не менее 4,5: 1» с некоторыми исключениями. Этот сайт позволяет помещать цвета переднего плана и фона для вычисления их контраста, хотя было бы полезно, если бы оно предлагало альтернативы или диапазоны.
Один из лучших сайтов, которые я нашел для визуализации цветового контраста: http://colorizer.org/ Он позволяет одновременно настроить почти все цветовые шкалы (RGB, CMYK и т. Д.), А затем отобразить результат на экране , например белый текст на желтом фоне.
здание на вершине ответа Марки, вот некоторые Руби код, который будет выполнять работу
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"
Qt/C++ эквивалент: авто яркость = brush.redF() * 0.299 + brush.greenF() * 0.587 + brush.blueF() * 0.114; painter.setPen ((яркость> 0,6)? Qt :: черный: Qt :: белый); // текст – roberto
Кроме того, дополнительные цветов есть проблема, что серые карты на серые. – shoosh
Этот инструмент доступных цветов может помочь: http://accessible-colors.com –