Проверка контраста цветов по WCAG

Светло-серый текст на белом смотрится аккуратно в макете, но на телефоне под солнцем его уже не прочитать. Проверка ниже за секунду посчитает коэффициент контраста между цветом текста и фона и покажет, проходит ли пара требования WCAG 2.2 — международного стандарта доступности сайтов.

Если контраста не хватает, инструмент сам предложит ближайший цвет того же оттенка, который проходит уровень AA или AAA, — останется нажать «Применить».

Как пользоваться

1. Введите цвет текста и фона. Подойдёт любой формат: #333, #1E88E5, rgb(30 136 229), hsl(210 79% 51%), название CSS (navy) или русское название из справочника цветов — «бордовый», «салатовый». Можно нажать на квадратик и выбрать цвет на палитре.
2. Посмотрите на число. Чем оно больше, тем лучше: от 1 : 1 (цвета совпадают) до 21 : 1 (чёрный на белом). Ниже — зелёные и красные отметки по каждому уровню WCAG.
3. Оцените предпросмотр. Там заголовок, обычный и мелкий текст, ссылка, кнопка и поле ввода в ваших цветах. Переключатели над ним показывают, как пару видят люди с разными типами дальтонизма.
4. Исправьте, если нужно. В блоке «Исправить контраст» выберите, что менять — текст или фон, — и примените подходящий вариант.
5. Поделитесь. Кнопка «Скопировать ссылку» сохранит пару в адресе страницы — коллега откроет её и увидит те же цвета.

Что такое контраст и WCAG

Коэффициент контраста показывает, насколько один цвет светлее другого с точки зрения глаза. Для каждого цвета считается относительная яркость — число от 0 (чёрный) до 1 (белый), причём зелёный канал весит больше всего, а синий меньше всего, потому что так устроено наше зрение. Затем берётся отношение: (L₁ + 0,05) / (L₂ + 0,05), где L₁ — яркость более светлого цвета.

WCAG (Web Content Accessibility Guidelines) — рекомендации консорциума W3C по доступности сайтов. Версия 2.2 вышла в 2023 году, требования к контрасту в ней те же, что в 2.0 и 2.1. На WCAG опираются законы о доступности во многих странах, а российский ГОСТ Р 52872-2019 о доступности сайтов для людей с нарушениями зрения построен на WCAG 2.1.

Таблица требований

Крупный текст — от 18 pt (это 24 px) обычного начертания или от 14 pt (примерно 18,7 px) жирного. Всё, что меньше, — обычный текст.

Почему серый текст на белом — частая ошибка

Серый текст выглядит «легче» и современнее, поэтому им любят оформлять подписи, даты, подсказки в полях и даже основной текст. Но запас здесь очень маленький:

Что ещё снижает читаемость на практике:

• ☀️ Яркое солнце и блики. На улице экран телефона теряет контраст, и пара 3 : 1 превращается в невидимую.
• 📉 Дешёвые и старые мониторы. Светлые оттенки серого на них сливаются с белым.
• 👓 Возраст. С годами хрусталик мутнеет и желтеет, и для того же комфорта нужно больше контраста.
• 🔤 Тонкие шрифты. Начертание Light на 14 px при формально проходящем контрасте всё равно читается хуже, чем Regular.
• 🫥 Прозрачность. opacity: .6 у текста или полупрозрачный цвет вроде rgba(0,0,0,.4) — это тот же светло-серый. Проверка выше учитывает прозрачность: введите восьмизначный HEX, например #00000066.

Как проверить контраст в DevTools

Браузер умеет проверять контраст прямо на странице:

1. Откройте инструменты разработчика: F12 или Ctrl + Shift + I (на Mac — ⌘ + ⌥ + I).
2. Выберите элемент с текстом и найдите свойство color на вкладке Styles.
3. Нажмите на цветной квадратик рядом со значением. В Chrome и Edge откроется палитра со строкой Contrast ratio: значение и отметки AA и AAA. Линии на палитре показывают границу, за которой цвет начнёт проходить проверку.

Для проверки всей страницы сразу подойдут:

• Lighthouse в Chrome (вкладка Lighthouse → Accessibility) — найдёт элементы с недостаточным контрастом.
• CSS Overview в Chrome — раздел Colors показывает все пары с низким контрастом.
• Accessibility в Firefox — кнопка проверки контраста подсвечивает проблемные места.

Советы для тёмной темы

• 🌑 Не используйте чисто чёрный фон. Тёмно-серый вроде #121212 выглядит мягче, и на нём видны тени и слои интерфейса.
• 🤍 Не делайте текст чисто белым. Белый на почти чёрном даёт около 19 : 1 — многим это режет глаза. Светло-серый #E0E0E0 на #121212 даёт примерно 14 : 1 — более чем достаточно для AAA.
• 🎨 Приглушите насыщенные цвета. Яркий синий или красный, которые хороши на белом, на тёмном фоне «светятся» и рябят. Берите варианты светлее и спокойнее, а потом проверяйте контраст.
• 🔁 Проверяйте обе темы отдельно. Цвет, который проходит на светлом фоне, не обязательно пройдёт на тёмном, и наоборот. Например, ярко-зелёный #00DD11 даёт больше 10 : 1 на тёмном фоне, но меньше 2 : 1 на белом.
• 🧱 Не забудьте про рамки и разделители. На тёмном фоне они часто почти исчезают — для полей ввода и важных границ нужен контраст 3 : 1.

Подобрать оттенки светлее и темнее одного цвета удобно в конвертере цветов, а готовые удачные пары — в подборке сочетаний цветов.

Дальтонизм и контраст

Нарушения цветового зрения встречаются примерно у 8 % мужчин и 0,5 % женщин. Чаще всего плохо различаются красный и зелёный. Поэтому есть два простых правила:

• Не передавайте смысл только цветом. Ошибка в форме — это не только красная рамка, но и значок с текстом. Ссылка в тексте — не только другой цвет, но и подчёркивание.
• Контраст по светлоте спасает всех. Если пара хорошо читается в режиме «Монохром», её прочитают и люди с любым типом дальтонизма.

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

Какой контраст текста нужен для сайта?

Минимум по WCAG уровня AA — 4,5 : 1 для обычного текста и 3 : 1 для крупного (от 24 px или от 18,7 px жирным). Для уровня AAA — 7 : 1 и 4,5 : 1.

Почему у вас 4,49 не считается за 4,5?

Стандарт требует, чтобы коэффициент был не меньше порога, и не разрешает округлять в большую сторону. Поэтому инструмент обрезает значение до сотых, а не округляет: 4,499 : 1 — это не прошедшая пара.

Нужен ли контраст для иконок и кнопок?

Да. По критерию 1.4.11 иконки, которые несут смысл, рамки полей ввода, переключатели и графики должны иметь контраст не меньше 3 : 1 с соседним фоном. Логотипы и чисто декоративные элементы — исключение.

Как работает кнопка «Применить» в блоке исправлений?

Инструмент переводит цвет в пространство OKLCH и меняет только светлоту — оттенок остаётся тем же, насыщенность сохраняется, насколько это возможно в sRGB. Из всех подходящих вариантов выбирается самый близкий к исходному.

Что делать, если фирменный цвет не проходит проверку?

Оставьте его для крупных элементов, иконок и заливки, а для текста возьмите более тёмный (или светлый) вариант того же оттенка — его и подберёт блок «Исправить контраст». Можно поменять и фон: белый текст на кнопке, затемнённой на 10–15 %, часто уже проходит AA.

Как передать пару цветов коллеге?

Нажмите «Скопировать ссылку» — цвета окажутся в адресе страницы, например /kontrast-cvetov/#fg=333333&bg=FFFFFF. По такой ссылке инструмент откроется сразу с этой парой.

Есть ли новые формулы контраста?

Для будущей версии WCAG 3 обсуждается метод APCA, который точнее учитывает размер шрифта и то, светлый текст или тёмный. Пока это черновик, а официальные требования — те, что в таблице выше: их проверяют аудиторы и автоматические тесты.