Я рисую кнопку выбора цвета, и я ищу красивую и простую формулу, чтобы получить хороший цвет текста (переднем плане) для заданного цвета фона в RGB.
Простая попытка состояла бы в том, чтобы просто взять цвет дополнения, но это создаст странную кнопку для цветов, таких как чистый синий или чистый красный.
Есть ли что-то хорошо известное, что делает это?
Если это имеет значение вообще, я использую QT.
Для максимальной удобочитаемости вы хотите получить максимальный контраст яркости, не попадая в оттенки, которые не работают вместе. Самый последовательный способ сделать это - придерживаться черного или белого для цвета текста. Возможно, вы сможете придумать более эстетичные схемы, но ни один из них не будет более разборчивым.
Чтобы выбрать между черным или белым цветом, вам нужно знать яркость фона. Это немного усложняется из-за двух факторов:
Признанная яркость отдельных праймериз красного, зеленого и синего не идентична. Самый быстрый совет, который я могу дать, - использовать традиционную формулу для преобразования RGB в серый цвет - R * 0.299 + G * 0.587 + B * 0.114. Существует множество других формул.
Гамма-кривая, применяемая к дисплеям, делает среднее значение серого выше, чем вы ожидали. Это легко решить, используя 186 как среднее значение, а не 128. Все, что меньше 186, должно использовать белый текст, что-то большее, чем 186, должно использовать черный текст.
Я не специалист по программированию вещей, связанных с RGB, но с точки зрения дизайнера, часто наиболее читаемый цвет будет намного легче (если цвет фона темный) или темнее (если цвет фона светлый) версия того же оттенка.
В основном вы берете свои RGB-значения, и если они ближе к 0 (темному), вы подталкиваете их каждый на равную сумму для цвета переднего плана или наоборот, если это светлый BG.
Цвета комплемента действительно могут быть очень болезненными на глазах для удобства чтения.
Использовать контур для удобочитаемости
Если с помощью "хорошего цвета текста (переднего плана)" вы намерены использовать разборчивость, когда пользователь выбирает any background colour, вы всегда можете создать белый текст с черным контуром. Он будет разборчивым на любом сплошном, узорном или градиентном фоне, от черного до белого и любого другого.
Даже если это не отразится на ваших намерениях, я думаю, что это стоит здесь, потому что я искал подобные решения.
Настроим ответ на отзыв от Mark, вот некоторый код 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.)
Или позвольте пользователю выбрать черный или белый текст.
Или используйте предварительно определенные комбинации. Это то, что Google делает в своем календарном продукте.
Вам лучше с высокой разницей в яркости. В общем, цветные фоны с цветным текстом сосут для удобочитаемости, вредя глазам со временем. Слегка тонированные цвета (например, в HSB, S ~ 10%, B > 90%), черный текст работает нормально или слегка тонированный текст на черном фоне. Я бы держался подальше от раскраски обоих. Темный текст (b ~ 30%, s > 50%) с тонкой окраской на белом фоне также может быть прекрасным. Желтый (янтарный) текст на глубоком синем фоне имеет отличную читаемость, как и янтарный или зеленый на черном. Вот почему старые тумбы (vt100, vt52 и т.д.) Пошли на эти цвета.
Если вам действительно нужно сделать цвет на цвет для "взгляда", вы можете отменить и H и B, а насыщение насыщения на уровне от умеренного до низкого.
И последнее примечание: если у вас есть 50% серый фон, переосмыслите свой интерфейс. Ты ограбишь половину своего динамического диапазона! Вы отчуждаете пользователей с низкой видимостью, включая кого-то более 35...
Я обычно смотрю на цветовые дополнения, у них также есть колесики цвета, чтобы помочь
http://www.makart.com/resources/artclass/cwheel.html
Если ваш цвет HSL, переверните оттенок на 180 градусов для достойного расчета
Я искал ответ на simailr и наткнулся на этот пост и некоторые другие, которые, как я думал, я поделюсь. Согласно http://juicystudio.com/services/luminositycontrastratio.php#specify "критерий успеха 1.4.3 WCAG 2.0 требует визуального представления текста и изображений текста, коэффициент контрастности в минимум 4,5: 1" за некоторыми исключениями. Этот сайт позволяет помещать цвета переднего плана и фона для вычисления их контраста, хотя было бы полезно, если бы оно предлагало альтернативы или диапазоны.
Один из лучших сайтов, которые я нашел для визуализации цветового контраста, http://colorizer.org/ Он позволяет вам регулировать почти все цветовые масштабы ( RGB, CMYK и т.д.), А затем отображает результат на экране, например белый текст на желтом фоне.
Я считаю, что преобразование в HSV может быть таким, но изменение IMO оттенка будет выглядеть странно. Я бы попытался сохранить оттенок и возиться со значением и, возможно, насыщенностью (светло-красные кнопки с темно-красным текстом... hm звучит страшно:-)).