Контраст цветов в интерфейсе: почему фирменный оранжевый не читается и как мы это исправили

Фирменный цвет часто не годится для текста и кнопок: на белом фоне он выглядит ярко, но читается плохо. Читаемость измеряют контрастом по стандарту WCAG: для обычного текста нужно не меньше 4.5:1. Ниже разбор на реальном примере: фирменный оранжевый CRM для клубов давал 2.59:1, и мы исправили это двумя оттенками, не трогая логотип.

Как считается контраст

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

Пороги WCAG 2.1 уровня AA:

обычный текст: 4.5:1;
крупный текст (от 24 px или от 19 px жирным) и элементы интерфейса: 3:1.

Что показала проверка нашей CRM

Мы проверили цвета светлой темы в CRM для клуба единоборств. Тёмная тема прошла проверку полностью. В светлой оказалось пять провалов, и главный из них: фирменный оранжевый #F5821F на белом даёт контраст 2.59:1. Это ниже даже порога 3:1 для крупных элементов. Кнопка с белым текстом на таком оранжевом читается плохо на солнце, на дешёвом экране и у людей со сниженным зрением. А клубы часто пользуются приложением в зале, при ярком свете и с телефона.

Решение: два оранжевых вместо одного

Мы не стали менять фирменный цвет: он нужен клиенту в логотипе. Вместо этого разделили роли.

Фирменный #F5821F остался только в логотипе и декоративных элементах.
Рабочий #B85900 используется для кнопок, активных пунктов и ссылок. На белом он даёт 4.70:1, белый текст на нём проходит норму.
Тёмный #9C4C00 взят для текста цветом бренда на тёплом фоне #FBF8F5: контраст 5.76:1. Рабочий оттенок на этом фоне давал бы 4.44:1, то есть на волосок ниже нормы.

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

Где ловится ошибка

Полупрозрачные подложки. Цвет на собственной светлой подложке (например, активный пункт меню) проходит хуже, чем на белом. Понижение прозрачности подложки проблему не решает, нужен более тёмный цвет текста.
Запасные цвета. Мы проверили три запасные темы, и все проходили с запасом: синяя 5.42:1, зелёная 5.99:1, фиолетовая 7.38:1. Иногда проще выбрать другой цвет, чем подгонять фирменный.
Только светлая тема. Тёмную тему проверили, и она прошла. Но раз светлая не прошла, проверять нужно обе.

Чек-лист для вашего интерфейса

Выпишите все пары «цвет текста и фон», которые есть в интерфейсе: кнопки, ссылки, подписи, метки статусов.
Посчитайте контраст каждой пары по формуле WCAG, это делается скриптом за минуты.
Для пар ниже 4.5:1 (текст) или 3:1 (крупное и значки) подберите более тёмный оттенок из той же гаммы.
Фирменный цвет оставьте для логотипа и крупных декоративных мест, где читаемость не критична.
Заведите проверку в сборку, чтобы новые цвета не ломали контраст.

Частые вопросы

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

Придётся ли менять логотип и фирменный стиль? Нет. Фирменный цвет остаётся там, где он выполняет роль узнаваемости. Рабочие цвета для текста и кнопок подбираются отдельно в той же гамме.

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

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