Белое на чёрном, белое на сером, белое на белом... (смотри в комментариях объяснение заголовка поста) Казалось бы, цвет один. А вот контрастность разная! Сегодня поговорим о ней. ❓ Что это такое? Контрастность цвета (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