Clew

ГлавнаяИнструментыПродуктовый дизайнПроверка контраста цветов

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

Введите цвет текста и фона в HEX, RGB или HSL. Калькулятор покажет коэффициент контрастности по WCAG 2.2 с результатом для AA, AAA, крупного текста и элементов интерфейса, контраст APCA из черновика WCAG 3, превью текста, кнопок и подсказки — и подберёт ближайший цвет, если ваш не проходит.

● Бесплатно, без регистрацииОбновлено:

HEX (#777, #767676), rgb(118 118 118), hsl(0 0% 46%) или oklch(56% 0 0). Полупрозрачный текст смешивается с фоном.
Что менять

Ближайший проходящий цвет

—

 

Контраст WCAG— 
APCA Lc— 
Яркость— 

Крупный заголовок, 24 px

Основной текст 16 px. Прочитайте абзац с телефона на улице на расстоянии вытянутой руки — если трудно вам, трудно будет и пользователям.

Основная кнопкаВторичнаяТекстовая ссылка
Рамка поля
Подсказка: нажмите «Новый проект», чтобы начать.

Мелкий текст 13 px: подписи и подсказки чаще всего не проходят проверку.

Результаты

    Формула. Контраст = (Lсветлого + 0,05) / (Lтёмного + 0,05), где L = 0,2126·R + 0,7152·G + 0,0722·B для линеаризованного sRGB. Значение не округляется вверх: 4,48:1 не проходит порог 4,5:1.

    Расчёт идёт в вашем браузере — введённые данные никуда не отправляются.

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

    1. Введите два цветаВставьте цвет текста и фона в любом формате CSS или выберите их в палитре. Кнопка «Поменять местами» помогает проверить светлый текст на тёмном фоне.
    2. Посмотрите результатыКонтраст сравнивается со всеми порогами WCAG 2.2: обычный и крупный текст для AA и AAA и 3:1 для элементов интерфейса. Рядом — значение APCA Lc как второе мнение.
    3. Проверьте превьюТекст, кнопка, ссылка, рамка поля и подсказка отрисованы вашими цветами — именно эти сочетания чаще всего не проходят проверку в реальных интерфейсах.
    4. Возьмите ближайший цветВыберите цель и что менять — текст или фон. Инструмент сохранит оттенок и сдвинет светлоту до прохождения порога; HEX можно применить или скопировать.

    Как считается контрастность по WCAG

    WCAG 2.x сравнивает относительную яркость (relative luminance) двух цветов — насколько светлым каждый выглядит для глаза, по шкале от 0 (чёрный) до 1 (белый). Каждый канал sRGB сначала переводится из значения 0–255 в линейную интенсивность, затем каналы складываются с весами, отражающими чувствительность глаза: зелёный вносит больше всего, синий — меньше всего.

    c = канал / 255 c_lin = c / 12,92 если c ≤ 0,04045 c_lin = ((c + 0,055) / 1,055) ^ 2,4 иначе L = 0,2126 · R_lin + 0,7152 · G_lin + 0,0722 · B_lin контраст = (L_светлого + 0,05) / (L_тёмного + 0,05)

    Результат лежит от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Слагаемое 0,05 моделирует внешний свет, отражённый от экрана, поэтому у очень тёмных пар контраст не уходит в бесконечность.

    Пример. Серый #777777 на белом: 119 / 255 = 0,4667, после линеаризации 0,1845, значит L = 0,1845. У белого L = 1. Контраст = 1,05 / 0,2345 = 4,48:1. Для обычного текста уровень AA не пройден: 4,48 меньше 4,5, а округлять WCAG не разрешает. Самый светлый серый, который проходит на белом, — #767676 с контрастом 4,54:1.

    Пороги WCAG 2.2

    • 1.4.3 «Контраст (минимальный)», уровень AA: 4,5:1 для обычного текста, 3:1 для крупного.
    • 1.4.6 «Контраст (повышенный)», уровень AAA: 7:1 для обычного текста, 4,5:1 для крупного.
    • 1.4.11 «Контраст нетекстовых элементов», уровень AA: 3:1 для визуальных частей, по которым узнают элемент интерфейса и его состояние, — рамок полей ввода, фокусной обводки, контуров чекбоксов, значимых иконок, линий графиков.

    Крупный текст — от 18 пунктов (24 CSS-пикселя) обычным начертанием или от 14 пунктов (около 18,66 px) жирным. Логотипы, чисто декоративный текст и неактивные элементы от требований освобождены. Пороги не менялись между WCAG 2.0, 2.1 и 2.2. В России на WCAG 2.0 основан ГОСТ Р 52872-2019 для сайтов, в Европе — стандарт EN 301 549 с тем же уровнем AA.

    APCA: метод контраста для WCAG 3

    Формула WCAG 2 простая, но у неё есть известные слабые места. Она считает пару одинаково читаемой, какой бы из цветов ни был текстом, завышает контраст тёмных сочетаний и не учитывает размер и насыщенность шрифта. APCA (Accessible Perceptual Contrast Algorithm), который разработал Эндрю Сомерс для рабочей группы W3C, точнее моделирует восприятие светлоты и возвращает значение контраста светлоты Lc примерно от −108 до +106.

    Y = 0,2126729 · (R/255)^2,4 + 0,7151522 · (G/255)^2,4 + 0,0721750 · (B/255)^2,4 тёмный текст на светлом: Lc = ((Y_фон^0,56 − Y_текст^0,57) · 1,14 − 0,027) · 100 светлый текст на тёмном: Lc = ((Y_фон^0,65 − Y_текст^0,62) · 1,14 + 0,027) · 100 (Y ниже 0,022 мягко поднимается; |результат| меньше 0,1 считается нулём)

    Знак показывает полярность: плюс — тёмный текст на светлом фоне, минус — светлый на тёмном. Один и тот же серый #888 даёт Lc 63,1 как текст на белом и Lc −68,5 как белая надпись на #888: по APCA белая надпись читается лучше. WCAG 2 так сказать не может — у обеих пар 3,54:1.

    Ориентиры по уровням Lc в упрощённом режиме Bronze: 90 — рекомендуется для основного текста, 75 — минимум для основного текста, 60 — для прочего контентного текста, 45 — для крупных заголовков, 30 — для плейсхолдеров и нетекстовых элементов, 15 — только для разделителей.

    Важно: APCA входит в рабочий черновик WCAG 3, это не утверждённый стандарт, и пороги ещё могут измениться. Юридические требования и требования заказчиков сегодня ссылаются на WCAG 2.x. Решение «проходит или нет» принимайте по коэффициенту WCAG 2.2, а APCA используйте, чтобы выбрать из двух проходящих вариантов или поймать пары тёмной темы, которые WCAG 2 пропускает.

    Как исправить низкий контраст и сохранить фирменный цвет

    Обычно достаточно изменить светлоту, а не оттенок. Подсказки выше работают в цветовом пространстве OKLCH: сохраняют оттенок и хрому, шаг за шагом двигают воспринимаемую светлоту, возвращают цвет в охват sRGB и проверяют, что округлённый HEX всё ещё проходит порог. Вариант, ближайший к исходной светлоте, отмечен как «ближе всего».

    • Оставьте фирменный цвет для крупных плашек и кнопок, а для текста и ссылок возьмите более тёмный тон того же оттенка. Фирменный красный с контрастом 3,9:1 на белом может остаться фоном кнопки с белым жирным текстом, если эта пара проходит порог для крупного текста, — но проверьте.
    • Проверяйте все состояния: наведение, фокус, неактивное, посещённая ссылка, ошибка. Плейсхолдеры и текст подсказок в формах не проходят проверку чаще всего.
    • Проверяйте обе темы. Палитра, прошедшая проверку в светлой теме, нередко проваливается в тёмной — здесь APCA особенно полезен.
    • Текст поверх фото и градиентов должен проходить порог в самой светлой точке. Надёжнее подложка — сплошная или полупрозрачная, — чем тень.
    • Подсказки и шаги онбординга часто оформляют светлым фирменным тоном с серым текстом. Их читают быстро и на ходу, поэтому даже для коротких текстов лучше держать 4,5:1 и выше.

    Чтобы построить шкалу оттенков с известным контрастом для каждого шага, воспользуйтесь генератором доступной палитры.

    Источники

    1. W3C. Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 2023 — критерии 1.4.3, 1.4.6, 1.4.11; определения относительной яркости и коэффициента контрастности.
    2. W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum) — обоснование порогов 4,5:1 и 3:1, определение крупного текста.
    3. Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 версии 0.0.98G-4g, Myndex Research — константы и эталонные значения, использованные в инструменте.
    4. W3C. W3C Accessibility Guidelines (WCAG) 3.0, Working Draft — статус метода визуального контраста.
    5. ГОСТ Р 52872-2019. Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности.
    6. Ottosson B. A perceptual color space for image processing, 2020 — пространство OKLab для подбора светлоты.

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

    Какой контраст требует WCAG?

    Для уровня AA WCAG 2.2 требует не меньше 4,5:1 между обычным текстом и фоном, 3:1 для крупного текста (24 px или около 18,66 px жирным) и 3:1 для элементов интерфейса и значимой графики. Уровень AAA повышает требования к тексту до 7:1 и 4,5:1.

    Контраст 4,48:1 — это достаточно для порога 4,5:1?

    Нет. Пороги WCAG точные, округлять коэффициент вверх нельзя. #777777 на белом — это 4,48:1, и для обычного текста уровень AA не пройден; #767676 даёт 4,54:1 и проходит.

    Что такое APCA и нужно ли использовать его вместо WCAG 2?

    APCA — метод воспринимаемого контраста из рабочего черновика WCAG 3. Он учитывает полярность текста и даёт значение Lc, требования к которому зависят от размера и начертания шрифта. Стандартом он пока не стал, поэтому соответствие по-прежнему оценивают по коэффициенту WCAG 2.2; APCA полезен как вторая проверка, особенно для тёмных тем.

    Нужен ли контраст для иконок, рамок и фокусной обводки?

    Да. Критерий 1.4.11 требует 3:1 относительно соседних цветов для частей элемента, по которым его узнают или понимают его состояние: рамок полей, контуров чекбоксов, значимых иконок, фокусной обводки. Декоративные и неактивные элементы освобождены.

    Как считать контраст полупрозрачного текста?

    Сначала цвет текста смешивается с фоном с учётом прозрачности, затем сравнивается получившийся сплошной цвет. Калькулятор делает это автоматически и показывает итоговый HEX.

    Должны ли неактивные кнопки и плейсхолдеры проходить проверку контраста?

    Неактивные элементы по WCAG 2.2 освобождены от требований. Плейсхолдеры — нет: если текст несёт информацию, ему нужно 4,5:1. На этом ошибаются во многих формах, поэтому подсказку надёжнее вынести в видимую подпись или пояснение под полем.

    Как подобрать проходящий цвет и не изменить фирменный стиль?

    Сохраните оттенок и меняйте только светлоту. Подсказки в этом инструменте делают именно это в пространстве OKLCH: показывают ближайший более тёмный и более светлый вариант для текста или фона и итоговый контраст.

    Ещё в разделе «Продуктовый дизайн»

    Открыть подборку →

    Полезно по теме

    Продуктовый онбордингЧеклист онбордингаГенератор доступной палитрыГенератор типографической шкалыПроверка текста подсказкиВсе инструменты

    Подсказки, туры и чеклисты, эффект которых видно в цифрах.

    Попробовать Clew бесплатноКак это работаетFree — бесплатно навсегда · Pro и Business — 14 дней без карты

    Туры, попапы и онбординг в эпоху ИИ

    7 паттернов с числом шагов, правилами текста и метриками, что меняет ИИ, чек-лист перед публикацией. PDF, 2 страницы. Что внутри гайда →