(смотри в комментариях объяснение заголовка поста)
Казалось бы, цвет один. А вот контрастность разная!
Сегодня поговорим о ней.
❓ Что это такое?
Контрастность цвета (Contrast Ratio) — это отношение яркости самой светлой и тёмной точек в интерфейсе.
Помните, в одном из предыдущих постов мы говорили про data-ink ratio?
То было отношение данных к чернилам, а сегодня другой коэффициент и очередная формула.
Не такими уж гуманитарными оказываются визуализация и дизайн😁
❓Как считать?
Формула расчёта контрастности на первый взгляд кажется простой:
(L1 + 0,05) / (L2 + 0,05)
, но сами L1 и L2 рассчитать непросто, потому что на самом деле это не простая яркость, а относительная.
Относительной яркостью считается коэффициент от нуля до единицы, где 0 является чёрным цветом, а 1 белым цветом.
И для получения этого значения используется другая формула:
L = 0,2126 * R + 0,7152 * G + 0,0722 * B
Кто не боится занырнуть в детали, посмотрите эту статью с объяснением расчёта на русском языке.
❓Кто всё это придумал?
Все эти формулы берут своё начало в руководстве по доступности веб-контента (Web Content Accessibility Guidelines — WCAG).
Это руководство и другие технологические стандарты для Интернета разрабатывает международная организация W3C.
❓А сколько норма?
Согласно актуальной на данный момент версии WCAG 2.2, рекомендуемый коэффициент контрастности для текста должен быть 4,5:1. Простыми словами, это означает, что яркость текста должна быть как минимум в 4,5 раза больше яркости фона.
Для крупного текста (18 пикселей или больше) или жирного текста (14 пт или больше) и для компонентов интерфейса минимальный коэффициент контрастности составляет 3:1.
Именно 3:1 я часто встречаю в разных статьях и рекомендациях.
❓А можно не считать самому?
Конечно! Есть множество сервисов для проверки контрастности, а также специальные расширения для браузеров и приложения.
Вот примеры простых удобных сервисов:
🤩contrast checker от Coolors.co
🤩color-contrast-checker от imagecolorpicker
🤩contract ratio от Siegemedia
🤩contrast checker на сайте Академии Веб-дизайна
❓Как применить это в BI?
В разработке дашбордов мы используем это знание, чтобы повысить читаемость графиков:
☝️Помним, что контрастность считается относительно фона, поэтому когда мы помещаем текст на цветную плашку, контрастность снижается (привет цветным фонам!)
☝️ Проверяем читаемость подписей данных на графиках
В книге Dashboards that deliver приведён хороший пример улучшения контрастности на графике, я использовала его на скриншоте.
Авторы сравнили три варианта подписи данных: серым цветом, синим цветом, соответствующим цвету столбца, и более тёмным синим. Из них по стандарту контрастности подошёл только третий вариант.
❓Что ещё почитать по теме?
🤩Подробнее о контрастности в этой статье
🤩В целом о цвете в визуализации данных в моей памятке
Лайк, если полезно/интересно😉
#цвет #uxui #dataviz