Многие исследователи занимались вопросами цвета, и одним из самых заметных, несомненно, был Иоханнес Иттен, автор книги «Искусство цвета». В своей работе автор рассматривает множество аспектов колористики: психологическое воздействие цвета, «вес» каждого оттенка, сочетание цвета и формы и многое другое.

Начнём с самого понятного — сочетания цветов. Именно работа цветов в паре или группе оказывает самое непосредственное влияние на первое впечатление от рисунка. Для этого используется термин «контраст» — то есть, сопоставление двух и более цветов таким образом, чтобы их можно было эффективно сравнить и показать различия. Контраст помогает выявить динамику рисунка, его настроение, характер, цель. Иттен выделяет семь основных групп контраста:

Контраст по цвету — одна из наиболее простых схем работы. Как говорится в книге Иттена, «Он выражается во взаимодействии предельной насыщенности чистых цветов. Как белый и чёрный являют самый сильный контраст светлого и тёмного, так и первичные цвета, жёлтый, синий и красный, наделены свойством наиболее сильного цветового контраста, создающего впечатление простоты, силы и решительности. Интенсивность цветового контраста ослабевает от первичных — к цветам третьего порядка».

Проще говоря, если вы для своей работы выберете сочетания двух (желательно противоположных) цветов, причём в их насыщенной форме, и поставите рядом, у вас получится очень звучный и насыщенный контраст. Но главное знать меру, уметь «приглушать» такие сочетания и правильно распределять массы. Иначе вы рискуете получить очень яркую картинку без акцента на какую-либо деталь.

Как пример: на картинке со стикером вы можете увидеть несколько видов контраста, но ведущий в нём — контраст по цвету. Противопоставление красного и синего цветов дает очень звучное сочетание, но чтобы оно смотрелось более спокойно, использованы приглушённые тона. Синего на картинке больше — это создаёт обрамление для тех небольших красных насыщенных пятен, которые можно увидеть на лице девушки.

Второй пример: постер из игры Prey. Как видите, тут используется контраст предельно насыщенных цветов, но за счёт распределения масс, этот контраст выглядит гармонично и в нём чётко расставлены акценты.

Контраст светлого и темного. Кажется, данная сочетаемость цветов является самой понятной. Она основана на использовании цветов различной светлоты и тоновых градаций цвета. Светлое пятно будет выделяться в тёмном окружении, как и тёмное пятно будет выделяться на светлом фоне.

Все цвета могут быть осветлены белым или затемнены чёрным. У каждого цвета есть свой тон — это очень легко проверить, просто попробуйте сделать цвета на цветовом круге чёрно-белыми. Но вот здесь и кроется главная проблема. Не все цвета могут планомерно становиться светлыми или тёмными. Некоторые из них, если их начать осветлять или затемнять, начинают терять насыщенность, и это может стать проблемой — особенно в рамках мобильного арта. Лучше всего это решить использованием другого цвета, а не затемнением оригинального — это поможет избежать примешивания в картинку «грязи».

Иттен говорит следующее: «Чистый жёлтый цвет соответствует третьей ступени серого цвета, оранжевый — пятой, красный — шестой, синий — восьмой, а фиолетовый — десятой. Насыщенный жёлтый цвет является самым светлым из чистых цветов, а фиолетовый — самым тёмным. Так что жёлтый цвет, чтобы совпасть с тёмными тонами серой шкалы, должен приглушаться, начиная уже с четвёртой ступени. Чистые красный и синий цвета расположены более глубоко, на расстоянии всего нескольких ступеней от чёрного и далеко от белого. Каждая примесь чёрного или белого уменьшает их насыщенность».

Итак, при создании контраста светлого и темного необходимо учитывать две вещи — контраст цветов и контраст тона этих цветов. И это даёт вам контроль над тем, какую глубину изображению вы хотите задать, и какие элементы хотите выделить или задвинуть (хотя и здесь есть свои исключения — о них чуть позже).

Разберем всё на конкретном примере. Взгляните на скриншот карты из игры Cut the Rope 2. Если перевести картинку в ч/б и проанализировать её, то видно, что главная сюжетная дорожка — самый светлый и яркий элемент на экране, лежащей на лужайке среднего тона. Так же ярко выделяются монетки в верхней части экрана, так как они лежат на тёмном фоне деревьев и создают хороший контраст. Сами деревья (сверху и снизу) слиты по тону в одно темное пятно с небольшой вариацией цвета — это сделано намеренно, чтобы создать нужный фокус на экране, но при этом не делать его скучным. Кнопки хоть и не сильно контрастируют с фоном по тону, но они выделяются по цвету.

Контраст тёплых и холодных цветов. Можно сказать, что этот контраст — самый простой. Обычно жёлтый, жёлто-оранжевый, оранжевый, красно-оранжевый, красный и красно-фиолетовый принято называть «тёплыми цветами», а жёлто-зелёный, зелёный, сине-зелёный, синий, сине-фиолетовый и фиолетовый — «холодными». И в принципе, эта формула прекрасно работает.

Но как и везде, здесь тоже есть свои нюансы. Например, стоит уделить внимание тому, какой именно оттенок цвета используется и в каком окружении используется этот цвет.

Возьмём для наглядности конкретные примеры. На картинке ниже вы видите очень простой стикер в технике flat colors. Кожа у обеих девушек одного оттенка, но волосы — разные оттенки одного цвета. Что получается в итоге? Во-первых, волосы слева смотрятся теплее тех, что справа (то есть, один и тот же цвет может казаться теплее или холоднее). Во-вторых, кожа в окружении разных тонов фиолетового смотрится по разному. Кожа девушки слева кажется темнее и теплее, чем кожа девушки справа.

Это подтверждает общую теорию: оттенок и окружение могут сильно повлиять на впечатление от цвета. Это инструмент, который важно понимать и уметь им пользоваться. Порой кажущийся холодным цвет — это всего лишь более «серая» версия цвета тёплого, но при взаимодействии друг с другом они образуют пару тёплый/холодный.

Также не стоит забывать о воздействии тёплых и холодных тонов на изображение в целом. Из книги Иттена: «В природе более удалённые предметы в силу отделяющего их от нас воздушного слоя всегда кажутся более холодными. Контраст холодного и тёплого обладает свойством влиять на ощущение приближённости и удалённости изображения. И это качество делает его важнейшим изобразительным средством в передаче перспективы и пластических ощущений».

Если кратко — холодные тона отдаляют предмет, тёплые — приближают. Если вам важно отбить какой то элемент от фона — сделайте фон холодным, а элемент (кнопку, например) тёплым. Это очень эффективный прием, используемый в мобильных играх. Как пример, посмотрите на скриншот из игры Cut the Rope 2.

Контраст дополнительных (комплиментарных) цветов. Из книги Иттена: «Мы называем два цвета дополнительными, если их пигменты, будучи смешанными, дают нейтральный серо-чёрный цвет. В физике два хроматических света, которые при смешивании дают белый свет, также считаются дополнительными. Два дополнительных цвета образуют странную пару. Они противоположны друг другу, но нуждаются один в другом. Расположенные рядом, они максимально возбуждают друг друга и взаимоуничтожаются при смешивании, образуя серо-чёрный тон, как огонь и вода. Каждый цвет имеет лишь один-единственный цвет, который является по отношению к нему дополнительным».

Что мы можем вынести из этого определения? Первое: дополнительные цвета — это цвета, расположенные друг напротив друга на цветовом круге. Если смешать два таких цвета, получится нейтральный серый. Ну а если поставить два таких цвета рядом друг с другом, они будут создавать очень яркий контраст.

В качестве наглядного примера можно взять несколько пар, которые подходят под данное определение. Это жёлтый и фиолетовый, жёлто-оранжевый и сине-фиолетовый, оранжевый и синий, красно-оранжевый и сине-зелёный, красный и зелёный, красно-фиолетовый и жёлто-зелёный.

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

Ещё один немаловажный момент — каждая пара дополнительных цветов обладает другими характеристиками. Так, пара жёлтый и фиолетовый представляет собой не только контраст дополнительных цветов, но и сильный контраст светлого и тёмного. Красно-оранжевый и сине-зелёный — это не только пара дополнительных цветов, но одновременно и чрезвычайно сильный контраст холодного и тёплого. Именно поэтому важно грамотно подбирать пару таких цветов в соответствии с темой вашей картины, чтобы цвет усиливал смысл, а не давил его своей яркостью.

Проанализируем пример. За основу взята пара «красно-оранжевый и сине-зелёный» — пара, которая подчеркивает тему природы, связанной с феей. Обратите внимание, как зелёные крылья выделяются на фоне красно-оранжевых волос и красноватой кожи. Всё это помогает создать нужный образ и поддерживать его.

Симультанный контраст. Из книги Иттена: «Понятие ‘симультанный контраст’ обозначает явление, при котором наш глаз при восприятии какого-либо цвета тотчас же требует появления его дополнительного цвета, и если такового нет, то симультанно (то есть, одновременно) порождает его сам. Этот факт означает, что основной закон цветовой гармонии базируется на законе о дополнительных цветах. Симультанно порождённые цвета возникают лишь как ощущение и объективно не существуют. Они не могут быть сфотографированы. Симультанный контраст, как и последовательный контраст, по всей вероятности, возникает по одной и той же причине».

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

Этот эффект сложно объяснить, так как его невозможно зафиксировать, но давайте попробуем рассмотреть его на примере. Обратите внимание на кожу девушки, особенно на цвет кожи в теневой части лица, прямо у волос. Как вы думаете, какой это цвет? Если вы думаете, что это какой то оттенок зелёного, то вы ошибаетесь — это совершенно не так. Это средненасыщенный оттенок оранжевого. А вот те зеленоватые пряди на волосах на макушке? Это тёмный вариант жёлтого. Голова идет кругом, правда?

Это контраст, создаваемый окружением. Серый на фоне тёплой кожи будет казаться либо синеватым, либо зеленоватым, приглушённый оранжевый на фоне красного будет казаться зеленоватым и т.д. Импрессионисты как никто другой понимали ценность этого контраста, и активно использовали его в своих работах. Так что будьте аккуратны, наблюдательны, и пробуйте изучать воздействие цветов друг на друга через рисунок.

Контраст по насыщенности. Из книги Иттена: «Слова ‘контраст по насыщенности’ фиксируют противоположность между цветами насыщенными, чистыми и блеклыми, приглушенными. Спектральные цвета, полученные путём преломления белого света, являются цветами максимальной насыщенности или максимальной чистоты. Среди пигментных цветов мы также имеем цвета максимальной насыщенности. Едва только чистые цвета затемняются или осветляются, они теряют свою насыщенность».

То есть, контраст по насыщенности — это контраст цветов, отличающихся по степени чистоты. Например, можно использовать пару ярко-красного и средненасыщенного жёлтого, и это будет считаться контрастом по насыщенности. Либо можно приглушить всю гамму рисунка, держа его в рамках средненасыщенных цветов, и выделить какие-то особо интересные элементы ярким насыщенным цветом. Такой тип контраста особо хорош для выделения определённых точек интереса.

Как можно приглушить цвета? В традиционной живописи сделать это можно путём добавления чёрного, белого, серого и дополнительного цвета в основную смесь. В цифровой живописи (в частности, в Photoshop) есть много других полезный инструментов — Vibrance, Photo filter, Hue/saturation, Exposure и тому подобное.

Но спрашивается, зачем вообще приглушать цвета? Дело в том, что когда на картинке всё равнонасыщенно, бывает сложно увидеть иерархию объектов на картинке, и глаз зрителя разбегается. Взгляните на картинку нижу. На данном очень сдержанном в плане цвета скетче персонажа мы видим, как на фоне ненасыщенной в свете бороды выделяется цветная насыщенная тень этой же бороды. Или как на фоне средненасыщенной тени глаз выделяются желтоватые более насыщенные зрачки. Более насыщенный шрам на лице так же выделяется на фоне средненасыщенной кожи. Всё это помогает правильно расставить акценты на картинке и донести важные для описания персонажа детали.

Контраст по площади цветовых пятен. Из книги Иттена: «Контраст по площади цветовых пятен характеризует размерные соотношения между двумя или несколькими цветовыми пятнами. Его сущность — противопоставление между ‘много’ и ‘мало’, ‘большой’ и ‘маленький’».

Иттен так же говорит, что у каждого цвета есть свой «вес», и если измерять цвета по шкале от 1 (самый тёмный) до 10 (самый светлый), то мы получим вот такую таблицу: желтый — 9, оранжевый — 8, красный — 6, фиолетовый — 3, синий — 4, зеленый — 6. Чтобы правильно выстроить взаимоотношения цветов на картине, нужно грамотно распределять эти массы. Если мы берём фиолетовый и жёлтый, то видим, что фиолетовый — 3, а жёлтый — 9. Чтобы массы смотрелись гармонично и не перевешивали друг друга, нужно привести их к правильному соотношению — из 3/9 мы получим 1/3, а это значит, что на одну часть фиолетового должно приходиться три части жёлтого.

Сгармонизованные в своих размерах цветовые пятна производят впечатление спокойствия и устойчивости. Контраст по площади цветовых пятен в этом случае нейтрализуется благодаря гармонично составленным цветовым пятнам.

Если же нужно нарушить гармонию и создать резкий контраст, придётся использовать другие соотношения. Главное чтобы выбор соответствовал настроению и характеру картины.

Представленная система количественных соотношений имеет силу только при использовании цветов в их максимальной насыщенности. При её изменении меняются и соответствующие размеры цветовых пятен. Оба фактора — и насыщенность, и размер цветового пятна — самым тесным образом связаны между собой.

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

Цветовой контраст, явление одновременного контраста цветов

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

Однако художники воспроизводят и яркий солнечный свет и глубокие тени расщелин. Для этого используют взаимодействие цветов. Один и тот же цвет в различном окружении выглядит поразному: серое пятно на черном фоне кажется светлее такого же точно серого пятна, окруженного белым фоном.

Явление одновременного контраста цветов.

Лимон на фоне белой скатерти кажется темным, а на фоне темного предмета — очень светлым. В окружении более темных цветов все цвета светлеют, а в окружении более светлых — темнеют. Цвета изменяются под влиянием окружающих их или соприкасающихся с ними других цветов. Это явление носит название одновременного контраста цветов.
Когда под влиянием окружающих или соседних цветов изменяется светлота цвета, контраст называют светлотным. Чем больше цвет отличается по светлоте от его цветового окружения, тем в ольшей мере изменяется светлота цвета в сторону посветления или потемнения, независимо от того, ахроматический или хроматический этот цвет и окружающие его цвета.

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

В силу хроматического контраста цвета изменяются так, как если бы к ним оптически подмешивали другие цвета, почти дополнительные к окружающему цветному фону. Так, серый цвет в окружении зеленого фона становится сиренево-розовым. Красный цвет в том же окружении выглядит более насыщенным, а зеленый, но менее насыщенный, чем фон, — ахроматизируется, сереет. Цвета, возникающие в силу хроматического контраста на ахроматических полях, называют цветами одновременного контраста. Они отличаются от дополнительных, но это отличие не так уж велико, и для упрощения вопроса им можно пренебречь, тем более, что на практической работе художника оно не скажется.

Хроматический контраст проявляется наиболее сильно при приблизительном равенстве светлот взаимодействующих цветов. Чтобы уничтожить, нейтрализовать действие хроматического контраста, что­бы цвет в окружении другого цвета не изменялся, надо данному цвету придать оттенок окружающего его фона. Так, зеленовато-серое пятно, находясь на зеленом фоне, выглядит чисто серым и не приобретает розового оттенка, если угадана нужная степень его зеленоватости.

Синие и зеленые цвета контрастно влияют сильнее, чем красные и желтые. Членения зрительного поля служат границами возможного распространения контрастного окрашивания, вызванного соседствующими цветами. Так, если серое поле граничит с зеленым полем и на некотором расстоянии от границы полей по серому полю проведена черта, то розовое окрашивание на сером поле, вызванное контрастным влиянием соседнего зеленого цвета, распространится только до этой черты. Контур снижает действие контраста (чем четче контур цветового пятна, тем слабее влияние окружающего цветового фона на его цвет)

При длительном наблюдении цветов контраст удерживается некоторое время, после чего заметно идет на убыль. При очень продолжительном фиксирований цветов может возникнуть обратное явление: цвета начнут сближаться. Чем больше площадь фона по отношению к площади цветового пятна, тем сильнее контрастное влияние фона на цвет пятна. Каждая точка цветной поверхности, находящейся в окружении других цветов, подвергается влиянию не только со стороны смежных с нею, но и со стороны более удалённых мест окружающего фона. Поэтому однотонно гладкие цветные поверхности, находясь в цветовом окружении, в силу его контрастного влияния кажутся неравномерно цветными. Это — одно из обстоятельств, которое приводит к тому, что на любой цветной поверхности можно усмотреть множество оттенков, заполняющих каждый малый участок поверхности.

Наиболее сильный контраст наблюдается по границам соприкосновения цветовых пятен — по их краям. Если посмотреть на белый куб, одна сторона которого равномерно освещена, а другая — равномерно затемнена, то можно заметить, что освещенная сторона куба на грани с затененной выглядит более светлой, а затененная сторона у грани с освещенной выглядит более темной. Такая форма контраста, наблюдаемого по краям цветовых пятен, носит название краевого контраста. Касания цветов, то есть цветовые отношения по граням соприкосновения цветовых пятен, тесно связаны как раз с краевым контрастом

Цвет и контраст — 2 важнейших элемента доступного дизайна | by aic blog

На обложке: наша собственная доступная цветовая палитра, построенная на базе цветов материального дизайна Google

При проектировании цифровых государственных услуг, мы в DTA руководствуемся 13 критериями дизайна. Эти критерии направлены на то, чтобы создавать простые, понятные и быстрые государственные сервисы. Согласно критерию 9, самое главное — максимально облегчить жизнь пользователю, вне зависимости от обстоятельств.

Когда мы разрабатывали один из последних дэшбордов (по крупнейшим городам Австралии), мы многое узнали о роли цвета и контраста в создании доступного интерфейса. В этой статье я хочу поделиться опытом.

Значительная группа пользователей нашего интерфейса — возрастные австралийцы: каждый седьмой пользователь старше 65 лет . Этот сегмент австралийского населения постоянно растет: примерно через 50 лет доля пожилых пользователей вырастет вдвое.

Можно предположить, что примерно половина пожилых пользователей (и какая-то часть молодых) страдают от проблем со зрением. Многие люди старше 40 не могут читать мелкий шрифт без очков — это состояние называют «пресбиопией», и это лишь один из 7 известных видов цветовой слепоты.

Итак, как нам удалось учесть все виды цветовой слепоты при выборе цветов и контрастов для дэшборда Smart Cities?

Цвет

Ключевая часть нашей работы в области цвета направлена на то, чтобы людям было проще понимать информацию. Например, люди с разными видами цветовосприятия по-разному видят графики. В Австралии 9% населения страдает от той или иной формы цветовой слепоты, а у остальных пользователей качество зрения часто зависит от контраста и размера содержимого.

Таким график видят люди, не страдающие от нарушений цветовосприятия

А таким тот же график видят люди с разными формами цветовой слепоты

Для проектирования дэшборда по городам нам нужно было 6 разных цветов — по одному для каждой категории. Но цвет — вещь субъективная: у каждого цвета есть свой культурный и социальный подтекст. Поэтому старались не использовать:

• Красный — часто означает опасность или что-то негативное
• Ярко зеленый — обычно несет положительный смысл

С учетом этих ограничений нам было достаточно трудно собрать палитру из 6 цветов, но мы воспользовались палитрой материального дизайна от Google и в итоге остановились на довольно естественной сине-зеленой гамме. Мы также обращали внимание на то, как цвета сочетаются между собой: они должны быть достаточно контрастными, чтобы зрителю было проще их различать.

Затем мы провели тест: как люди с нарушенным цветовосприятием видят нашу палитру. Такой тест можно провести несколькими способами; мы пользовались Stark. Наша палитра с успехом прошла тест.

Паттерны повышают контраст

Чем больше цветов там нужно в дизайне, тем сложнее подобрать достаточно контрастную палитру. Одно из решений — использовать паттерны, которые усилят контраст между категориями.

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

Паттерн добавляет еще один слой визуальных различий — в дополнение к цвету. Это особенно пригодится при создании многоцветных схем и графиков.

Для создания этих схем и применения паттернов мы пользовались инструментом High Charts и их модулем доступности.

Контраст

Определиться с цветовой палитрой — это полдела, но нам также нужно было учесть и контраст.

Консорциум Всемирной паутины (W3C — World Wide Web Consortium) — это международная организация, которая разрабатывает стандарты доступного контента. Они создали руководство по доступности веб-контента (WCAG 2.0 AA), и оно легло в основу наших критериев, разработанных для правительства Австралии. Кроме того, они определили минимальный уровень контрастности текста в презентациях, на картинках, в заголовках, в интерфейсе, в логотипах.

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

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

3 палитры материального дизайна Google. Хороший выбор цветов, но мало светлых тонов: только 100 и 50.

Наша собственная палитра для дэшборда, собранная на основании цветов материального дизайна.

Мы расширили палитру и включили оттенки 20, 40, 60, 80 и 90. Кроме того, добавили дополнительный темный оттенок — 950. Он тоже нужен для создания дополнительного контраста, особенно при оформлении графиков с большим количеством пунктов в легенде.

Применяем цветовую систему: для каждой секции используем один основной цвет и несколько оттенков.

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

Работая над контрастом и цветами, мы опирались на 7 принципов универсального дизайна. Эти принципы помогают проектировать продукты, инструменты и средства коммуникации для всех групп пользователей. Особенное внимание мы уделяли следующим принципам:

• Принцип 1: учитывать интересы всех пользователей
• Принцип 2: обеспечить гибкость использования
• Принцип 3: обеспечить простое и интуитивное использование
• Принцип 4: упростить восприятие информации

Советы и инструменты, которые помогут вам начать:

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

В завершение хочется дать несколько советов по созданию доступного визуального дизайна:

Пусть дизайн будет смелым, наглядным, осмысленным

Визуальные элементы не просто радуют глаз. Они создают иерархию, ясность, смысл. Это, в свою очередь, подсказывает правильный порядок изучения страницы и помогает направить внимание пользователей на ключевые задачи, функции и информацию.

Подбирайте цвета осознанно

Выберите набор цветов, которые хорошо работают в паре с точки зрения контраста и доступности. Правильные цвета также придают нужный тон контенту и помогают эффективнее передать ваше сообщение.

Используйте белое пространство

Создайте смелый интерфейс, который вовлекает пользователя в процесс.

Используйте силу цвета

Цвет — это ключевой компонент дизайна. Он помогает сделать дизайн смелым, наглядным и осмысленным.

Учитывайте контекст

В каком контексте появится ваш дизайн? Что позволяет делать ваш сервис? В чем его цель? Когда, где и как его будут использовать?

Изучайте значения цветов

Каждый цвет вызывает определенные ассоциации. Вы должны знать, что это за ассоциации, и как они соотносятся с вашими целями.

Думайте о продукте в целом

Отдельные цвета и визуальные детали — это, конечно, хорошо, но как они работают в контексте целого продукта? Оцените, как пользователи воспринимают общий визуальный облик продукта.

Пользуйтесь доступными инструментами по подбору цветов:

• getstark.co — используйте Stark при работе в Sketch. Инструмент позволяет быстро оценивать цветовой контраст и смотреть дизайн в контексте разных нарушений цветовосприятия.
• colordrop.io — упрощает просмотр и поиск цветовых палитр.
• lolcolors — забавно представленные цветовые палитры.
• material.io — позволяет одновременно проверить контрастность разных цветовых палитр на разных экранах.
• coolors.co — большой выбор одноцветных палитр.

Если хотите узнать больше о доступном дизайне, читайте наш блог. Если у вас есть какие-то вопросы по дэшборду о городах, оставляйте комментарии или пишите на [email protected].

WebAIM: доступность контрастности и цвета

Вы здесь: Главная> Статьи> Доступность контрастности и цвета

Содержание статьи

1. Текущая страница: Страница 1: Общие сведения о требованиях к контрастности и цвету WCAG 2
   1. Введение
   2. Определение цветов
   3. WCAG 2 «Коэффициент контрастности»
   4. 1.4.3 Контрастность (минимум)
   5. 1.4.6 Контраст (улучшенный)
   6. 1.4.11 Нетекстовый контраст
   7. 1.4.1 Использование цвета
2. Страница 2: Оценка контраста и использования цвета
3. Страница 3: Оценка контраста с помощью Chrome DevTools

Введение

Использование контраста и цвета жизненно важно для доступности. Пользователи, включая пользователей с нарушениями зрения, должны иметь возможность воспринимать контент на странице. В Руководстве по доступности веб-контента (WCAG) 2 очень много мелкого шрифта и сложности, которые могут легко запутать создателей веб-контента и специалистов по оценке веб-доступности.В этой статье собраны термины и принципы, необходимые для понимания требований WCAG 2 к контрасту и цвету.

Определение цветов

Цвета можно определить несколькими способами. Например, этот оттенок синего обычно можно определить тремя разными способами в стилях веб-страниц:

• rgb (97, 97, 255) : количество красного, зеленого и синего, образующих цвет, каждое представлено числом от 0 до 255.
• # 6161FF : Это «шестнадцатеричный» формат, в котором значения красного / зеленого / синего цветов представлены как комбинация из шести букв или цифр.Обычно это шестнадцатеричный формат. Это очень распространенный формат веб-страниц.
• hsl (240, 100%, 69%) : оттенок, насыщенность и яркость более точно соответствуют тому, как люди воспринимают цвета. Изменение «яркости» цвета изменит его коэффициент контрастности на другой цвет.

Альфа, то есть непрозрачность или прозрачность цвета, также влияет на контраст. Альфа представлена ​​числом от 0 (полностью прозрачно) до 1 (полностью непрозрачно).Уменьшение альфа-канала для элемента приведет к уменьшению его контрастности, поскольку вы позволяете основному цвету просачиваться.

WCAG 2 «Коэффициент контрастности»

В WCAG 2 контраст — это мера разницы в воспринимаемой «яркости» или яркости между двумя цветами (фраза «цветовой контраст» никогда не используется). Эта разница в яркости выражается в соотношении от 1: 1 (например, белый на белом) до 21: 1 (например, черный на белом). Для справки, на белом фоне:

• Чистый красный (# FF0000) имеет соотношение 4: 1.Я красный текст.
• Чистый зеленый (# 00FF00) имеет очень низкое соотношение 1,4: 1. Я зеленый текст.
• Чистый синий (# 000FF) имеет коэффициент контрастности 8,6: 1. Я синий текст.

Важно

Если поменять местами цвета текста и фона, коэффициент контрастности останется прежним.

Три критерия успеха в контрасте адресов WCAG 2:

Еще один критерий успеха, 1.4.1 Использование цвета, ссылается на коэффициент контрастности как на часть требования для ссылок, которые различаются только по цвету.

Мы подробно рассмотрим эти четыре критерия успеха.

1.4.3 Контрастность (минимум)

Это требование уровня AA гласит:

Визуальное представление текста и изображений текста имеет коэффициент контрастности не менее 4,5: 1, за исключением следующего:

• Large Text: Крупный текст и изображения крупного текста имеют коэффициент контрастности не менее 3: 1;
• Случайное: Текст или изображения текста, которые являются частью неактивного компонента пользовательского интерфейса, являются чистым украшением, никому не видны или являются частью изображения, содержащего другой значимый визуальный контент, не требуют контрастности .
• Логотипы: Текст, являющийся частью логотипа или торговой марки, не требует контрастности.

Вот несколько примеров текста с контрастностью почти точно 4,5: 1.

• Серый (# 767676) на белом
• Пурпурный (# CC21CC) белый
• Синий (# 000063) на сером (# 808080)
• Красный (# E60000) на желтом (# FFFF47)

Для многих из нас некоторые из этих комбинаций не очень удобочитаемы.Вот почему 4,5: 1 — это минимум , требуемый WCAG ..

Важно

Вы не можете округлить коэффициент контрастности до 4,5: 1. Например, # 777777 — часто используемый оттенок серого с контрастностью 4,47: 1 — не соответствует этому требованию.

Изображения текста

Эти требования к контрастности также применяются к тексту в графике, называемому «изображениями текста» в WCAG 2.

Пример

Белый текст на изображении ниже недостаточно контрастен.

Контур и нимб

Текстовые эффекты, например контуры, могут влиять на воспринимаемый контраст. WCAG 2 заявляет, что цвет текстового контура или границы может использоваться в качестве цвета текста или переднего плана при измерении контраста.

Текстовое свечение / ореол вокруг букв можно использовать в качестве цвета фона.

Исключения

Есть три исключения из требования контрастности 4,5: 1: крупный текст, случайный текст и логотипы.

Крупный текст

Большой текст легче читать, поэтому требования к контрастности снижены до 3: 1. WCAG определяет большой текст как текст размером 18 пунктов и больше, или 14 пунктов и больше , если — полужирный.

Например:

• Серый (# 949494) Текст 18 пунктов на белом
• Пурпурный (# C86ff1) 14 пунктов + полужирный текст на белом

Примечание

• На веб-страницах для размера текста гораздо чаще используются пиксели, чем точки.18 точек соответствуют 24 пикселям, а 14 точек — приблизительно 18,67 пикселей.
• В CSS жирный текст обычно имеет font-weight: bold или font-weight: 700 или больше.

К изображениям текста предъявляются те же требования, но может быть сложно или невозможно измерить размер текста или толщину шрифта на изображении.

Случайное происшествие

WCAG 2.0 определяет четыре типа «случайного» текста, которые не требуются для соответствия требованиям контрастности.

• Неактивен: Неактивный элемент, например отключенная кнопка Отправить ( Представлять на рассмотрение ), визуально идентифицируется по низкоконтрастному состоянию.
• Чистое украшение: Декоративный текст, не предназначенный для чтения. Примером этого может быть изображение книжной полки на домашней странице библиотеки. Названия книг не предназначены для чтения пользователем.
• Никому не виден: Текст, который должен быть скрыт, например, невидимая ссылка для пропуска, не должен соответствовать каким-либо требованиям контрастности, пока он не станет видимым.
• Часть изображения, которая содержит другой важный визуальный контент: Текст, который не является важной частью информации на изображении, например именная бирка на рубашке человека на фотографии вечеринки, не должен соответствовать любые требования к контрастности.

Примечание

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

Логотипы

Текст, являющийся частью логотипа или названия бренда, не требует контрастности. Если мы вернемся к примеру изображения текста, использованного ранее, логотип amazon music будет освобожден.

Не упоминается

Пара важных соображений по контрасту не упоминается в 1.4.3.

Градиенты, фоновые изображения и прозрачные пленки

Текст поверх градиентов, полупрозрачные цвета и фоновые изображения по-прежнему должны соответствовать требованиям контрастности, но WCAG не дает никаких указаний по измерению их контрастности.Обычно мы рекомендуем тестировать область с наименьшим контрастом.

Изменение цвета при наведении, фокусировке и т. Д.

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

1.4.6 Контрастность (улучшенная)

Единственное различие между этим критерием успеха уровня AAA и уровнем AA 1.4.3 состоит в том, что требования к контрастности более жесткие. Требуется контраст 7: 1 для обычного текста и 4,5: 1 для большого текста. Хотя часто рекомендуется более высокая контрастность, соответствие уровню AA является требованием в рамках общих законов и стандартов, поэтому в этой статье мы сосредоточимся на требованиях 1.4.3.

1.4.11 Нетекстовый контраст

WCAG 2.1, опубликованная в июне 2018 года, выводит требования к контрастности за рамки текста. 1.4.11 Нетекстовая контрастность (уровень AA):

Визуальное представление следующего имеет коэффициент контрастности не менее 3: 1 по отношению к соседнему цвету (-ам):

• Компоненты пользовательского интерфейса: Визуальная информация, необходимая для идентификации компонентов и состояний пользовательского интерфейса, за исключением неактивных компонентов или тех случаев, когда внешний вид компонента определяется пользовательским агентом и не изменяется автором;
• Графические объекты: Части графики, необходимые для понимания содержимого, за исключением случаев, когда конкретное представление графики важно для передаваемой информации.

Есть одно заметное различие в том, как применяются требования к контрастности. Требования к контрастности в WCAG 2.0 — между текстом и фоном, но 1.4.11 требует контрастности не менее 3: 1 против смежных цветов «, что означает, что вам может потребоваться измерить контраст более чем в одном месте. Нетекст Элемент может иметь различную контрастность на одной стороне, чем на другой (например, клин на круговой диаграмме), или он может содержать компоненты разного цвета, которые требуют контраста 3: 1 друг с другом.

Пример

Значок в форме треугольника с восклицательным знаком используется для предупреждения пользователя о чем-то важном.

Этот рисунок состоит из двух важных фигур — восклицательного знака и треугольника (обычно зарезервирован для подобных предупреждений). Это означает, что необходимо учитывать 2 коэффициента контрастности:

1. Коэффициент контрастности между белым восклицательным знаком и красным треугольником, который превышает 3: 1
2. Коэффициент контрастности между красным треугольником и серым фоном, менее 3: 1.

Значок не соответствует 1.4.11.

Компоненты пользовательского интерфейса

Есть два типа нетекстовых элементов, которые, по утверждению 1.4.11, должны иметь контраст 3: 1. Первыми являются «Компоненты пользовательского интерфейса», которые представляют собой элементы управления для различных функций. Например, в группе связанных значков социальных сетей каждый значок является отдельным компонентом пользовательского интерфейса.

Штаты

Каждое состояние компонента также должно иметь контраст 3: 1.Состояния — это временные изменения в компоненте, обычно из-за взаимодействия с пользователем, например, при наведении курсора мыши или табуляции с помощью клавиатуры.

Пример

Когда пользователь наводит курсор на настраиваемый флажок, он становится ярко-синим (# 00B0F0).

Этот флажок имеет контраст 2,5: 1 при наведении курсора, поэтому он не работает.

За исключением случаев, когда «определено пользовательским агентом»

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

Пример

В Chrome граница по умолчанию для текстового поля имеет контраст 2,4: 1:

Этот контур значительно ниже порогового значения 3: 1, но, поскольку этот цвет был «определен» браузером и не был изменен автором, он исключен. Из-за низкой контрастности по умолчанию мы рекомендуем использовать CSS для увеличения контрастности текстовых полей и других полей ввода форм.

Самый распространенный пример «состояния» с низким контрастом — это контур, который появляется, когда элемент находится в фокусе клавиатуры.Например, ярко-синий контур будет довольно заметным на белом фоне, но менее заметным на некоторых цветах и ​​может быть почти невидимым на ярко-синем фоне.

Этот ярко-синий контур был обычным явлением в течение нескольких лет, особенно в Chrome. Теперь контур клавиатуры в Chrome и Edge имеет как темную, так и белую линию, что обеспечивает хороший контраст на любом фоне. Firefox и IE используют черную пунктирную линию, которая будет иметь низкий контраст на темном фоне.Вместо того, чтобы беспокоиться об изменении поддержки браузера, используйте свойства CSS: focus и outline, чтобы настроить индикатор фокуса, который всегда имеет контраст не менее 3: 1, а также соответствует дизайну и эстетике вашего сайта. При разработке или тестировании этих контуров обращайте пристальное внимание на такие области, как верхние и нижние колонтитулы, которые часто имеют разные цвета фона.

Графические объекты

Второй тип нетекстовых элементов, подпадающих под этот критерий успеха, — это «графические объекты».В этом определении есть пара ключевых терминов.

«Требуется для понимания содержания»

Для того, чтобы что-то было определено как графический объект, требующий контрастности 3: 1, он должен быть «необходим для понимания содержимого».

Пример

Значок Twitter, представляющий собой ссылку, требует контраста 3: 1. Но если ссылка также включает слово «Twitter» (с коэффициентом контрастности не менее 4,5: 1), то значок больше не требуется для понимания содержимого, поэтому он не требует контрастности.

«… кроме случаев, когда важна конкретная презентация»

Некоторые типы изображений, возможно, необходимо представить с более низким контрастом, чтобы они не теряли смысла или цели. Тепловая карта должна использовать низкоконтрастные цвета, чтобы нижележащая страница оставалась видимой.

Пример

Реальные изображения, такие как фотографии и скриншоты, также попадают в эту категорию. Так что сделайте логотипы.

1.4.1 Использование цвета

WCAG 2 не запрещает использование какого-либо определенного цвета или цветовой комбинации, например красного и зеленого. Предыдущие критерии успеха требовали, чтобы текстовые и нетекстовые элементы имели достаточный контраст. Критерий успеха 1.4.1, требование уровня A, запрещает использовать только цвет для представления значимого контента или инструкций. Читается:

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

Пример

В этой таблице школьных заданий единственным признаком того, что задание пропущено или опаздывает, является цвет фона. Это недоступно для слепых и может сбивать с толку или быть недоступным для тех, кто дальтонизм или переопределяет цвета страницы. Ошибка 1.4.3.

Один из способов решить эту проблему — добавить второй столбец для статуса назначения (отсутствует, выполнено или задерживается). Вы по-прежнему можете использовать цвет для усиления информации, если только цвет не является единственным способом представления этого статуса.Фактически, это делает информацию более доступной для пользователей, которые могут видеть разницу в цвете.

Формы инструкций и ошибок

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

Пример

Например, обязательное поле, оставленное пустым, может быть выделено красной рамкой.

Одной красной рамки недостаточно. В поле формы также потребуется значок

или встроенное сообщение об ошибке:

Цветная идентификация ссылок

Правила контраста и цвета WCAG 2 перекрываются в одном месте: когда цвет используется как единственный способ идентифицировать ссылку.Это не относится к каждой ссылке на странице. Например, ссылки в заголовке веб-страницы считаются ссылками в зависимости от их положения на странице, использования пробелов и часто с использованием отдельного шрифта. Это требование относится к местам, где основной текст и текст ссылки отображаются вместе и , где для идентификации ссылок используется только цвет (что означает, что подчеркивание было удалено). Для оптимальной доступности и удобства использования подчеркивайте ссылки. В противном случае должны быть выполнены два условия:

1. Контраст 3: 1 между основным текстом и текстом ссылки.
2. «Визуальная подсказка» (не только изменение цвета), которая появляется при наведении курсора мыши и фокусе клавиатуры. Самый распространенный способ встретить это — подчеркнуть ссылку при наведении курсора и фокусе.

Эти требования дополняют требование 1.4.3 контрастности текста 4.5: 1. Одновременное выполнение всех трех требований может оказаться трудным.

Пример

Форма заканчивается строкой текста, которая гласит: «Отправляя эту форму, вы соглашаетесь с нашими Условиями использования.«Темно-серый (# 2E2E2E) основной текст имеет контраст 13,6: 1 на белом фоне. Синяя (# 0079AD) ссылка« Условия использования »имеет контраст 4,8: ​​1, поэтому текст соответствует требованиям контрастности.

… но контраст между основным текстом и текстом ссылки составляет всего 2,8: 1. Немного более светлый оттенок синего (# 0081B8) обеспечит чуть более 3: 1 контраст между ссылкой и основным текстом:

… но теперь он имеет контраст с фоном менее 4,5: 1! С этими цветами текста и фона невозможно использовать неподчеркнутые ссылки, а также соответствовать рекомендациям WCAG.

Это становится все труднее, если ссылки меняют цвет при наведении курсора или фокусе, каждый из цветов в этих состояниях также должен иметь разницу в соотношении контрастности по крайней мере 4,5: 1 с фоном. WCAG 2.0 и цвета ссылок в блоге WebAIM более подробно исследуют требования WCAG к цветам ссылок.

Ради эстетики и доступности

Вчера было солнечно и 85 градусов тепла. Сегодня холодно, ветрено и дождливо 54 градуса.

Вот контраст.

У дизайнеров есть возможность сохранять однородность; шрифты, элементы, макеты и размеры могут оставаться единообразными, и миру не будет конца.

Но дизайн работает не так — мы пытаемся сделать вещи по-другому, отделиться друг от друга и сказать: «Посмотри на меня!» Итак, мы узнаем о парных шрифтах, используем несколько элементов, переделываем макеты, изменяем размер и выравниваем контент, чтобы сделать вещи более интересными и доступными для зрителей.

Цветовой контраст — еще один элемент, с которым дизайнеры играют не только для эстетического эффекта, но и для общей доступности.

Слово «контраст» означает просто «различие».

Что такое цветовой контраст?

Контрастные цвета — это цвета, которые отличаются друг от друга. Уровни контрастности варьируются от высокого до низкого, в зависимости от их положения на цветовом круге. Например, цвета, которые находятся прямо напротив друг друга на цветовом круге, имеют максимально возможный контраст, а цвета, расположенные рядом друг с другом, имеют низкий контраст.

Например, красно-оранжевый и оранжевый — это цвета с низкой контрастностью; красный и зеленый — это цвета с высокой контрастностью.

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

Цветовой контраст ради эстетики

По меньшей мере, выбор высококонтрастных цветов для дизайна — смелый шаг. Ниже приведены примеры высококонтрастных цветов. Эти пары находятся прямо напротив друг друга на цветовом круге.

На них определенно есть на что смотреть.Но иногда смелость окупается. Разве эти цвета не кажутся вам немного знакомыми?

Источник: Джерард Маланга, Энди Уорхол

Искусство и дизайн с использованием высококонтрастных цветов действительно «популярны». Рассмотрение подобных дизайнов создает уникальный опыт, но имеет тенденцию становиться немного болезненным.

Из-за этого недостатка высокий цветовой контраст не всегда является лучшей идеей для использования в дизайне. В то же время низкий цветовой контраст тоже может быть плохой идеей; использование этих схем затрудняет различение элементов.

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

Использование цветового контраста в физических товарах — это поиск баланса между максимумами и минимумами. В базовом дизайне нет формулы хорошего контраста; это требует хорошего зрения и большой практики.

Цветовой контраст для доступности

Цветовой контраст — это больше, чем просто эстетика; это также необходимость, особенно в Интернете.Здесь важнее всего помнить, что если вы создаете веб-сайт, составляете презентацию или разрабатываете инфографику, крайне важно, чтобы предоставленная информация была доступна для всех участников.

Один из лучших способов сделать это — обеспечить высокую контрастность цветов, которые вы используете в своем дизайне — графических или веб-сайтов.

Контрастность в сети

WCAG (Руководство по доступности веб-контента) 2.0 содержит конкретные рекомендации по обеспечению цветового контраста между передним планом (текстом, изображениями и т. Д.).) и фон подходит с помощью соотношения. Это соотношение также зависит от размера и веса используемого текста.

WCAG 2.0 утверждает, что контраст — это мера разницы в воспринимаемой яркости между двумя цветами. Эта разница обозначается соотношением от 1: 1 (минимально возможный контраст; белый текст на белом фоне) до 21: 1 (максимально возможный контраст; черный текст на белом фоне или наоборот).

Указанный минимум контрастности WCAG составляет 4.5: 1 , за исключением крупного текста, логотипов или намеренно низкой контрастности в Интернете. Шестнадцатеричные значения используемых цветов необходимы для измерения контраста.

Это все немного сбивает с толку. Давайте применим это на практике.

Хотя часть приведенного выше текста может быть понятна для вас, это может быть трудно или невозможно прочитать другим людям с нарушениями зрения. Даже последний вариант с соотношением сторон 4,57: 1 смотреть сложно. Помните, что 4,5: 1 — это минимум .

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

Теперь вы меня читаете?

Нет! Посмотрите на это, прекрасный пример того, что заголовок этого вывода 1. некрасивый и 2. невозможный для чтения.

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

Контрастность отображается по-разному, в зависимости от того, печатный или цифровой ваш проект.Узнайте больше о разнице между RGB и CMYK.

Понимание критерия успеха 1.4.3 | Понимание WCAG 2.0

Цель этого критерия успеха

Цель этого критерия успеха — обеспечить достаточный контраст между текстом и его фоном, чтобы его могли прочитать люди с умеренно слабым зрением (которые не используют вспомогательные технологии для повышения контрастности). Для людей без недостатков цвета оттенок и насыщенность оказывают минимальное влияние на разборчивость или совсем не влияют на читаемость (Knoblauch et al., 1991). Недостаток цвета может несколько повлиять на контраст яркости. Поэтому в рекомендации контраст рассчитывается таким образом, чтобы цвет не был ключевым фактором, поэтому люди с дефицитом цветового зрения также будут иметь адекватный контраст между текстом и фоном.

Декоративный текст, не содержащий информации, исключен. Например, если для создания фона используются случайные слова, и слова можно переставлять или заменять без изменения значения, тогда это будет декоративным и не обязательно будет соответствовать этому критерию.

Текст большего размера с более широкими штрихами символов легче читать при более низком контрасте. Таким образом, требования к контрастности для более крупного текста ниже. Это позволяет авторам использовать более широкий диапазон выбора цвета для большого текста, что полезно для дизайна страниц, особенно заголовков. Текст размером 18 пунктов или полужирным шрифтом 14 пунктов считается достаточно большим, чтобы требовать более низкого коэффициента контрастности. (См. Руководство по крупной печати Американской типографии для слепых и Рекомендации Библиотеки Конгресса по крупным шрифтам в разделе «Ресурсы»).«18 пунктов» и «полужирный» могут иметь разные значения в разных шрифтах, но, за исключением очень тонких или необычных шрифтов, их должно быть достаточно. Поскольку существует так много разных шрифтов, используются общие меры, а также включено примечание о модных или тонких шрифтах.

Примечание 1: При оценке этого критерия успеха размер шрифта в пунктах должен быть получен от пользовательского агента или рассчитан на основе метрик шрифта, как это делают пользовательские агенты. Размеры пунктов основаны на размере CSS pt, как определено в разделе «Значения CSS3».Соотношение между размерами в точках и пикселями CSS составляет 1pt = 1,333px, поэтому 14pt и 18pt эквивалентны приблизительно 18,5px и 24px.

Примечание 2: Поскольку разные приложения для редактирования изображений по умолчанию используют разную плотность пикселей (например, 72 PPI или 96 PPI), указание размеров шрифтов изнутри приложения для редактирования изображений может быть ненадежным, когда речь идет о представлении текста определенного размера. Создавая изображения крупномасштабного текста, авторы должны убедиться, что текст в итоговом изображении примерно равен 1.2 и 1,5 см или до 120% или 150% размера основного текста по умолчанию. Например, для изображения с разрешением 72 PPI автору потребуется использовать размер шрифта примерно 19 и 24, чтобы успешно представить пользователю изображения крупномасштабного текста.

Вышеупомянутые требования к контрастности для текста также применяются к изображениям текста (текст, который был преобразован в пиксели и затем сохранен в формате изображения), как указано в Критерии успеха 1.4.3.

Это требование применяется к ситуациям, в которых изображения текста предназначены для понимания как текста.Случайный текст, например на фотографиях, где есть дорожный знак, не включается. И текст не должен быть по какой-то причине невидимым для всех зрителей. Стилизованный текст, например, в корпоративных логотипах, следует рассматривать с точки зрения его функции на странице, которая может или не может гарантировать включение содержимого в альтернативный текст. Корпоративные визуальные принципы, помимо логотипа и логотипа, не являются исключением.

В этом положении есть исключение, которое гласит: «которые являются частью изображения, которое содержит другой значимый визуальный контент».Это исключение предназначено для отделения изображений, содержащих текст, от изображений с текстом, предназначенных для замены текста с целью придания особого вида.

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

Критерий успешной минимальной контрастности (1.4.3) применяется к тексту на странице, включая текст-заполнитель и текст, который отображается, когда указатель наведен на объект или когда объект находится в фокусе клавиатуры. Если на странице используется какой-либо из них, текст должен обеспечивать достаточный контраст.

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

См. Также Понимание критерия успеха 1.4.6 Контраст (улучшенный) 901 12.

Обоснование выбранного соотношения

Текст большего размера с более широкими штрихами символов легче читать при более низком контрасте. Таким образом, требования к контрастности для более крупного текста ниже. Это позволяет авторам использовать более широкий диапазон выбора цвета для большого текста, что полезно для дизайна страниц, особенно заголовков. Текст размером 18 пунктов или полужирным шрифтом 14 пунктов считается достаточно большим, чтобы требовать более низкого коэффициента контрастности.(См. Руководство по крупной печати Американской типографии для слепых и Рекомендации Библиотеки Конгресса по крупным шрифтам в разделе «Ресурсы»). «18 пунктов» и «полужирный» могут иметь разные значения в разных шрифтах, но, за исключением очень тонких или необычных шрифтов, их должно быть достаточно. Поскольку существует так много разных шрифтов, используются общие меры, а также включено примечание о модных или тонких шрифтах.

Примечание 1: При оценке этого критерия успеха размер шрифта в пунктах должен быть получен от пользовательского агента или рассчитан на основе метрик шрифта, как это делают пользовательские агенты.Размеры пунктов основаны на размере CSS pt, как определено в разделе «Значения CSS3». Соотношение между размерами в точках и пикселями CSS составляет 1pt = 1,333px, поэтому 14pt и 18pt эквивалентны приблизительно 18,5px и 24px.

Примечание 2: Поскольку разные приложения для редактирования изображений по умолчанию используют разную плотность пикселей (например, 72 PPI или 96 PPI), указание размеров шрифтов изнутри приложения для редактирования изображений может быть ненадежным, когда речь идет о представлении текста определенного размера. Создавая изображения крупномасштабного текста, авторы должны убедиться, что текст в итоговом изображении примерно равен 1.2 и 1,5 см или до 120% или 150% от размера по умолчанию для основного текста, отображаемого браузером.

Оттенки по-разному воспринимаются пользователями с недостатками цветового зрения (как врожденными, так и приобретенными), что приводит к другим цветам и относительным контрастам яркости, чем у пользователей с нормальным зрением. Из-за этого эффективный контраст и удобочитаемость для этой группы населения различаются. Однако недостатки цвета настолько разнообразны, что назначение эффективных цветовых пар общего назначения (для контраста) на основе количественных данных невозможно.Требование хорошего яркостного контраста компенсирует это, требуя контраста, который не зависит от восприятия цвета. К счастью, большая часть яркости приходится на средне- и длинноволновые рецепторы, которые в значительной степени перекрываются по своим спектральным характеристикам. В результате эффективный контраст яркости обычно может быть вычислен без учета конкретного цветового дефицита, за исключением использования преимущественно длинноволновых цветов против более темных цветов (обычно кажущихся черными) для тех, у кого протанопия.(По этой причине мы предлагаем совет, как избегать красного на черном). Для получения дополнительной информации см. [ARDITI-KNOBLAUCH]. [ARDITI-KNOBLAUCH-1996] [АРДИТИ].

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

Коэффициент контрастности 3: 1 — это минимальный уровень, рекомендованный [ISO-9241-3] и [ANSI-HFES-100-1988] для стандартного текста и изображения. Соотношение 4,5: 1 используется в этом положении для учета потери контрастности, которая возникает в результате умеренно низкой остроты зрения, врожденного или приобретенного дефицита цвета или потери контрастной чувствительности, которая обычно сопровождает старение.

Обоснование основано на а) принятии соотношения контрастности 3: 1 для минимально допустимого контраста для нормальных наблюдателей в стандарте ANSI и б) эмпирическом выводе о том, что в популяции острота зрения 20/40 связана с потеря контрастной чувствительности примерно 1,5 [ARDITI-FAYE]. Таким образом, пользователю с 20/40 потребуется коэффициент контрастности 3 * 1,5 = 4,5: 1. Следуя аналогичным эмпирическим данным и той же логике, пользователю с остротой зрения 20/80 потребуется контраст около 7: 1.

Коэффициент контрастности 4,5: 1 был выбран для уровня AA, поскольку он компенсирует потерю контрастной чувствительности, обычно испытываемую пользователями с потерей зрения, эквивалентной зрению примерно 20/40. (20/40 составляет примерно 4,5: 1.) 20/40 обычно считается типичной остротой зрения пожилых людей в возрасте примерно 80 лет. [GITTINGS-FOZARD]

Коэффициент контрастности 7: 1 был выбран для уровня AAA, потому что он компенсировал потерю контрастной чувствительности, обычно испытываемую пользователями с потерей зрения, эквивалентной зрению примерно 20/80.Люди с более высокой степенью потери зрения обычно используют вспомогательные технологии для доступа к своему контенту (а вспомогательные технологии обычно имеют встроенную функцию усиления контрастности и увеличения). Таким образом, уровень 7: 1 обычно обеспечивает компенсацию потери контрастной чувствительности, которую испытывают пользователи со слабым зрением, которые не используют вспомогательные технологии, а также обеспечивает повышение контрастности при дефиците цвета.

Примечания к формуле

Преобразование нелинейных значений RGB в линейные основано на IEC / 4WD 61966-2-1 [IEC-4WD] и на «Стандартном цветовом пространстве по умолчанию для Интернета — sRGB» [sRGB].

Формула (L1 / L2) для контраста основана на стандартах [ISO-9241-3] и [ANSI-HFES-100-1988].

Стандарт ANSI / HFS 100-1988 требует, чтобы при вычислении L1 и L2 учитывался вклад окружающего света. Используемое значение 0,05 основано на типичной засветке из [IEC-4WD] и статье [sRGB] М. Стокса и др.

В этом Критерии успеха и его определениях используются термины «коэффициент контрастности» и «относительная яркость», а не «яркость», чтобы отразить тот факт, что веб-контент сам по себе не излучает свет.Коэффициент контрастности дает меру относительной яркости при отображении. (Поскольку это соотношение, оно безразмерно.)

Конкретные преимущества критерия успеха 1.4.3:

• Людям с ослабленным зрением часто трудно читать текст, не контрастирующий с его фоном. Это может усугубиться, если у человека нарушение цветового зрения, которое еще больше снижает контраст. Обеспечение минимального коэффициента контрастности яркости между текстом и его фоном может сделать текст более читабельным, даже если человек не видит весь диапазон цветов.Это также работает для тех редких людей, которые не видят цвета.

Цветовой контраст — доступность | MDN

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

При разработке читаемых интерфейсов для различных возможностей зрения руководство WCAG рекомендует следующие коэффициенты контрастности:

Эти соотношения не применяются к «случайному» тексту, такому как неактивные элементы управления, логотипы или чисто декоративный текст.

Дополнительные сведения см. В разделе «Решение» ниже.

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

Хорошо иметь крутой дизайн на вашем веб-сайте, но дизайн бесполезен, если ваши пользователи не могут прочитать ваш контент.

Давайте посмотрим на простой код HTML и CSS:

  
 Хорошая контрастность 
 Плохая контрастность 
  

  div {
  
}

.хорошо {
  цвет фона: # fae6fa;
}

.плохой {
  цвет фона: # 400064;
}  

Оба фрагмента текста имеют черный цвет по умолчанию. «Хорошо»