Как выбрать цвета, которые читаются всеми
Автор Команда AsasWeb 1 мин чтения
WCAG требует коэффициент контрастности не ниже 4,5:1 для основного текста и 3:1 для крупного текста и элементов интерфейса. Надёжный способ выполнить эти требования: заложить их в палитру с самого начала, выбрать тёмный цвет текста и светлый фон с запасом, а затем проверить каждую пару цветов инструментом контраста. Никогда не передавайте смысл одним только цветом и отдельно проверяйте тёмную тему, потому что палитра, которая проходит на белом, может провалиться на почти чёрном.
Низкоконтрастный текст выглядит изящно в дизайн-инструменте и пропадает в реальной жизни: на солнце, на дешёвом экране или для любого со сниженным зрением. Доступный цвет это не про приглушение бренда. Это про уверенность, что люди действительно смогут его прочитать.
Знайте целевые значения
WCAG задаёт чёткие минимумы. Основному тексту нужно соотношение контраста не менее 4,5 к 1 по отношению к фону. Крупному тексту, примерно от 24 пикселей, и элементам интерфейса нужно не менее 3 к 1. Это нижние границы, а не цели, и их легко проверить любым инструментом для контраста.
Встраивайте контраст в палитру
Хитрость в том, чтобы проектировать палитру вокруг этих целей с самого начала, а не обнаруживать провалы в конце. Выберите тёмные чернила и светлую поверхность, которые проходят с запасом, затем выберите акцентные цвета, работающие и как текст, и как заливка. На этом сайте каждая пара цветов задокументирована с измеренным соотношением, поэтому ничего не проскальзывает.
Не полагайтесь только на цвет
Цвет никогда не должен быть единственным способом что-то обозначить. Обязательное поле, ошибка, ссылка в абзаце: каждому нужна вторая подсказка, например текст, иконка или подчёркивание. Людям, которые не воспринимают цветовые различия, всё равно нужно сообщение.
Учитывайте тёмную тему
Палитра, которая проходит в светлой теме, может провалиться в тёмной, где цвет бренда, выглядевший нормально на белом, может оказаться слишком тусклым на почти чёрной поверхности. Каждой теме нужны собственные проверенные значения.
Мы относимся к контрасту как к измеренному числу, а не к догадке. Если вы не уверены, что цвета вашего бренда проходят, начните проект, и мы их проверим и подберём палитру, которая одновременно фирменная и читаемая.