Проверка контрастности цветов — тест WCAG AA и AAA онлайн
Крупный текст — заголовок 24px
Обычный текст — так выглядит основной текст размером 14–16px с вашей парой цветов. Если вам читать комфортно, скорее всего, и вашим пользователям тоже.
Коэффициент контрастности
—
AA — обычный текст
Требуется 4,5:1
AA — крупный текст
Требуется 3:1
AAA — обычный текст
Требуется 7:1
AAA — крупный текст
Требуется 4,5:1
Элементы интерфейса и графика
Требуется 3:1 (WCAG 1.4.11, нетекстовый контраст)
Выберите цвет текста и цвет фона — коэффициент контрастности рассчитается мгновенно, с результатом «прошёл / не прошёл» для каждого уровня WCAG: AA и AAA, обычный и крупный текст, плюс требование 3:1 для элементов интерфейса. Всё работает в браузере — данные никуда не отправляются.
Как это работает
- 1 Выберите два цвета Используйте палитру или введите HEX-значения (например, #1a1a2e) для цвета текста и цвета фона. Формат rgb(r, g, b) тоже поддерживается.
- 2 Посмотрите коэффициент контрастности Коэффициент обновляется по мере ввода, а на образце видно, как ваша пара цветов выглядит на обычном и крупном тексте.
- 3 Проверьте результаты по уровням Для каждого требования WCAG показан значок «Прошёл» или «Не прошёл». Для основного текста ориентируйтесь минимум на AA (4,5:1), для максимальной читаемости — на AAA (7:1).
Ваши данные защищены
Всё обрабатывается прямо в вашем браузере. Никакие файлы или текст не отправляются на наши серверы. Отключите интернет — инструмент продолжит работать.
Часто задаваемые вопросы
- Какой коэффициент контрастности требует WCAG?
- WCAG AA требует 4,5:1 для обычного текста и 3:1 для крупного. WCAG AAA строже: 7:1 для обычного текста и 4,5:1 для крупного. Элементы интерфейса — кнопки, рамки, иконки — должны иметь контраст не менее 3:1 с соседними цветами.
- Что считается крупным текстом?
- Текст от 24px (18pt) обычного начертания или от 18,66px (14pt) полужирного. Всё, что меньше, — обычный текст, и для него действуют более строгие пороги: 4,5:1 (AA) или 7:1 (AAA).
- Как рассчитывается коэффициент контрастности?
- По формуле WCAG 2: каждый цвет переводится в относительную яркость, затем считается отношение (L1 + 0,05) / (L2 + 0,05), где L1 — более светлый цвет. Результат лежит в диапазоне от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом).
- На какой уровень ориентироваться — AA или AAA?
- AA — уровень, на который ссылается большинство законов и стандартов о доступности. AAA стоит закладывать для основного текста на страницах с большим объёмом чтения, но для фирменных цветов он не всегда достижим.
- Работает ли инструмент с прозрачностью (alpha)?
- Нет — контрастность определена для непрозрачных цветов. Если текст или фон полупрозрачные, сначала вычислите итоговый цвет после наложения на подложку, а затем проверьте уже его.
- Куда-то отправляются мои цвета?
- Нет. Расчёт — это несколько строк математики, которые выполняются прямо в браузере. Введённые данные не покидают ваше устройство.
Из блога
Контрастность цветов по WCAG: что значат 4,5:1 и 7:1 и как их пройти Что на самом деле означают коэффициенты контрастности 4,5:1 и 7:1, кто их устанавливает и как исправить непроходящую пару цветов. Читать статью →Похожие инструменты
Конвертер цветов Конвертация цветов между форматами HEX, RGB, HSL и HSV. Генератор CSS-градиентов Визуальное создание линейных и радиальных CSS-градиентов. Генератор CSS-теней Визуальный конструктор box-shadow со смещением, размытием и слоями. Генератор фавиконов Создание фавиконов из текста или изображения во всех размерах.