Опубликовано
|
| |
Цвет для чайников.
Обширное руководство для начинающих. | by Anton GukЭта статья основана на книге “Искусство цвета” Иоханнеса Иттена и еще бесчисленном количестве различных статей о теории цвета. Тут я попытался сделать “обезжиренную” версию этих знаний, для более легкого понимания материала. Статья подойдет не только дизайнерам, но и всем людям, которые хотят научится понимать и работать с цветом. В статье вы узнаете о физических свойствах цвета, почему мы воспринимаем его таким, что он может значить и как составлять гармоничные схемы.
Дисперсия света
Исаак Ньютон один из первых кто смог разложить белый солнечный свет на цветовой спектр — позднее это назвали “Дисперсией света”.
Опыт заключался в следующем: он пропускал солнечный свет через призму. В ней луч света расслаивался на цвета и выводился на экран.
Обложка альбома группы Pink Floyd “Dark Side of the Moon», отображающая дисперсию света.Цвета которые выводились называются спектральными или проще — чистые цвета.
Это красный, оранжевый, желтый, зеленый, синий и фиолетовый.
Интересный факт, оказывается, количество цветов в радуге, зависит от страны проживания. Жители Китая считают, что в радуге пять цветов. Для жителей США типичным ответом будет шесть цветов, в то время как жители России насчитывают их семь (+голубой). На самом деле в радуге собран весь спектр, но мы можем увидеть только некоторые из них.
Если все эти цвета пропустить обратно через собирательную призму, то мы опять получим белый цвет.
Дополнительные цвета
Если мы соберем красный + оранжевый + желтый в один цвет, и зеленый + синий + фиолетовый в другой, а потом смешаем два получившихся цвета то получим белый.
(красный + оранжевый + желтый) + (зеленый + синий + фиолетовый) = белый
Даже если мы смешаем только отдельные противоположные цвета красный + зеленый, оранжевый + синий, желтый + фиолетовый то в результате получим белый.
Два цвета, объединение которых даёт нам белый цвет, называются дополнительными цветами.
Пример: Если мы удалим из спектра один цвет, к примеру красный и с помощью линзы соберем оставшееся цвета: оранжевый + жёлтый + зеленый + синий + фиолетовый, то результатом у нас будет зеленый цвет. Потому что зеленый является дополнительным цветом по отношению к удалённому нами красному. Почему именно такие соотношения “зеленый — красный” расписано ниже.
Вычитаемые цвета
Если перед лучом света поставить фильтр который пропускает только синий цвет, а за ним фильтр пропускающий только красный цвет, то оба фильтра вместе не пропустят свет и дадут чёрный цвет или темноту. Потому что синий фильтр пропускает только синий цвет, а красный фильтр в свою очередь поглощает все, кроме красного (который уже был поглощен синим фильтром).
Поглощаемые в физическом эксперименте цвета называются также вычитаемыми.
Параметры цвета
- Тон / Hue — это то, что мы имеем в виду, говоря «цвет». Синий, красный, зеленый, оранжевый, фиолетовый и тд.
- Насыщенность / Saturation — параметр цвета, характеризующий степень чистоты цветового тона.
- Яркость / Brightness — обозначает степень отличия цвета от белого или черного.
Что такое RGB, CMYK, HEX и чем они отличаются
RGB (Red, Green, Blue) — аддитивная (сложение) цветовая модель. Основные цвета которой красный, зеленый и синий. Это значит, что при сложении всех цветов у нас получится белый. Такая модель используется во всех электронных устройствах. Записывается в виде: rgb(0,0,0), каждый из цветов может варьироваться от 0 до 255 включительно, где (0,0,0) — черный цвет, (255,255,255) — белый. Дополнительно может добавляться четвертый параметр — аlpha канал, который означает насколько прозрачен цвет. Alpha канал может принимать значения от 0 до 1, к примеру rgba(31,104,2, 0.8).
HEX — это RGB в шестнадцатеричной системе. Выглядит таким образом #102945, первые две цифры отвечают за красный цвет, вторые за зеленый и третьи за синий.
Каждый символ может принимать значения: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. Где #000000 — черный цвет, а #ffffff — белый.
CMYK (Cyan, Magenta, Yellow, Key color) — субтрактивная (вычитание) схема формирования цвета. Состоит из голубого, пурпурного, жёлтого и ключевого — черного цвета. Эта модель используется в полиграфии при цветной печати. Бумага, как и все материалы, отражает свет, поэтому считают, какое количество света отразилось от поверхности. Несмотря на то, что чёрный цвет можно получать смешением в равной пропорции пурпурного, голубого и жёлтого красителей, по ряду причин (чистота цвета, переувлажнение бумаги, стоимость и др.) такой подход неудовлетворителен, поэтому используют отдельно черный цвет.
Почему мы видим цвета такими?
Световые волны сами по себе не имеют цвета. Цвет возникает лишь при восприятии этих волн человеческим глазом и мозгом.
Цвет предметов возникает, главным образом, в процессе поглощения волн.
Желтый сыр выглядит желтым потому, что он поглощает все остальные цвета светового луча и отражает только желтый. Когда мы говорим: «этот сыр желтый», то мы на самом деле имеем в виду, что молекулярный состав поверхности сыра таков, что он поглощает все световые лучи, кроме желтого. Сыр сам по себе не имеет никакого цвета, цвет создаётся при его освещении.
Если красная бумага (поверхность, поглощающая все лучи кроме красного) освещается зелёным светом, то бумага покажется нам чёрной, потому что зелёный цвет не содержит лучей, отвечающих красному цвету, которые могли быть отражены нашей бумагой.
Сам цвет не выражает нечего. Его содержание определяется контекстом. Значение цвета может быть определено только с помощью его отношения к другому цвету. Если изобразить светлую фигуру на белом фоне, и эту же фигуру на черном, то на белом фоне она кажется темнее, производя впечатление лёгкого нежного тепла. На чёрном же становится чрезвычайно светлым и приобретает холодный, агрессивный характер.
Согласно данным одного из исследований, персональные предпочтения, опыт, воспитание, культурные различия и контекст зачастую искажают эффект, который оказывают на нас отдельные цвета.
Пользователи не понимают нашего цветокодирования. Желтый значит «веселый» для вас, но для для других это может значить «не здоровый» или «блевотный». Каждый человек воспринимает цвета очень субъективно и зависит это только от его контекста. Он любит одни цвета, и ненавидит другие. И это в значительной степени непредсказуемо. Вы не сможете угадать.
Цвет не является вербальным или рациональным. Он контекстен и эмоционален. Цвет — сильный инструмент, но сам по себе он не имеет смысла.
Отличная статья про желтый цвет в кино, если вам хочется больше узнать на реальных примерах, о том как именно контекст влияет на значение цвета.
Когда люди говорят о цветовой гармонии они полагаются исключительно на субъективные чувства, в то время как понятие цветовой гармонии является объективной закономерностью.
Гармония — это равновесие, симметрия сил. Наши глаза требуют и поражают комплиментарные цвета (противоположные, дополнительные) создавая этим равновесие. Нейтральным цветом считается серый, наш глаз не создает с ним ни какого дополнительного цвета.
Для того что бы создавать гармоничные сочетания, были разработаны различные системы порядка цветов. Это цветовой круг и треугольники для цветов (изображение ниже). Противоположные цвета в этом круге являются дополнительными.
Цветовой круг по Иоханнесу Иттену (1961)Композиционные схемы
Для цветовой композиции важно количественное отношение цветов. Можно сделать общее заключение, что все пары дополнительных цветов, все сочетания цветов в двенадцатичастном цветовом круге, которые связаны друг с другом через равносторонние или равнобедренные треугольники, квадраты и прямоугольники, являются гармоничными. Эти фигуры можно вращать в пределах круга, все сочетания будут гармоничными.
Цветовой контраст в дизайне интерфейсов по стандартам
По оценкам, в мире насчитывается 285 миллионов человек, страдающих проблемами зрения.
Это число включает в себя как полностью слепых людей, так и лиц с остротой зрения меньше, чем 20/20.
Это краткое руководство, написанное во время создания приложения Contrast для MacOS, поможет вам добиться стандартов доступности, описанных в WCAG 2.0 (Руководство по доступности веб-контента). В частности, с цветом переднего плана и фона, когда дело доходит до текста на дисплеях и мониторах.
Кратко о главном, кому лень читать всю статью- Fail – ваш текст не имеет достаточного контраста с фоном. Возможно, вы захотите сделать его темнее. Это уровень контрастности менее 0.
- AA Large – наименьшее допустимое значение контрастности для шрифта размером 18px и больше. Это балл не менее 0.
- AA – это золотая середина для текста размером меньше ~18px. Это балл не менее 5.
- AAA – это повышенный контраст с баллом не менее 7. 0. Подходит для длинных статей, чтение которых займет значительный период времени.
0. Подходит для длинных статей, чтение которых займет значительный период времени.Декоративные элементы или текст, являющийся частью логотипа или названия бренда, не имеют минимальных требований к контрастности.
Есть и другие факторы, которые необходимо учитывать, чтобы полностью соответствовать стандартам AA и AAA, но для начала достаточно и перечисленных выше.
Уровень и соотношениеСуществует формула, предоставленная WCAG, которая определяет эти два значения.
- Уровень
- Соотношение
Формула выводит число от 1 до 21, причем 21 является наивысшим значением контраста – думаю, это черный текст и белый фон, а 1 – это белый текст на белом.
Контраст между любыми двумя цветами будет падать где-то на спектре между 1-21. Вот откуда взялись уровни.
Технически существует 5 уровней.
- AAA
- AAA Large
- AA
- AA Large
- Fail
AAA означает, что ваш текст имеет коэффициент контрастности не менее 7,0.
Например, текст 595959 на фоне ffffff и наоборот.
Обратите внимание, что для достижения истинного уровня AAA в разделе 1.4.8.1 WCAG также указывается, что «цвет переднего плана и фона может быть выбран пользователем».
Поэтому, если вы не планируете добавлять эту функцию на свой веб-сайт или в приложение, по моему скромному мнению, нет никаких оснований использовать больший уровень, чем AA. Конечно бывают исключения. Ваш основной текст может выглядеть красивее и быть читабельнее, если вы используете уровень AAA
Этот уровень выведен для людей с плохим зрением (острота зрения 20/80). Этот показатель остроты зрения часто не может быть откорректирован с помощью очков.
Примечание. При остроте зрения 20/200 человек считается слепым.
AAA LargeISO 9241-3 Эргономические требования к офисной работе с дисплеями (VDT). Часть 3. Требования к визуальному дисплею.
Поправка 1.AAA Large означает, что ваш большой текст имеет коэффициент контрастности 4,5 или выше, что совпадает с AA, поэтому вы не увидите AAA Large в нашем приложении.
WCAG считает 14pt полужирный и 18pt «большими» размерами. Это примерно соответствует 18.5px полужирный и 24px @1x. Это приблизительно, поскольку размеры букв могут сильно различаться в зависимости от шрифта.
AAЕсли вы никогда раньше не проверяли показатели контрастности, вы будете потрясены тем, насколько темным вам нужно сделать интерфейс, чтобы достичь уровеня AA для дисплея небольших размеров. Я настоятельно призываю вас следовать рекомендациям – ваши пользователи, вероятно, не будут вам благодарны, но они будут наслаждаться читабельным текстом в ваших проектах.
AA означает, что ваш текст имеет коэффициент контрастности не менее 4,5 или выше. Например, текст 757777 на фоне ffffff и наоборот.
Существует эмпирическое доказательство того, что острота зрения 20/40 связана с потерей контрастной чувствительности примерно 1,5, отсюда и получается результат 4,5 балла.
AA Large (AA+)Gittings, NS and Fozard, JL (1986). Возрастные изменения остроты зрения. Экспериментальная геронтология, 21(4–5), 423–433.
ANSI-HFES-100–1988. Американский национальный стандарт по учету человеческих факторов при разработке визуальных дисплеев рабочих терминалов, раздел 6, стр. 17-20.
Означает, что ваш текст имеет коэффициент контрастности не менее 3.0. Например, текст 949595 на фоне ffffff.
Это минимальный уровень, рекомендованный ISO-9241–3 и ANSI-HFES-100–1988 для стандартного текста и нормального зрения, где WCAG вывел этот показатель.
Мы приняли решение о сокращении Large до + в нашем приложении, чтобы название каждого уровня было одинаковым по длине символов и не влияло на фиксированную ширину интерфейса.
Fail означает, что ваш текст имеет коэффициент контрастности 2,9 или ниже. Это не относится к логотипам, тексту в логотипах и другим декоративным элементам.
Довольно часто он может показаться хорошо работающим в контексте статического обзора дизайна. Но в контексте использования в реальном мире подобный контраст может вызывать серьезные проблемы юзабилити вашего интерфейса.
А что с мобильными приложениями и их большими retina экранами?Есть рабочий проект рекомендаций WCAG Mobile, в котором говорится:
Мобильные устройства чаще, чем настольные компьютеры и ноутбуки, используются в различных средах, в том числе на открытом воздухе, где более яркий солнечный свет или другие источники сильного освещения. Подобный сценарий повышает важность использования хорошего контраста для всех пользователей и может усугубить проблемы доступа к контенту с плохим контрастом на мобильных устройствах для пользователей с плохим зрением».
Поэтому, вероятно, легче читать более светлый текст на экранах с высоким разрешением в контролируемой среде, чем на мобильных устройствах. Прямой солнечный свет, темные комнаты и многое другое значительно влияют на отображение контента на мобильных экранах.
Для доступности нужно гораздо больше, чем просто цветовой контраст. Вот несколько отрывков из WCAG:
1.4.8 Визуальное представление: для визуального представления блоков текста доступен механизм для достижения, следующего: (Уровень AAA). Пользователь может выбрать цвета переднего плана и фона. Ширина не более 80 символов или глифов (40 если CJK). Текст не выровнен по краю (выровнен как по левому краю, так и по правому). Межстрочный интервал (интерлиньяж) занимает по крайней мере около половины абзаца, а интервал между абзацами по меньшей мере в 1,5 раза больше, чем расстояние между строками. Размер текста может быть изменен без вспомогательной технологии до 200%, способом, который не требует от пользователя прокрутки по горизонтали для чтения строки текста в полноэкранном окне.
Вы можете видеть, что для того, чтобы достичь уровня AAA, ваше приложение или сайт должны позволять пользователю выбирать цвета переднего плана и фона. Таким образом, даже если у вас контраст цвета AAA, это не означает, что такой контраст у всего вашего продукта.
Если вы хотите проверить глубину «кроличьей норы» WCAG, примите красную таблетку.
И если вы хотите супер-пупер, простой способ проверить свой цветовой контраст, прямо из панели меню Mac, скачайте Contrast и начните проектировать лучшие интерфейсы. Работа с этим приложением может доставить вам удовольствие. ?
Использование Contrast в SketchИспользование Contrast в Adobe XDИспользование Contrast в IllustratorИспользование Contrast в FigmaЭто руководство было первоначально опубликовано на сайте usecontrast.com/guide. Contrast был спроектирован Matt D. Smith (?) и разработан Sam Soffes.
Крутая шпаргалка по сочетанию цветов
Правильное сочетание цветов — одна из важных составляющих совершенного образа и стильного и целостного интерьера.
Именно поэтому мы решили поделиться шпаргалкой, с которой вы точно не промахнетесь при выборе одежды или дизайна квартиры.
Схема №1. Комплементарное сочетание
Комплементарными, или дополнительными, контрастными, являются цвета, которые расположены на противоположных сторонах цветового круга Иттена. Выглядит их сочетание очень живо и энергично, особенно при максимальной насыщенности цвета.
Схема №2. Триада — сочетание 3 цветов
Сочетание 3 цветов, лежащих на одинаковом расстоянии друг от друга. Обеспечивает высокую контрастность при сохранении гармонии. Такая композиция выглядит достаточно живой даже при использовании бледных и ненасыщенных цветов.
Схема №3. Аналогичное сочетание
Сочетание от 2 до 5 цветов, расположенных рядом друг с другом на цветовом круге (в идеале — 2—3 цвета). Впечатление: спокойное, располагающее. Пример сочетания аналогичных приглушенных цветов: желто-оранжевый, желтый, желто-зеленый, зеленый, сине-зеленый.
Схема №4. Раздельно-комплементарное сочетание
Вариант комплементарного сочетания цветов, только вместо противоположного цвета используются соседние для него цвета. Сочетание основного цвета и двух дополнительных. Выглядит эта схема почти настолько же контрастно, но не настолько напряженно. Если вы не уверены, что сможете правильно использовать комплементарные сочетания, – используйте раздельно-комплементарные.
Схема №5. Тетрада – сочетание 4 цветов
Цветовая схема, где один цвет — основной, два — дополняющие, а еще один выделяет акценты. Пример: сине-зеленый, сине-фиолетовый, красно-оранжевый, желто-оранжевый.
Схема №6. Квадрат
Сочетание 4 цветов, равноудаленных друг от друга. Цвета здесь несхожи по тону, но также комплементарны. За счет этого образ будет динамичным, игривым и ярким. Пример: фиолетовый, красно-оранжевый, желтый, сине-зеленый.
Сочетания отдельных цветов
- Белый: сочетается со всем. Наилучшее сочетание с синим, красным и черным.
- Бежевый: с голубым, коричневым, изумрудным, черным, красным, белым.
- Серый: с цветом фуксии, красным, фиолетовым, розовым, синим.
- Розовый: с коричневым, белым, цветом зеленой мяты, оливковым, серым, бирюзовым, нежно-голубым.
- Фуксия (темно-розовый): с серым, желто-коричневым, цветом лайма, зеленой мяты, коричневым.
- Красный: с желтым, белым, бурым, зеленым, синим и черным.
- Томатно-красный: голубой, цвет зеленой мяты, песчаный, сливочно-белый, серый.
- Вишнево-красный: лазурный, серый, светло-оранжевый, песчаный, бледно-желтый, бежевый.
- Малиново-красный: белый, черный, цвет дамасской розы.
- Коричневый: ярко-голубой, кремовый, розовый, палевый, зеленый, бежевый.
- Светло-коричневый: бледно-желтый, кремово-белый, синий, зеленый, пурпурный, красный.
- Темно-коричневый: лимонно-желтый, голубой, цвет зеленой мяты, пурпурно-розовый, цветом лайма.
- Рыжевато-коричневый: розовый, темно-коричневый, синий, зеленый, пурпурный.
- Оранжевый: голубой, синий, лиловый, фиолетовый, белый, черный.
- Светло-оранжевый: серый, коричневый, оливковый.
- Темно-оранжевый: бледно-желтый, оливковый, коричневый, вишневый.
- Желтый: синий, лиловый, светло-голубой, фиолетовый, серый, черный.
- Лимонно-желтый: вишнево-красный, коричневый, синий, серый.
- Бледно-желтый: цвет фуксии, серый, коричневый, оттенки красного, желтовато-коричневый, синий, пурпурный.
- Золотисто-желтый: серый, коричневый, лазурный, красный, черный.
- Оливковый: апельсиновый, светло-коричневый, коричневый.
- Зеленый: золотисто-коричневый, оранжевый, салатный, желтый, коричневый, серый, кремовый, черный, сливочно-белый.
- Салатный цвет: коричневый, желтовато-коричневый, палевый, серый, темно-синий, красный, серый.
- Бирюзовый: цвет фуксии, вишнево-красный, желтый, коричневый, кремовый, темно-фиолетовый.
- Электрик красив в сочетании с золотисто-желтым, коричневым, светло-коричневым, серым или серебряным.
- Голубой: красный, серый, коричневый, оранжевый, розовый, белый, желтый.
- Темно-синий: светло-лиловый, голубой, желтовато-зеленый, коричневый, серый, бледно-желтый, оранжевый, зеленый, красный, белый.
- Лиловый: оранжевый, розовый, темно-фиолетовый, оливковый, серый, желтый, белый.
- Темно-фиолетовый: золотисто-коричневый, бледно-желтый, серый, бирюзовый, цвет зеленой мяты, светло-оранжевый.
- Черный универсален, элегантен, смотрится во всех сочетаниях, лучше всего с оранжевым, розовым, салатным, белым, красным, сиреневатым или желтым.
Светлотный и цветовой контраст | nazart.ru
Изменяя цвет ступенями по теплохолодности, светлоте и насыщенности или глядя на цветовой круг, можно заметить, что однородный цвет ступени воспринимается нами неодинаково по всей поверхности. Край, граничащий с более светлой ступенью, кажется более тёмным, а граничащий с более темной ступенью — более светлым. Эта зрительная особенность называется светлотный контраст.
Отдельно взятый цвет воспринимается нами по-разному в зависимости от соседства с различными цветами. Близкие по цвету предметы кажутся одинаковыми при отдельном рассмотрении, но стоит расположить их рядом, как сразу видна их цветовая разница.
Художникам-живописцам хорошо известно, что отдельно взятый красивый цвет в определенном цветовом окружении может оказаться совершенно невыразительным, в то время, как цвет «грязный» в том же окружении окажется звучным и красивым. При этом серые тона ахроматического ряда могут приобретать цветовые оттенки. В этих случаях проявляется контраст цветовой.
Цветовые отношения — вот что, в конечном счете, определяет достоинства цветовой композиции в самом широком смысле этого слова.
Рассмотрим светлотный и цветовой контраст на примерах.
В качестве примера светлотного контраста изобразим гуашевыми красками горизонтальную полосу среднего серого тона, а затем сверху и снизу расположим вдоль неё светлотные ступени ахроматического ряда от светло-серого до черного цвета.
И тогда равномерно покрытая горизонтальная полоса будет казаться среди светлых ступеней темнее, а среди тёмных — светлее, а сами ступени будут восприниматься неоднородными по светлоте.
Пойдём дальше. Будем сочетать ахроматические тона с цветными, хроматическими. Приведу пример из природного явления. Светлые стволы осенних берез, имеющих слабую цветовую насыщенность, просматриваясь на фоне зелени озимых, казались розоватыми, а на фоне охристой опавшей листвы приобретали синеватый оттенок. На фоне активного цветового пятна тон ахроматический приобретает легкий оттенок цвета противоположного (дополнительного).
Таблица 19.Выполним ряд упражнений: изобразим одинаковые ахроматические квадраты на фоне больших, с различными насыщенными цветами. Серые квадраты, с одной стороны, начнут приобретать цветовые оттенки противоположные окружающему цвету, а с другой окажутся разными и по светлоте.
Это уже пример одновременно цветового и светлотного контраста.
Можно составить множество таблиц, состоящих из самых различных цветовых сочетаний, где будут порой сложно переплетаться светлотный и цветовой контрасты. Например, в большей степени цветового контраста можно добиться, если в приведенном выше примере вместо серых ахроматических квадратов поместить цветные. Одинаковые цвета в различном цветовом окружении станут, в одних случаях теплее, а в других — холоднее, и при этом изменится их светлота.
Крутая шпаргалка по сочетанию цветов
Правильное сочетание цветов — одна из важных составляющих любой работы, претендующей на звание “качественной”. Именно поэтому мы решили поделиться шпаргалкой, с которой вы точно не промахнетесь при выборе цветовой палитры для вашего следующего проекта.
Схема № 1. Комплиментарное сочетание
Комплиментарными, или дополнительными, контрастными, являются цвета, которые расположены на противоположных сторонах цветового круга Иттена.
Выглядит их сочетание очень живо и энергично, особенно при максимальной насыщенности цвета.
Схема № 2. Триада — сочетание 3 цветов
Сочетание 3 цветов, лежащих на одинаковом расстоянии друг от друга. Обеспечивает высокую контрастность при сохранении гармонии. Такая композиция выглядит достаточно живой даже при использовании бледных и ненасыщенных цветов.
Схема № 3. Аналогичное сочетание
Сочетание от 2 до 5 цветов, расположенных рядом друг с другом на цветовом круге (в идеале — 2–3 цвета). Впечатление: спокойное, располагающее. Пример сочетания аналогичных приглушенных цветов: желто-оранжевый, желтый, желто-зеленый, зеленый, сине-зеленый.
Схема № 4. Раздельно-комплиментарное сочетание
Вариант комплиментарного сочетания цветов, только вместо противоположного цвета используются соседние для него цвета. Сочетание основного цвета и двух дополнительных. Выглядит эта схема почти настолько же контрастно, но не настолько напряженно.
Если вы не уверены, что сможете правильно использовать комплиментарные сочетания, — используйте раздельно-комплиментарные.
Схема № 5. Тетрада — сочетание 4 цветов
Цветовая схема, где один цвет — основной, два — дополняющие, а еще один выделяет акценты. Пример: сине-зеленый, сине-фиолетовый, красно-оранжевый, желто-оранжевый.
Схема № 6. Квадрат
Сочетание 4 цветов, равноудаленных друг от друга. Цвета здесь несхожи по тону, но также комплиментарны. За счет этого образ будет динамичным, игривым и ярким. Пример: фиолетовый, красно-оранжевый, желтый, сине-зеленый.
Сочетания отдельных цветов
- Белый: сочетается со всем. Наилучшее сочетание с синим, красным и черным.
- Бежевый: с голубым, коричневым, изумрудным, черным, красным, белым.
- Серый: с цветом фуксии, красным, фиолетовым, розовым, синим.
- Розовый: с коричневым, белым, цветом зеленой мяты, оливковым, серым, бирюзовым, нежно-голубым.
- Фуксия (темно-розовый): с серым, желто-коричневым, цветом лайма, зеленой мяты, коричневым.
- Красный: с желтым, белым, бурым, зеленым, синим и черным.
- Томатно-красный: голубой, цвет зеленой мяты, песчаный, сливочно-белый, серый.
- Вишнево-красный: лазурный, серый, светло-оранжевый, песчаный, бледно-желтый, бежевый.
- Малиново-красный: белый, черный, цвет дамасской розы.
- Коричневый: ярко-голубой, кремовый, розовый, палевый, зеленый, бежевый.
- Светло-коричневый: бледно-желтый, кремово-белый, синий, зеленый, пурпурный, красный.
- Темно-коричневый: лимонно-желтый, голубой, цвет зеленой мяты, пурпурно-розовый, цветом лайма.
- Рыжевато-коричневый: розовый, темно-коричневый, синий, зеленый, пурпурный.
- Оранжевый: голубой, синий, лиловый, фиолетовый, белый, черный.
- Светло-оранжевый: серый, коричневый, оливковый.
- Темно-оранжевый: бледно-желтый, оливковый, коричневый, вишневый.
- Желтый: синий, лиловый, светло-голубой, фиолетовый, серый, черный.
- Лимонно-желтый: вишнево-красный, коричневый, синий, серый.
- Бледно-желтый: цвет фуксии, серый, коричневый, оттенки красного, желтовато-коричневый, синий, пурпурный.
- Золотисто-желтый: серый, коричневый, лазурный, красный, черный.
- Оливковый: апельсиновый, светло-коричневый, коричневый.
- Зеленый: золотисто-коричневый, оранжевый, салатный, желтый, коричневый, серый, кремовый, черный, сливочно-белый.
- Салатный цвет: коричневый, желтовато-коричневый, палевый, серый, темно-синий, красный, серый.
- Бирюзовый: цвет фуксии, вишнево-красный, желтый, коричневый, кремовый, темно-фиолетовый.
- Электрик красив в сочетании с золотисто-желтым, коричневым, светло-коричневым, серым или серебряным.
- Голубой: красный, серый, коричневый, оранжевый, розовый, белый, желтый.
- Темно-синий: светло-лиловый, голубой, желтовато-зеленый, коричневый, серый, бледно-желтый, оранжевый, зеленый, красный, белый.
- Лиловый: оранжевый, розовый, темно-фиолетовый, оливковый, серый, желтый, белый.
- Темно-фиолетовый: золотисто-коричневый, бледно-желтый, серый, бирюзовый, цвет зеленой мяты, светло-оранжевый.
- Черный универсален, элегантен, смотрится во всех сочетаниях, лучше всего с оранжевым, розовым, салатным, белым, красным, сиреневатым или желтым.
Ссылка на источник
Как сочетать цвета, с какими цветами сочетать, с каким цветом сочетать, какие цвета можно сочетать, с какими цветами можно сочетать, как сочетать цвета в одежде, как правильно сочетать цвета, цвета сочетаемые с серым, цвета сочетаемые с зеленым, как сочетать цвета в интерьере, мебель сочетаемые цвета, с чем сочетать цвет хаки, фото сочетаемых цветов в одежде, цвета сочетаемые с красным, какие цвета сочетать в одежде, как сочетать цвета фото, с чем сочетать синий цвет, с какими цветами сочетать серый цвет, с какими цветами сочетать серый, с каким цветом сочетать серый, цвета сочетаемые с черным, хорошо сочетаемые цвета, с какими цветами сочетать синий цвет, с какими цветами сочетать синий, с каким цветом сочетать синий, таблицы сочетаемых цветов, как сочетать разные цвета, с какими цветами сочетать зеленый, с каким цветом сочетать зеленый, цвета сочетаемые с белым, как правильно сочетать цвета в одежде, с чем сочетать бордовый цвет, какие цвета сочетать в интерьере, цвет марсала с чем сочетать, цвета сочетаемые с оранжевым, с чем сочетать коричневый цвет, с чем сочетать розовый цвет, как сочетать цвета таблица, какими цветами сочетать розовый, какой цвет сочетает розов, с какими цветами сочетать красный, с каким цветом сочетать розовый, с каким цветом сочетать красный, с чем сочетать мятный цвет, с чем сочетать горчичный цвет, с какими цветами сочетать коричневый, с каким цветом сочетать коричневый, таблица сочетаемых цветов в одежде, какие цвета лучше сочетать, правила сочетания цветов, правила сочетания цвета, главные правила сочетания цветов, цвет в интерьере правила сочетания, цветовой круг правила сочетания цветов, круг итона правила сочетания цветов, основы колористики правила сочетания цветов, правила сочетания цветов скачать, главные правила сочетания цветов скачать, правила сочетания цветов книга, книга главные правила сочетания цветов.
Сочетание цветов в интерьере (100+ фото) ✅️Таблицы комбинаций
Нежные пастельные оттенки создают спокойную атмосферу в комнате
Выбор основной оттеночной палитры и сочетаний цветов в интерьере в последнее время все чаще делают сами хозяева квартир и домов, причем интуитивно. К большому сожалению, современный ритм жизни размывает наши представления о естественности цветовых гамм. Именно поэтому так нередки случаи, когда обитать в только что отремонтированном доме почти невозможно ввиду совершенно несовместимых оттенков и палитр. Чтобы избежать подобного сценария, необходимо для начала узнать азы цветовой комбинаторики.
Содержание:
Контрастный бирюзовые и теплый желтый — отличный тандем для современной светлой кухни
Палитра пастельных оттенков позволяет создать теплый и уютный интерьер с нотками кантри и шебби-шика
Чтобы протестировать свое субъективное отношение к цветовым сочетаниям, стоит взглянуть на окружающий мир природы.
Ведь мы ее часть и ничто природное нам не чуждо. Природа живет состоянием полутонов, оттенков и теней. Здесь нет преобладающих монохромных цветов. Песочный закат, сменяющийся оранжевыми, красными, а иногда, ближе к горизонту, бурыми волнами на фоне седеющего неба – такая картина не может не вдохновлять!
Удачные примеры цветовых сочетаний из дизайнов интерьера 2018 года
Так почему же наше стремление к природному созиданию не всегда гармонирует с цветовыми решениями в повседневном быту? Может быть, скудный кошелек или, наоборот, напускная статусность диктуют условия выбора отделочных материалов, мебели и элементов декора? Прийти к гармоничному решению можно при любом бюджете, нужно лишь знать как. Рассмотрим все по порядку.
Приглушенные теплые оттенки мяты и кофе идеальны для интерьера в ретро-стиле
Мы знаем, что трехцветный спектр из красного, синего и желтого служит основой для так называемого круга цветов. При парном сочетании образуются вспомогательные цвета, а при смешивании более трех цветов или добавлении белого или черного получаются оттенки, которые можно создавать до бесконечности.
По гамме цвета делятся на холодные (синие группы) и теплые (желтые группы), которые имеют свои предназначения при оформлении интерьеров. Так, чтобы большое помещение не казалось пустым и неуютным, используют солнечные, светлые тона, а в малогабаритных комнатах тематику небесного простора передают группы синих цветов.
| Основной цвет | Сочетается с цветами | Не сочетается с цветами | Влияние цвета |
|---|---|---|---|
| серый | голубой, розовый, коричневый, желтый, красный, черный, синий, сиреневый | зеленый, оранжевый | предает помещению уныние и печаль |
| сиреневый | серый,каштановый, светло-фиолетовый | красный, оранжевый, желтый, коричневый, черный | мистический, загадочный и таинственный интерьер |
| фиолетовый | светло-зеленый, золотистый, оранжевый, желтый | темно-зеленый, коричневый, серый, красный | позволяет успокоиться человеку, обрести гармонию души. Фиолетовый-цвет мудрости и вдохновения |
| розовый | коричневый, серый, бордовый | желтый, оранжевый, черный | романтический интерьер |
| коричневый | золотистый, серый, бежевый, розовый, желтый | каштановый, бордовый, сиреневый | вызывает депрессию при длительном нахождении в интерьере с преобладанием коричневого цвета |
| синий | красный, серый, бордовый, золотистый | зеленый, сиреневый, коричневый | делает помещение прохладным иногда неуютным |
| голубой | красный, оранжевый, синий, светло-фиолетовый | золотистый, желтый, бордовый | делает интерьер холодным, при излишнем нахождении включении голубого цвета в помещении чаще происходят скандалы |
| зеленый | красный, черный, бордовый, желтый, оранжевый | серый, фиолетовый, синий | обладает успокаивающим и расслабляющим эффектом |
| желтый | серый, фиолетовый, коричневый, зеленый, черный | сиреневый, голубой, бордовый, розовый | иллюзия освещения солнцем, желтый цвет дарит хорошее настроение и бодрость |
| красный | синий, зеленый, серый, золотистый, желтый, черный | фиолетовый, каштановый, коричневый | поднимает настроение, не дает расслабиться, подходит для страстных людей |
| белый | сочетается с любыми цветами и их оттенками, так как содержит в себе все спектры цветов | таковых не имеется | вселяет чувство превосходства, делает помещение холодным |
| черный | красный, серый, белый, желтый, зеленый | розовый, сиреневый, бежевый | сужает пространство, вселяет в человека страх, делает интерьер таинственным |
Сочетания оттенков и цвета в различных помещениях
Важно! Не только объем влияет на подбор цвета, но также и целевое предназначение каждой комнаты отличается своей спецификой оформления.
Изящный благородный оттенок изумруда и пудры для элегантной атмосферы
Сочетания цветов в интерьере спальни: теплые цветаСпальня – самое спокойное и тихое место, в ее оформлении можно задействовать и холодные, и теплые гаммы в спокойных полутонах (от голубого до пастельно-розового). Но и здесь есть свои исключения. Для создания атмосферы страсти и любовного притяжения спальную зону вокруг семейного ложа можно задекорировать резкими контрастами будуарных цветов (вызывающий красный и черный, вишневый, сиреневый и т. д.).
На заметку! спокойно засыпать после трудового дня в такой яркой отделке получится не у каждого. В таком случае можно воссоздать интимную обстановку мобильными декоративными аксессуарами в виде свечей, зеркал, балдахина.
Гармоничное сочетание светлых пастельных тонов
Главное правило при оформлении интерьера – выделить основной и вспомогательные тона, а также оттенок, который выступит в роли акцента
Сочетание цветов в интерьере гостинойДля большой гостиной комнаты, которая является центром вечернего семейного досуга, подойдет умеренная колористика, которая дарит хорошее настроение и атмосферу релакса.
Будут уместны золотистые, серо-голубые, зелено-желтые сочетания среднего контраста.
Небольшая гостиная, служащая в основном для приема гостей и семейных чаепитий, требует праздничной, доверительной атмосферы, которую помогут создать сиреневые, фуксиевые или насыщенные синие тона вперемешку с цветами родственной группы (сизо-голубой, рыжий, аметистовый, серо-зеленый и т. д.)
Сочетание цветов в интерьере кабинетаДля домашнего кабинета подойдут классические нейтральные цвета (бежевый и практически все оттенки серого и его комбинации с другими цветами), способствующие концентрации в работе и генерированию светлых мыслей. В кабинете не должны присутствовать, по крайней мере, не в поле зрения, яркие предметы. Для кратковременного отдыха пусть они находятся вблизи, но не внутри рабочей зоны.
Романтическая цветовая палитра в отделке домашнего кабинета
Зонирование помещения с помощью окрашивания стен и потолка
Идеальный тандем оттенков серого и натурального дерева
Сочетание цветов в интерьере прихожей и коридораСтрадающие от недостатка естественного освещения коридор, холл и прихожая нуждаются в дополнительном просторе.
Здесь должны преобладать светлые солнечные или древесные тона.
Вопреки расхожему мнению, что оформление детской комнаты должно включать в себя все цвета радуги, это не так. Действительно, детей привлекает все самое яркое, но это же быстро их утомляет. Вот почему зонирование детской комнаты – необходимое решение: достаточно разноцветная игровая зона, нейтральная учебная и спокойная спальная.
Подбор цвета для ребенка по возрасту (теория Рудольфа Штейнера)
Если вы сторонник научного метода в выборе цвета для детской комнаты, то можете смело выбирать оттенок, согласовывая свой выбор с теорией цвета по возрастам Рудольфа Штейнера.
Если пересказать ее суть вкратце, то любому периоду в жизни ребенка после 6 лет, подростка или взрослого человека соответствует конкретный цвет или оттенок, в котором он ощущает себя максимально комфортно. Конечно же, это вовсе не означает, что нужно ежегодно переклеивать обои или покупать новую мебель! Достаточно будет всего лишь изредка дополнять дизайн детской комнаты акцентами и аксессуарами в соответствующей цветовой гамме:
| Возраст | Оттенки |
|---|---|
| 6 — 7 лет | красный, малиновый, темно-розовый; |
| 8 лет | охра и оранжевый; |
| 9 лет | цитрин, лимонный, желтый; |
| 10 — 12 лет | желто-зеленый, зеленый; |
| 13 — 14 лет | бирюза, зеленовато-голубой, голубой; |
| 15 — 16 лет | лазурный, ясно-голубой, синий; |
| 17 лет | лиловый, лавандовый, сиреневый, фиолетовый и его оттенки. |
Красочный декор детской комнаты
Грамотное оформление спальной, игровой и рабочей зон в одном помещении
Сочетания цветов в интерьере ванной и туалетаСанузел, стандартно имеющий небольшие габариты, не принято декорировать полутонами. Чистые композиции из розовых, молочных, бирюзовых акцентов всегда смотрятся выигрышно. В порядке исключения для создания особого контраста с белоснежностью ванны и фаянсом используют красный, синий, шоколадный и черный с золотистыми прожилками.
Сочетание цветов в интерьере кухниКухня должна вызывать намек на то, что неплохо было бы перекусить. Чтобы не только запахи или вид приготовленных блюд пробуждали аппетит, но и на подсознательном уровне стены, потолок, аксессуары, мебель, посуда усиливали бы его. Контрастные желтые, оранжевые, сиреневые, красные, светло-зеленые тона в сочетании с оттеняющими цветами направят ваш выбор в нужную сторону.
Холодные светло-голубые или, наоборот, приглушенные кофейные, солнечные, бежевые тона также можно использовать в кухне (довольно распространенное явление).
Подобные решения располагают к неторопливой беседе за столом, тщательному пережевыванию, размеренному чтению газеты.
Уютный уголок для приготовления и приема пищи
Сочетание цветов в интерьере: комбинаторика
Чтобы не было визуального переутомления или, наоборот, скучного однообразия, подбор цветов должен учитывать три основных типа сочетания – однотонность, контрастность, сбалансированность. Диапазон цветов в первом случае сводится к одному цвету с колебаниями в светлые и темные тона. Как правило, однотонную отделку разбавляют элементами декора одного или двух цветов.
При контрастном приеме используется принцип антиподов. Противопоставляя темные оттенки светлым, можно достичь оригинального яркого тандема. К примеру: белый – черный, фиолетовый – светло-зеленый, шоколадный – золотистый и так далее.
В стремлении соблюсти баланс один из чистых цветов должен доминировать в интерьере при визуальной поддержке родственных тонов. Чтобы не допустить визуального перенасыщения, рекомендуется не использовать более пяти цветов.
Таблица, помогающая различать холодные и теплые оттенки
Важно! С красным уместно использовать его светлые производные – оранжевый и желтый. При темных вариациях красного подойдут сиреневый и розовый. Если вы хотите придать интерьеру особую нарядность, используйте мелкие предметы, контрастирующие с основным цветом.
Схема компоновки оттенков
О чем говорят цвета? Психология, значение и восприятие цвета
Если хотите узнать внутренний мир человека, загляните в его комнату. Экспрессивность, педантичная аккуратность, лень, уверенность, скромность или жадность – обо всем этом и немного больше расскажет выбранная цветовая палитра.
Красный – цвет, побуждающий к действию, доминированию и лидерству. Этот оттенок в интерьере выбирают люди страстные и азартные, он противопоказан людям с неустойчивой психикой.
В интерьере в чистом виде использование красного довольно тяготит, поэтому для создания органичного дизайна требуется квалифицированная рука мастера.
Элементы декора красного цвета не станут перегружать интерьер
Оттенки синего успокаивают, расслабляют и позволяют сконцентрироваться. Голубые, бирюзовые тона и цвет морской волны создают ощущение беззаботности, легкости и озорства.
Сочетание оттенков синего в интерьере дарит теплую атмосферу
Преобладающие желтые цвета говорят об энергичности, солнечности и жизнерадостности персоны. Вместе с тем нехватка творческого полета и нереализованный потенциал также характерны для этого цвета. Некоторые психологи приписывают желтому цвету даже ревность и трусость, но это спорное утверждение.
Горчично-желтые тона делают интерьер более сдержанным
Комбинация синего и желтого создает производный зеленый цвет, присущий людям консервативных взглядов. Зеленый – это антистрессовый цвет.
Он выгодно применяется в спальных комнатах или гостиных для создания расслабляющей атмосферы.
Выигрышное сочетание зеленого с рыжим
Оранжевый цвет без примесей – это энергия, ее неукротимый фонтан. Насыщенная охра и нежный абрикосовый являются акцентами в комнате, поэтому чаще всего представлены в виде оригинального текстиля и аксессуаров. В использовании оранжевого требуется соблюдать осторожность, так как его оттенки оказывают доминирующее влияние на остальные цвета.
Идеальное трио сочных оттенков: оранжевый, зеленый и красный
Гостиная в ретро-стиле с мягким цветовым оформлением
Фиолетовый цвет считается цветом творческой души. Обладая мистической притягательностью, он одновременно передает холодность синих гамм и излучение теплых тонов. Контрастные комбинации «фиолетовый – лайм» или «фиолетовый – желтый» – любимые сочетания многих дизайнеров.
Немного виноградного оттенка в спокойной нейтральной спальне
Розовый цвет – олицетворение романтики и нежности для женщин всех возрастов.
Гармония розовых акцентов напрямую зависит от их насыщенности (от синдрома Барби до зрелой классики). Разбавляя розовый молочными, серыми и серо-зелеными мотивами можно подчеркнуть утонченность и воздушность интерьера.
Романтический образ спальни в бело-розовых красках
Акценты цвета маджента в стильной гостиной
Яркая фуксия в сочетании с бирюзовым — «классическое» яркое сочетание
Коричневый цвет относят к разряду меланхоличных незаслуженно. В сочетании с темными тонами и золотистыми вкраплениями он создает королевский шик и привилегированность. Коричневый выбирают разносторонние личности.
Домашняя мастерская в темном исполнении
Палитра коричневого в оформлении прихожей в стиле модерн
Серый цвет благодаря своей нейтральности является отличным магнитом, принимающим на себя агрессию более яркого тона. В качестве самостоятельной однотонной отделки он может быть достаточно скучным, в зависимости, конечно, от функционального предназначения комнаты.
Серые тона предпочитают люди, стремящиеся к пониманию и постоянству.
Нейтральный серый цвет можно разбавить любым оттенком
Определенные цвета в помещении настроят на нужный лад
Особое внимание при декорировании помещения стоит уделить выбору оттенков
WebAIM: Обучение веб-доступности
Вы здесь: Главная> Услуги> Обучение WebAIM
Вариант виртуального обучения
Из-за воздействия COVID-19 в настоящее время мы приостановили наши очные тренинги. Мы приглашаем вас зарегистрироваться на наше виртуальное обучение, которое будет полностью онлайн.
Обучение веб-доступности
Когда: TBA (отложено из-за COVID)
Где: Логан, Юта
Стоимость: 950 долларов США на человека (800 долларов США на человека для групп из двух и более человек)
- Это учебное занятие будет обучать всему: от базовых принципов доступности в Интернете до расширенных методов доступности .
- Узнайте, что вам нужно знать, чтобы обеспечить соответствие вашего веб-сайта правовым нормам и международным стандартам .
- Это обучение в первую очередь подходит для веб-разработчиков, но будет полезно для дизайнеров, руководителей программ, экспертов по обеспечению качества или всех, кто заинтересован в глубоком понимании веб-доступности. Рекомендуется базовое понимание HTML.
- Участники тренинга получают бесплатную регистрацию на онлайн-курс «Доступность документов WebAIM (Word, PowerPoint и PDF)» стоимостью 125 долларов.
- Если вы ищете организационные или системные изменения в доступности, наш семинар по стратегической доступности — StrategicA11y может лучше соответствовать вашим потребностям.
- Наши предыдущие тренинги получили среднюю оценку более 4,5 из 5. Прочтите, что другие говорят о тренингах WebAIM.
План обучения
- Принципы веб-доступности: создание заметных, работоспособных, понятных и надежных (POUR) веб-сайтов.
- Как люди с ограниченными возможностями взаимодействуют с Интернетом и используют его? Понимание того, как работают вспомогательные технологии.
- Понимание требований законодательства — раздел 508, раздел 504, Закон об американцах с ограниченными возможностями, а также законы других штатов, США и международные законы.
- Оценка доступности веб-сайта — автоматизированные инструменты, тестирование пользователей, использование программ чтения с экрана и понимание Руководства по обеспечению доступности веб-контента (WCAG) 2.1.
- Замечания и рекомендации по подписи
- Методы доступности HTML
- Изображения и соответствующий замещающий текст
- Формы этикеток
- Названия фреймов
- Таблицы — макетные таблицы, заголовки таблиц и связывание ячеек данных с заголовками
- Методы доступа к клавиатуре
- Javascript и обновления динамического содержимого.
- HTML5, CSS и специальные возможности веб-приложений
- . .. и многое, многое другое.
- Собираем все вместе
- Инструменты, методы и методологии оценки
- Доступная навигация, структура и семантика
- Последний день обучения будет разделен на два занятия, чтобы можно было подробно рассмотреть эти темы — одно для расширенных форм и доступности ARIA, а другое — для специальных возможностей документов — Adobe Acrobat (PDF) и Microsoft Office (Word и Силовая установка).
.. и многое, многое другое.Одна из лучших технических конференций, на которых я присутствовал.
Декабрь 2017 г.Участник тренинга
Если вы хотите получить навыки, необходимые для обеспечения доступности веб-сайта вашей организации, этот тренинг предоставит вам то, что вам нужно. Мы также предоставим вам ресурсы и информацию, которые позволят вашей организации удовлетворить все ваши будущие потребности в доступности.
WebAIM обучила десятки тысяч веб-разработчиков по всему миру.В число клиентов входят PayPal, IBM, eBay, Налоговая служба, правительства нескольких штатов и более 100 колледжей и университетов.
Тренеры WebAIM представили свои выступления на сотнях конференций и встреч по всему миру и активно участвуют в разработке стандартов веб-доступности.
Нужна помощь или хотите обновления?
Если у вас есть какие-либо вопросы относительно обучения или вы хотите получить уведомление, когда мы возобновим наши очные тренинги, свяжитесь с нами по электронной почте или по телефону 435-797-8284.
alexchantastic / Contrast-table: создать таблицу для определения цветового контраста
GitHub — alexchantastic / Contrast-table: создать таблицу для определения цветового контраста🌈 Создайте таблицу для определения цветового контраста
Файлы
Постоянная ссылка Не удалось загрузить последнюю информацию о фиксации.Тип
Имя
Последнее сообщение фиксации
Время фиксации
Создайте таблицу, которая поможет вам определить, доступна ли ваша цветовая палитра согласно WCAG 2.
1.
Как использовать
Перейдите на https://alexchantastic.github.io/contrast-table/
При первой загрузке приложения будет загружен образец цветовой палитры
Чтобы изменить используемую цветовую палитру, добавьте свою цветовую палитру, разделенную запятыми, к URL-адресу, начиная с
?e.г., https://alexchantastic.github.io/contrast-table/?#000,#fff
Каждая ячейка представляет собой комбинацию заголовка столбца (цвет переднего плана) и заголовка строки (цвет фона) и отображает:
- ✅ проходов
- ❌ не проходит
- Коэффициент контрастности
- Оценка (AA / AAA / F)
Допустимые значения цвета
| Тип значения | Пример |
|---|---|
| Шестигранник | # b4d455 |
| Имя | ребеккапурпурный |
| RGB | RGB (255, 255, 255) |
| РГБА | rgba (255, 255, 255, 0. |
5) Лицензия
Кодвыпущен под лицензией MIT.
Около
🌈 Создайте таблицу для определения цветового контраста
Темы
Ресурсы
Лицензия
Вы не можете выполнить это действие в настоящее время.Вы вошли в систему с другой вкладкой или окном. Перезагрузите, чтобы обновить сеанс. Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс.таблиц контрастности (стр.84) — Maggie Maggio
Ключи значений Как мы видели на прошлой неделе, контраст значений относительный. Комбинации цветов, которые имеют высокую / светлую ценность, называются высоким ключом.
Комбинации цветов с низким / темным значением называются низким ключом, и если все цвета находятся в среднем диапазоне значений, то комбинация находится в среднем ключе.
Все эти комбинации имеют низкую контрастность, потому что значения каждого цвета аналогичны. Чтобы получить комбинации с высоким контрастом, вам нужно использовать цвета, которые сильно различаются по значению.
Гармония оттенков Цветовые схемы обычно определяются оттенком или, более конкретно, комбинацией оттенков. Комбинации оттенков известны как гармонии оттенков
.Шесть общих цветовых гармоний показаны ниже.
Важно отметить, что чистые оттенки варьируются по значению от светлого (желтые) до темного (сине-фиолетовый.)
Это означает, что гармония полихроматического оттенка с использованием чистых оттенков автоматически будет иметь значение контраста.
Дополнительная гармония оттенков солнечно-желтого и сине-фиолетового имеет высокий оттенок и контрастность.
Но затените желтый и сине-фиолетовый оттенок, и контраст значений будет потерян, потому что и желтый, и сине-фиолетовый сдвигаются к одинаковому среднему значению. Использование цветовой схемы с высокой контрастностью оттенков не гарантирует контраст значения.
Диапазоны насыщенности. Самый сложный для понимания контраст — это насыщенность. Наивысшим контрастом насыщенности будет цветовая схема, в которой используются чистые цвета и черный и белый вместе. Разница в насыщенности от чистых цветов до нейтральных настолько велика, насколько это возможно.
W eekend Дополнительное упражнение: изменение таблицы контрастности
1. Подумайте о цветовой схеме, которую вы хотите попробовать, и смешайте от восьми до десяти цветов в качестве отправной точки для игры с контрастами.Продолжайте смешивать, пока не получите цвета, которые вам нравятся вместе. Сделайте достаточно каждого цвета, чтобы использовать его для трех таблиц контрастности.
2. Следуйте инструкциям в книге для создания первой таблицы контрастности с использованием смешанных вами цветов.
3. Измените значения каждого из цветов и составьте вторую таблицу контрастности.
4. Измените насыщенность цветов и составьте третью таблицу контрастности.
5. Выпекайте таблицы контрастности в соответствии с инструкциями производителя.
6.Сравните уровни контрастности в трех таблицах. Гармония оттенков будет одинаковой во всех трех, но ощущение будет совершенно другим, потому что количество контраста изменилось.
Цветовой контраст — Доступность | MDN
Цветовой контраст между фоном и содержимым переднего плана (то есть обычно текстом) должен быть достаточно большим, чтобы обеспечить удобочитаемость.
При разработке читаемых интерфейсов для различных возможностей зрения руководство WCAG рекомендует следующие коэффициенты контрастности:
| Тип содержания | Минимальное соотношение (рейтинг AA) | Повышенное соотношение (рейтинг AAA) |
|---|---|---|
| Основной текст | 4. 5: 1 | 7: 1 |
| Крупномасштабный текст (на 120–150% больше основного текста) | 3: 1 | 4,5: 1 |
| Активные компоненты пользовательского интерфейса и графические объекты, такие как значки и графики | 3: 1 | Не определено |
Эти соотношения не применяются к «случайному» тексту, такому как неактивные элементы управления, логотипы или чисто декоративный текст.
Дополнительные сведения см. В разделе «Решение» ниже.
Наличие хорошего цветового контраста на вашем сайте приносит пользу всем вашим пользователям, но особенно полезно для пользователей с определенными типами цветовой слепоты и других подобных состояний, которые испытывают низкий контраст и не могут различать похожие цвета. Это связано с тем, что они не так хорошо видят яркие и темные области, как те, в которых нет таких условий, и, следовательно, не могут видеть края, границы и другие детали.
Хорошо иметь крутой дизайн на вашем веб-сайте, но дизайн бесполезен, если ваши пользователи не могут прочитать ваш контент.
Давайте посмотрим на простой код HTML и CSS:
Хорошая контрастность
Плохая контрастность div {
}
.хорошо {
цвет фона: # fae6fa;
}
.Плохо {
цвет фона: # 400064;
} Оба фрагмента текста имеют черный цвет по умолчанию. «Хорошо» «Плохой» При выборе цветовой схемы для своего веб-сайта выбирайте цвета переднего плана и фона с хорошим контрастом.Сделайте цветовой контраст настолько хорошим, насколько это возможно в рамках ограничений вашего дизайна — в идеале используйте рейтинг AAA (см. 1.4.6 ниже), но, по крайней мере, соответствуйте рейтингу AA (см. Если вы включаете нетекстовый контент, такой как видео или анимация, вы должны следовать 1.4.11 (опять же, см. Ниже). Для проверки контрастности при выборе цвета используйте такой инструмент, как Color Contrast Checker от WebAIM. Вы также можете проверить цветовой контраст на лету с помощью инструментов разработчика Firefox — см. Наше руководство по инспектору специальных возможностей и, в частности, раздел «Проверка на наличие проблем с доступностью».Попробуйте использовать его на живых примерах в разделе описания. Важным аспектом цвета в сети как для слабовидящих, так и для слепых пользователей является достаточный контраст между передним планом (текстом или графикой) и фоном. Максимальный контраст между черным и белым, но эту комбинацию можно считать слишком подавляющей (это может вызвать блики). Можно использовать другие цвета — например, темно-синий, темно-зеленый или темно-бордовый для темных и пастельные для светлых — чтобы уменьшить контраст. Однако некоторые современных дизайнов настолько «тонкие», что контраст может оказаться недостаточным для некоторых читателей. Примеры включают контраст между светло-серым и средним серым, средние пастельные и темные цвета или белый и светло-голубой (сине-зеленый).Если вы планируете использовать тонкую цветовую палитру, рекомендуется использовать анализатор цвета, чтобы обеспечить достаточный контраст. В большинстве онлайн-тестов вы вводите шестнадцатеричный цветовой код для цветов переднего плана (текста) и фона, и тестер генерирует числовой результат. Обычно низкое число или соотношение указывает на слишком низкий контраст. Гильдина WCAG 2.0 1.4.3 рекомендует следующее соотношение светимости стандарт от 1 до 4.5 для основного текста и от 1 до 3 для крупномасштабного текста (18 пунктов + или 14 пунктов + полужирный). Визуальное представление текста и изображений текста имеет коэффициент контрастности не менее 4,5: 1, за исключением следующего: (Уровень AA) Следующие ссылки позволяют разработчикам проверить контраст между двумя цветовыми кодами Интернета. Контраст многих ярких цветов (например, красный / зеленый, синий / оранжевый и т. Д.) Не проходит тест на контраст, потому что они схожи по значениям с точки зрения яркости и темноты. Если ваша цветовая схема не проходит ни один из вышеперечисленных тестов, вероятно, потребуется всего несколько незначительных корректировок, чтобы привести значения цвета к более приемлемому уровню. См. Примеры ниже. ПРИМЕЧАНИЕ : «Крупный текст» = 18 пикселей или 14 пикселей полужирным шрифтом С оранжевым и красным может быть трудно работать, потому что цвет не очень темный или не очень светлый, и поэтому его трудно контрастировать до достаточного уровня. 4,0: 1 (сбой) 5.9: 1 (пас в AA) 2,9: 1 (сбой) 4,6: 1 (пас при AA) Начало страницы Хизер Капретт Контрастность — это разница в яркости или тональных значениях между передним планом и фоном.Другими словами, разница между значением цвета переднего плана, который обычно является цветом вашего шрифта, и цветом фона экрана. Контрастность — это свойство, которое помогает нам видеть и отличать фигуру от фона. WCAG 2.0 требуют, чтобы коэффициент контрастности между цветом переднего плана (цветом текста) и цветом фона составлял 4,5: 1, чтобы соответствовать уровню AA, для стандартного размера шрифта, например Шрифт 12 пт. Большие размеры печати или крупномасштабный текст могут иметь коэффициент контрастности 3: 1. Большой размер шрифта считается 14 pt (примерно 18.66 пикселей) полужирным шрифтом или 18 пт (24 пикселя) или больше нежирным шрифтом. Требования к контрастности такие же для WCAG 2.1 для уровня AA. WCAG 2.1 имеет дополнительный стандарт (1.4.11) для компонентов пользовательского интерфейса и графических объектов, который требует коэффициента контрастности 3: 1 по сравнению с соседними цветами для прохождения уровня AA. Существует множество анализаторов цветового контраста, доступных в различных программах и в виде бесплатных загрузок в Интернете. Автономное приложение, которое сообщит вам, достаточно ли контрастность вашего выбора цвета переднего плана и фона для соответствия требованиям WCAG 2.Стандарты уровня AA или уровня AAA 0 называются анализатором цветового контраста. Его можно бесплатно загрузить с веб-сайта Paciello Group. Это отличный инструмент, и я рекомендую его скачать и установить! Он содержит пипетку для выборки цветов на экране вашего компьютера, как и палитра цветов Adobe Photoshop. Вы можете оставить приложение на рабочем столе или установить для него ярлык в меню «Пуск» Windows, чтобы иметь легкий доступ к его запуску. Color Contrast Analyzer сообщит вам коэффициент контрастности выбранных вами цветов переднего плана и фона и сообщит, соответствует ли он требованиям WCAG 2.0 уровня AA и уровня AAA и переключает в режим, который позволяет вам увидеть, как люди с разной цветовой слепотой видят ваш текст на фоне. Если ваш выбор цвета не подходит, есть ползунки для настройки значений красного, зеленого и синего цветов, чтобы изменить цвет на приемлемый, а также предлагаемые варианты цвета. Шестнадцатеричные цветовые коды из передаваемых цветов можно скопировать и использовать в редакторе содержания Word или Blackboard Learn. Шестнадцатеричный код обычно используется для обозначения цветов в HTML.Шестнадцатеричный код цвета принимает формат октоторапа (символа фунта), за которым следуют шесть букв или цифр, два символа для красного, два для зеленого и два для синего. Шестнадцатеричный код белого цвета — #ffffff, а черного — # 000000. Более старая классическая версия Color Contrast Analyzer (2.5.x) также имеет встроенный экран, веб-страницу и средство просмотра файлов, которые позволят вам увидеть, как цвета в целом выглядят для людей с различными типами цветовой слепоты. . Это более позднее моделирование доступно только в версии для Windows.Эти смоделированные веб-страницы для протанопии, дейтеранопии и тританопии можно сохранить в виде файлов jpg (jpeg), если вам понадобится ссылаться на них позже или поделиться ими с другими дизайнерами и лицами, принимающими решения. Color Contrast Analyzer — Видео было записано с помощью немного более старой версии 2.5 , которую я предпочитаю в Windows 7. Color Contrast Analyzer — это более новая версия CCAe v 1.1.1 , построенная на платформе Electron для Windows 10 Color Contrast Analyzer с интерактивными вопросами викторины. Загрузите бесплатное приложение Color Contrast Analyzer (CCAe v. 1.1.x) с сайта Paciello Group (посетите: https://developer.paciellogroup.com/resources/contrastanalyser/) For the Color Contrast Analyzer — более старая версия 2.5 для Windows на GitHub (посетите: https://github.com/ThePacielloGroup/CCA-Win/releases) Word есть встроенная программа проверки доступности, которая иногда обнаруживает проблемы с контрастом, а иногда нет. Использование приложения Color Contrast Analyzer может помочь вам проверить, если вы сомневаетесь в своем выборе. Другими инструментами для проверки наличия адекватного цветового контраста являются страница проверки контрастности WebAIM и анализатор коэффициента контрастности цвета JuicyStudio Luminosity. Оба они требуют, чтобы вы знали шестнадцатеричные значения цвета, прежде чем перейти на страницу. Не существует инструмента пипетки, чтобы пробовать цвета со страницы, открытой на вашем экране. Вы вводите известные значения цвета в их форму и отправляете ее, чтобы получить результаты по тесту WCAG 2.0 уровня AA или AAA. WebAIM рекомендует дизайнерам установить надстройку Colorzilla для Firefox или расширение для Chrome, чтобы вычислять шестнадцатеричные значения цветов на веб-странице.Еще одно бесплатное онлайн-средство выбора цвета, которое позволит вам получить шестнадцатеричный код цвета, значения RGB и HSL, находится на http://htmlcolorcodes.com. WAVE также проанализирует коэффициенты контрастности для всех элементов страницы сразу. Вы просто вводите URL-адрес в их форму, чтобы проанализировать веб-страницу. Анализатор цветовой контрастности, разработанный Управлением информационных технологий Университета штата Северная Каролина, доступен как расширение Chrome в Интернет-магазине Chrome. Он покажет контрастные края как черно-белый экран.Это другой взгляд на вещи. Если вы не видите достаточного разграничения между текстом, символами переднего плана и их фоном, вам необходимо увеличить коэффициент цветового контраста. Пример ниже показывает визуальные результаты их процессора. Это форма, в которой обязательные метки полей вводятся красным текстом. Красный текст отображается как области с меньшим разграничением. Людям с дальтонизмом часто трудно различать определенные цвета, например красный и зеленый или синий и желтый.Когда цветовые комбинации (например, красный текст на зеленом фоне) недостаточно контрастны, слова могут фактически исчезнуть для человека с дальтонизмом или другими формами слабого зрения (катаракта, дегенерация желтого пятна и т. Д.). Важно выбирать сильные, контрастные цветовые сочетания и напрямую маркировать объекты, которые в остальном различаются только цветом на странице (например, диаграммы и графики). Не забывайте использовать высококонтрастный текст, даже если текст фактически находится на изображении. Цвета должны соответствовать стандартам цветового контраста WCAG 2.0 AA. Проверьте свой коэффициент цветовой контрастности Убедитесь, что цвета, которые вы используете на графиках или диаграммах, имеют высокую контрастность.Этот пример легко отличить, но только если вы видите цвета, как задумано: Ниже представлена та же круговая диаграмма, что и для двух видов дальтонизма. Не используйте цвет как , только способ передачи контента.Вы также должны использовать прямые текстовые метки или изменения формы или текстуры. В следующем примере части графика помечены напрямую, вместо того, чтобы полагаться на сопоставление цветов с легендой. Он также использует текстуру вместо цвета, чтобы различать элементы. Хотя на приведенном ниже графике для различения разделов используются текстовые метки и текстура, вам не обязательно использовать и то, и другое. Этот простой пример доступен как есть, поскольку он высококонтрастен и имеет прямую маркировку.Конечно, это изображение, поэтому не забудьте добавить замещающий текст. Чтобы добавить цвета к этому примеру, используйте любые цвета, которые сильно контрастируют с черным. Вот пример «фиксации» недоступной круговой диаграммы Недоступно Доступно 
1.4.3 ниже).
4.6 Повышенная контрастность (AAA) Доступность в Пенсильвании | Цвет и контраст на веб-страницах
Содержание страницы
Сводка
Контрастные тесты
WCAG 2.0
ПРИМЕЧАНИЕ : Если ваша целевая аудитория в основном слабовидящая, то рекомендуется соотношение от 1 к 7.
Руководство WCAG 2.0 1.4.3
Образцы палитр
Яркие цвета
См. Страницу Работа с яркими цветами для получения более подробной информации. Серый / Белый
Уровень серого Соотношение WCAG # 000000 (черный) 21: 1 (пас) # 333333 12.6: 1 (пас) # 666666 5,7: 1 (пас) # 777777
# 777777 (большой) 4,5: 1 (сбой)
ОК для крупного текста # 999999 2,8: 1 (сбой) #CCCCCC 1,6: 1 (сбой) Серый / Черный
Уровень серого Соотношение WCAG # 333333 1. 
7: 1 (сбой) # 666666
# 66666 (большой) 3,7: 1 (сбой)
AA для крупного текста # 999999 7,4: 1 (пас) #FFFFF (белый) 21: 1 (пас) Голубой / Белый
Голубой Уровень Соотношение WCAG # 003333 13,8: 1 (проход)
Трудно определить как не черный # 006666 6.8: 1 (пас) # 009999
# 009999 (большой) 3,5: 1 (сбой)
AA только для крупного текста # 00CCCC 2,0: 1 (сбой) Белый / Морской зеленый
Цвета Соотношение WCAG морской зеленый на зеленом
#DDFFEE на # 82C1B4 1: 9: 1 (сбой) морской зеленый на темно-зеленом
#DDFFEE на # 32796D 4.8: 1 (пас на АА) Оранжевый и красный / белый
Цвета Соотношение WCAG красный на белом
# FF0000 на #FFFFFF малиновый на белом
# CC0000 на #FFFFFF оранжевый на белом
# FF6600 на #FFFFFF красно-оранжевый на белом
# DD3300 на #FFFFFF Создание документов Word с расширенными возможностями — Цветовой контраст для доступности — Лучшие практики в доступном онлайн-дизайне
Цвет и графика | Понимание веб-доступности | Веб-доступность
Цвет и графика
Использование цвета в графиках
Использование текстовых меток в графиках
Будь проще
Поиск проблемы