С контрастом часто вспоминают уже под конец: макет готов, цвета подобраны, а потом выясняется, что подписи на кнопках едва читаются. При этом «выглядит нормально на моём мониторе» — не очень надёжная проверка. Особенно если интерфейсом пользуются на телефоне, при ярком свете или с пониженной яркостью экрана.
В WCAG для обычного текста уровня AA ориентир — контраст 4,5:1, для крупного текста — 3:1. Но одной цифры мало: тонкий шрифт, мелкий кегль и цветной фон могут сделать чтение утомительным, даже когда проверка формально пройдена. И наоборот, не всякий бледный оттенок нужно запрещать: важны размер, начертание и роль элемента. Проверяю не только основной текст, но и подписи, состояния кнопок, границы полей и текст поверх изображений.
Как вы выстраиваете палитру, чтобы контраст не приходилось «чинить» в конце? Есть ли у вас набор проверенных пар цветов для текста и фона, или проверяете каждый экран отдельно? Интересно и про компромиссы: бывало ли, что ради нужного оттенка приходилось менять всю схему, и как вы объясняли это дизайнеру или заказчику?
В WCAG для обычного текста уровня AA ориентир — контраст 4,5:1, для крупного текста — 3:1. Но одной цифры мало: тонкий шрифт, мелкий кегль и цветной фон могут сделать чтение утомительным, даже когда проверка формально пройдена. И наоборот, не всякий бледный оттенок нужно запрещать: важны размер, начертание и роль элемента. Проверяю не только основной текст, но и подписи, состояния кнопок, границы полей и текст поверх изображений.
Как вы выстраиваете палитру, чтобы контраст не приходилось «чинить» в конце? Есть ли у вас набор проверенных пар цветов для текста и фона, или проверяете каждый экран отдельно? Интересно и про компромиссы: бывало ли, что ради нужного оттенка приходилось менять всю схему, и как вы объясняли это дизайнеру или заказчику?
Комментарии 9
Обсуждение темы — по порядку