Дизайн · 3 мин чтения ·
Контраст цветов и WCAG: как сделать текст удобочитаемым
Что значит контрастность 4,5:1, какому тексту нужен уровень AA или AAA и быстрые исправления для цветовых пар, которые чаще всего не проходят проверку.
Светло-серый текст на белом выглядит элегантно в макете, но его трудно прочитать на телефоне под солнцем, с возрастным зрением или при слабовидении. Рекомендации по доступности WCAG превращают «читаемость» в число, которое можно проверить.
Коэффициент контрастности
Контраст выражается отношением от 1:1 (один и тот же цвет) до 21:1 (чёрный на белом). Он основан на относительной яркости — насколько светлым цвет кажется глазу, причём зелёный весит больше всего, а синий меньше всего. Поэтому жёлтый текст на белом почти не виден, а синий на белом читается хорошо.
Пороговые значения
Обычный текст Крупный текст
AA (минимум) 4,5:1 3:1
AAA (повышенный) 7:1 4,5:1
Крупный текст = от 24px, или от 18,66px жирнымНа уровень AA ссылается большинство законов и правил о доступности, поэтому считайте его минимумом. К AAA стоит стремиться в длинных текстах для чтения. Значки, рамки полей ввода и индикаторы фокуса, которые несут смысл, по WCAG 2.1 должны иметь контраст не ниже 3:1.
Пары, которые часто не проходят
Серый текст подсказок в полях, белый текст на ярких фирменных цветах вроде оранжевого, жёлтого или светло-зелёного и текст поверх фотографий. Разница бывает крошечной: #777777 на белом даёт около 4,48:1, чуть ниже AA, а #767676 — около 4,54:1 и проходит.
Быстрые исправления
Затемните текст или фон на одну-две ступени, а не меняйте оттенок: небольшие изменения светлоты сильно двигают коэффициент. Делайте подписи на ярких кнопках крупными и жирными или используйте тёмный текст вместо белого. На фотографиях подложите под текст тёмную подложку.
Контраст — не единственное правило о цвете
WCAG также требует, чтобы цвет не был единственным способом передать информацию. Поле формы, отмеченное как ошибочное только красной рамкой, или график, где линии различаются только цветом, подводят людей с нарушениями цветового зрения — примерно каждого двенадцатого мужчину. Добавьте значок, текстовую подпись, узор или другой стиль линии.
Тёмная тема
На тёмном фоне действуют те же соотношения. Чисто белый текст на чисто чёрном даёт 21:1, но может выглядеть резко, а у некоторых читателей буквы будто светятся; светло-серый на очень тёмно-сером по-прежнему легко проходит AA и удобнее для долгого чтения. Проверяйте обе темы: пара, которая проходит в светлой теме, нередко проваливается, когда цвета инвертируются.
Текст на фотографиях и градиентах
На фото или градиенте фон меняется за каждой буквой. Измеряйте контраст по самому светлому участку фона за текстом, а не по среднему. Полупрозрачный тёмный слой или сплошная плашка под текстом делают результат предсказуемым.
Что дальше
В черновике WCAG 3 изучается новый метод расчёта контраста APCA, который точнее учитывает размер и насыщенность шрифта. Пока это лишь черновик: законы и аудиты сегодня ссылаются на WCAG 2.1 и 2.2, так что пороги 4,5:1 и 3:1 остаются теми, которые нужно соблюдать.
Проверьте пару цветов
Проверка контраста цветов от 4Dev показывает коэффициент для любого цвета текста и фона, с живым предпросмотром и оценкой «проходит/не проходит» для AA и AAA, для обычного и крупного текста. Расчёт идёт по формуле WCAG 2 прямо в вашем браузере.