Контрастность цветов: суть понятия и виды контрастов. Колористика на Haircolor.org.ua

Относительная яркость и контрастность цветов

УчебаИнформатика

Вычисляет относительную яркость и контрастность двух цветов, заданных в шестнадцатеричном формате.

Следующий калькулятор вычисляет относительную яркость цвета. 100% яркости у белого цвета, 0% у черного — остальные имеют относительную яркость между этими двумя границами.

Относительная яркость цвета

Цвет в 16-ричном формате

Точность вычисления

Знаков после запятой: 2

Относительная яркость, %

 

Вычисление относительной яркости

Каждая компонента цвета в шестнадцатеричном формате это целое число C₈, находящееся в диапазоне от 0 до 255 ( C₈= {R₈ — красный, G₈ — зеленый, B₈ — синий}).
Переведем значения компоненты цвета из целых в вещественные значения в диапазоне 0..1:
C_srgb = C₈/255, где C₈ = { R₈, G₈, B₈ }

Найдем для каждой компоненты цвета линейное значение C = { R,G,B }:
C = ((C_srgb+0. 055)/1.055)^2.4 , если C_srgb > 0.03928
или
C = C_srgb/12.92, если C_srgb <= 0.03928

Используя линейное значение компоненты цвета C={R, G, B} получаем относительную яркость цвета по формуле:
L = 0.2126R + 0.7152G + 0.0722B¹

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

Контрастность

Зная относительную яркость цвета легко получить коэффициент контрастности двух, который отражает восприятие человеком двуцветных изображений: (L1 + 0.05) / (L2 + 0.05), где L1 и L2 — значения относительной яркости цвета фона и символа (L1>L2).¹
Подбирая цвет символов и фона, следует иметь в виду, что коэффициент контрастности этих двух цветов для них должен быть более 7, чтобы текст хорошо читался людьми с плохим зрением. Для больших символов и логотипов допускается коэффициент >4. 5.

Коэффициент контрастности

Цвет 1

Цвет в 16-ричном формате

Цвет 2

Цвет в 16-ричном формате

Точность вычисления

Знаков после запятой: 2

Контрастность

 

Цвет 1

 

Цвет 2

 

Рисунок кнопки

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

---

1. G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text, W3C ↩ ↩

Ссылка скопирована в буфер обмена

Похожие калькуляторы

• • Преобразование цвета в RGB в строку для web
• • Комплементарный (дополнительный) цвет
• • Генератор палитры
• • Инвертирование цветов изображения
• • Коэффициент Танимото
• • Раздел: Информатика ( 59 калькуляторов )

 IT дизайн доступность Информатика Контрастность Коэффициент удобство использования цвет

 PLANETCALC, Относительная яркость и контрастность цветов

Anton2020-11-03 14:19:35

Контрастная и цветовая доступность при проектировании интерфейсов — Ensi by Greensight на vc.

ru

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

2888 просмотров

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

Контрастная доступность

Вспомним, что такое контрастность. Если говорить просто, то это отношение яркости элемента к яркости фона. Контрастность измеряется в диапазоне от 1:1 (минимальная контрастность, белый текст на белом фоне) до 21:1 (максимальная контрастность, черный текст на белом фоне).

Требования к контрастности описаны в гайдлайнах WCAG, разработанных консорциумом Всемирной паутины W3C. В них описаны уровни поддержки контрастности: AAA и AA для небольших шрифтов (меньше 14 pt для жирных и 18 pt для обычных) и AAA Large и AA Large для заголовков (больше 14 pt для жирных и 18 pt для обычных).

Значения контрастности:

• AAA — 7:1
• AAA Large — 4,5:1
  
• AA — 4,5:1
  
• AA Large — 3:1
  

Считается, что поддержка AAA-стандарта нужна для людей с умеренно сниженным зрением, а АА-стандарта — для людей со зрением чуть хуже среднего.

Где можно ошибиться

Неконтрастные цвета у Озона

Неконтрастные цвета у Вайлдберрис

Цветовая доступность

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

Женщины страдают от дальтонизма гораздо реже — всего 0,5%. Нас интересуют дейтеранопия и протанопия — это когда зеленый и красный цвета для человека выглядит практически одинаковыми: они желто-коричневые и отличаются только яркостью. Эти формы дальтонизма есть у 1% всех мужчин в мире.

Рассмотрим на конкретном примере. Предположим, что у одного известного спортивного интернет-магазина 15 000 000 уникальных посетителей в месяц. Из них 55% — мужчины, то есть 8 250 000 человек. По статистике, не различают красный и зеленый цвет 1% мужчин, это 82 500 клиентов интернет-магазина в месяц — население небольшого города!

Где можно ошибиться

Спортмарафон не подписывает цвета в фильтре и на странице товара

Пятерочка использует опасное красно-зеленое сочетание

Правила соблюдения контрастной и цветовой доступности

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

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

3. Соблюдайте требование к контрастности минимум 4,5:1.

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

Как мы следим за контрастной и цветовой доступностью

Плагины при работе в Фигме

• А11y Color Contrast Checker — проверяет контрастность всех текстов на фрейме

• Contrast — позволяет проверить контрастность

• Color Blind — создает копии фреймов с наложенными эффектами дальтонизма

Аксессибилити-тесты при разработке

• Storybook A11y Addon — проверка компонентов в Storybook

• aXe Chrome Extension — браузерное расширение для финальной проверки страниц

Полезные ссылки

• Colorblind Web Page Filter — применяет к странице по ссылке эффект дальтонизма

• Coblis — применяет к загруженному изображению эффект дальтонизма

• В 82-ой версии Chrome в Devtools добавят эмуляторы нарушения зрения.
  Сейчас эту функциональность уже можно попробовать в Chrome Canary.

Color Contrast Checker — TPGi

У вас есть вопрос об анализаторе цветового контраста или обнаружена ошибка?
Посетите репозиторий Color Contrast Analyzer (CCA) на GitHub.

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

Функции

• Индикаторы соответствия требованиям Руководства по обеспечению доступности веб-контента 2.1 (WCAG 2.1)
• Несколько способов выбора цветов: вы можете вручную ввести цветовые форматы CSS, использовать ползунок RGB или выбрать инструмент выбора цвета
• Симулятор дальтонизма
• Поддержка альфа-прозрачности цветов переднего плана

Загрузить анализатор цветового контраста TPGi v3. 2 для Windows

Загрузить TPGi CCA v3.2 для Mac

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

WCAG Color Contrast

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

• Уровень AA WCAG 2.0 требует контрастности не менее 4,5:1 для обычного текста и 3:1 для крупного текста.
• WCAG 2.1 требует контрастности не менее 3:1 для графики и компонентов пользовательского интерфейса.
Для уровня
• WCAG AAA требуется коэффициент контрастности не менее 7:1 для обычного текста и 4,5:1 для крупного текста.

Нужна дополнительная помощь по цветовому контрасту?

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

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

Поддержка и развитие

Если у вас есть какие-либо вопросы относительно нашего инструмента цветового контраста, вы хотите сообщить об ошибках или предложить улучшения или внести свой вклад в код, см. репозиторий Color Contrast Analyzer (CCA).

Лицензионное соглашение с конечным пользователем (EULA)

Ознакомьтесь с EULA, посетив нашу страницу GitHub.

Предыдущие версии

Текущая версия анализатора цветового контраста (CCA) была перестроена с нуля с использованием Electron. Предыдущие версии, отличные от Electron («CCA Classic»), см. в репозиториях CCA-Win и CCA-OSX.

Эта программа распространяется в надежде, что она будет полезна, но БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ; даже без подразумеваемой гарантии КОММЕРЧЕСКОЙ ПРИГОДНОСТИ или ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННОЙ ЦЕЛИ. Дополнительные сведения см. в Стандартной общественной лицензии GNU.

Проверка цветового контраста | Бесплатный инструмент проверки доступности

Бесплатный инструмент проверки доступности

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

Цвет переднего плана

Цвет фона

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

Как это работает?

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

Ваш коэффициент

Ваши цвета соответствуют требованиям WCAG

:1

ОТЛИЧНО

Ваше соотношение не определено:1. Ваши цвета соответствуют требованиям WCAG. ОТЛИЧНО.

Ошибка уровня соответствия мелкого текста AA. Ошибка уровня соответствия мелкому тексту AAA.

Ошибка уровня соответствия требованиям крупного текста AA. Ошибка уровня соответствия большого текста AAA.

Соответствие требованиям

Мелкий текст

Уровень AA

Ошибка

Уровень AAA

Ошибка

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

Уровень AA

сбой

Уровень AAA

сбой

Предварительный просмотр цветов в оттенках серого

Шкала коэффициента контрастности

Коэффициент контрастности определяет, насколько яркие или темные цвета отображаются на экране. Более научное определение состоит в том, что контраст представляет собой отношение яркости самого яркого цвета к самому темному цвету, которое может воспроизвести система. Коэффициенты контрастности варьируются от 1 до 21 (записывается как 1:1 и 21:1). Первое число, L1, относится к относительной яркости светлых цветов, а L2 — второе число, которое относится к относительной яркости темных цветов.

Низкий

Ваше соотношение

: 1

HIGH

1

3

4.5

7

21

Мы любим, чтобы получить свои мысли!

Есть ли что-то, что вы хотели бы улучшить в нашей программе проверки цветового контраста?

Поделитесь своим отзывом

Насколько доступен ваш сайт?

Цветовой контраст — это лишь малая часть того, что делает ваш сайт доступным. Хотите получить полную картину доступности вашего сайта? Просканируйте свой сайт прямо сейчас с помощью нашего бесплатного средства проверки доступности веб-сайта:

Введите URL-адрес веб-сайта

Советы по использованию доступных цветов и цветового контраста на вашем веб-сайте

Выберите правильную цветовую схему как макет сайта.

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

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

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

Стремитесь к коэффициенту контрастности 4,5:1 или выше

Коэффициент цветовой контрастности определяет, насколько яркие или темные цвета отображаются на экране. Они могут варьироваться от 1 до 21 (записывается как 1:1 и 21:1 соответственно). Первое число в соотношении указывает, какова относительная яркость (или яркость) светлых цветов, а второе представляет относительную яркость темных цветов. WCAG рекомендует использовать минимальное соотношение 4,5:1 для текста и интерактивных элементов.

Найдите визуально приятные сочетания цветов

Начните выяснять, как выбирать сочетания цветов для веб-сайта, сосредоточившись на цветах фона, цветах текста и шрифта, призывах к действию (CTA) и кнопках.

Следующие рекомендации помогут вам выбрать лучшую цветовую схему для вашего веб-сайта:

ДЕЛАТЬ:

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

НЕЛЬЗЯ:

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

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

Знать Исключения для доступности цветового контраста

Существуют некоторые исключения из правил доступности цветов, изложенных WCAG:

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