Выберите белые или черные буквы вместо цвета

Я использовал средство выбора цвета на основе javascript на некоторых своих сайтах, и цвет шрифта в поле ввода изменяется в зависимости от значений, выбранных средством выбора...

Код ( Прямая ссылка на код здесь ) для скрипта показывает конкретное место для раскрашивания поля ввода, к которому прикреплен скрипт.

В этом коде вы можете увидеть формулу:

0.213 * this.rgb[ 0 ] +
0.715 * this.rgb[ 1 ] +
0.072 * this.rgb[ 2 ]

В результате:

< 0.5 ? '#FFF' : '#000';

или... (ЕСЛИ) менее 0,5 чистого белого (255) = "Белый" (иначе) = "Черный";

Вы можете экстраполировать из этой формулы, что: 0,213 * ваше значение КРАСНОГО (0–255) +
0,715 * ваше значение синего (0–255) +
0,072 * ваше значение зеленого (0–255)
дает вам число.

... и если это число больше 0,5,

вы должны выбрать черный цвет шрифта, в противном случае выберите белый.

Пример:

0,213 * 21 = 4,473
0,715 * 57 = 33,605
0,072 * 117 = 8,424

4,473 + 33,605 + 8,424 = 46,502

Так как 46,502 меньше чем 0,5 чистого белого (255), мы должны использовать белый цвет на этом фоне.

Надеюсь это поможет.

См. этот ответ на аналогичный вопрос: см. Как рассчитать лучший цвет шрифта для случайного цвета фона?

Применяя эту теорию, для динамического понимания вы можете использовать значения RGB или шестнадцатеричные цвета. В шестнадцатеричном формате цветовые коды идут от 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Таким образом, # 751 или # 745814 - это 7 или красный цвет, 5 зеленый и 1 синий (RGB). Каждое второе число в 6-значном шестнадцатеричном формате — это просто «тонкая настройка».

Средняя точка делает <=7 темнее 50%, >=8 светлее (технически более насыщенный). Таким образом, вы можете программно найти накопительный счет и применить черный текст к более светлым цветам, и наоборот.

Я бы сказал, что если цвет вашего фона постоянно меняется, лучше всего использовать нейтральный цвет. В зависимости от того, насколько ярким или темным становится фон, следует определить, используете ли вы белый или черный цвет. Выберите золотую середину между всеми фоновыми цветами и масштабируйте цвета от самого темного до самого светлого. Затем с более темным фоном используйте белый цвет, и когда вы достигнете большего количества светлых цветов, вы должны затем переключиться на черный. Может быть, даже добавим туда немного промежуточного серого. Итак, в целом, настройте шкалы, одну с вашими цветами от темного к светлому, а затем шкалу под ней с белым к черному. Таким образом, вы будете знать, какой цвет лучше всего использовать. Надеюсь это поможет. Кроме того, это действительно основано на мнении, поэтому другие могут согласиться или не согласиться со мной или даже высказать свое мнение. Удачи!

Еще один вариант, который я нашел пару дней назад и сделал весь процесс определения коэффициентов контрастности ДЕЙСТВИТЕЛЬНО простым:

http://leaverou.github.io/contrast-ratio/

Вы можете скопировать значения HEX в поля, и он автоматически даст вам число. Если вы попробуете с белым и черным плюс цвет, вы должны получить результат менее чем за 5 секунд :)