Контраст текста по WCAG простыми словами
Бледный текст красиво смотрится в макете и плохо читается на телефоне под солнцем. Стандарт WCAG даёт простые числа, по которым можно проверить любую пару цветов.
Что такое коэффициент контраста
Контраст считается по относительной яркости двух цветов и записывается как отношение: от 1:1 (цвета одинаковые) до 21:1 (чёрный на белом). Чем больше первое число, тем легче читать.
Пороги WCAG
- Уровень AA, который требуют чаще всего: обычный текст не меньше 4,5:1, крупный не меньше 3:1.
- Уровень AAA, строже: обычный текст 7:1, крупный 4,5:1.
- Крупным считается текст от 24 пикселей, или от 18,66 пикселя жирным (это 18 и 14 пунктов).
- Значки, рамки полей ввода и другие элементы интерфейса: не меньше 3:1 с соседним цветом.
Где чаще всего ошибаются
- Серый текст на белом:
#999999на белом даёт около 2,8:1 и не проходит даже для крупного текста.#767676уже проходит AA. - Белый текст на жёлтой, оранжевой или светло-зелёной кнопке.
- Подписи поверх фотографии без затемнения.
- Плейсхолдеры в полях ввода: их тоже читают.
Как исправить пару, которая не проходит
Не меняйте оттенок, меняйте светлоту: сделайте текст темнее или фон светлее. Если бренд требует яркую кнопку, сделайте текст на ней тёмным вместо белого. Для текста на фото добавьте полупрозрачную тёмную подложку.
Проверить свои цвета
Введите два цвета в проверку контраста: она посчитает коэффициент и покажет, проходит ли пара AA и AAA для обычного и крупного текста. Готовые палитры в разделе «Палитры» показывают пары текста и фона, которые читаются.
Частые вопросы
Какой контраст нужен по WCAG?
Для уровня AA обычный текст не меньше 4,5:1, крупный не меньше 3:1. Для AAA 7:1 и 4,5:1.
Какой текст считается крупным?
Текст от 24 пикселей или жирный от 18,66 пикселя (18 и 14 пунктов).
Какой самый светлый серый текст можно ставить на белый фон?
Для обычного текста по уровню AA подходит #767676 и темнее: его контраст с белым 4,54:1.
