Как правильно выбрать контрастные цвета RGB? - PullRequest
Новая
       10

Как правильно выбрать контрастные цвета RGB?

19 голосов
/ 31 августа 2011

Предположим, в вашей программе:

  1. color A - это цвет, который мы произвольно выбираем

  2. Зная color A, как я могу выбрать color B, который будет сильно контрастировать с color A?

Проблема может быть дополнительно уменьшена до: «представьте 2 квадрата, заполненных цветом, следующимдруг другу. должен быть однозначно ясен человеческому глазу , что цвета не совпадают "

Пример:

  • Черный -> Белый
  • Синий -> Белый

Ответы [ 2 ]

9 голосов
/ 31 августа 2011

В Руководстве по доступности веб-контента (WCAG) 2.0 содержится некоторая информация (http://www.w3.org/TR/2008/REC-WCAG20-20081211)

  1. Визуальный контраст: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast

  2. Коэффициент контрастности: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef

  3. Относительная яркость: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

На этом сайте есть хороший пример но он вычисляет, где достаточно двух цветов, а не как их получить.

Чтобы выбрать цвет с хорошим контрастом, я бы выбрал дополнительные цвета: например, выберите случайный цвет A, преобразуйте его в пространство HSV, получите дополнительный оттенок.

Дополнительный оттенок: после преобразования цвета из RGB в HSV дополнительный оттенок будет составлять 180 градусов (или 0,5 при нормированном значении оттенка 0-1). Этот сайт имеет что-то об этом в PHP

3 голосов
/ 31 августа 2011

Поскольку я искал лучший способ сделать это, я наткнулся на руководство по Adobe Illustrator, в котором упоминается, как они создают дополнительные цвета. Они говорят:

Complement Изменяет каждый компонент цвета на новое значение на основе суммы самых высоких и самых низких значений RGB в выбранном цвете. Illustrator добавляет самые низкие и самые высокие значения RGB текущего цвета, а затем вычитает значение каждого компонента из этого числа, чтобы создать новые значения RGB. Например, предположим, что вы выбрали цвет со значением RGB 102 для красного, 153 для зеленого и 51 для синего. Illustrator добавляет высокие (153) и низкие (51) значения, чтобы получить новое значение (204). Каждое из значений RGB в существующем цвете вычитается из нового значения для создания новых дополнительных значений RGB: 204 - 102 (текущее значение красного) = 102 для нового значения красного, 204 - 153 (текущее значение зеленого) = 51 для нового значения зеленого и 204 - 51 (текущее значение синего) = 153 для нового значения синего.

Было бы не сложно сделать это программно и подумать, что на этот раз это может действительно сработать для того, что вы пытаетесь сделать.

Удачи!

...