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

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

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

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

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

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

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

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

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

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

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

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

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

введите описание изображения здесь

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Android для выбора цвета для включения в активность
  • jQuery изменение цвета цветной пользовательский прокрутка
  • div цвет фона, чтобы изменить onhover
  • Как уменьшить количество цветов в изображении с помощью OpenCV?
  • Изменить цвет изображения PNG через CSS?
  • Преобразование цвета RGBA в RGB
  • Давайте будем гением компьютера.