Этот инструмент проверки контрастности WCAG бесплатен?

Да, полностью бесплатно без регистрации, без платных барьеров и без ограничений на использование. Откройте страницу и сразу начните проверять цвета.

Работает ли он без подключения к интернету?

Да. Все вычисления выполняются полностью в вашем браузере с использованием JavaScript. После загрузки страницы вы можете отключиться от интернета, и инструмент продолжит работать. Никакие данные не отправляются на сервер.

Мои данные о цвете конфиденциальны? Что-нибудь загружается?

Ваши цвета никогда не покидают ваш браузер. Нет анализа цветов, которые вы вводите, нет загрузки, нет обмена с третьими лицами. Ваша последняя пара цветов сохраняется только в localStorage вашего браузера.

В чем разница между WCAG AA и AAA?

AA — это минимальный стандарт, требуемый большинством регуляций (например, ADA, EN 301 549). Обычный текст требует соотношения 4,5:1; крупный текст (24 пикселя или 18,67 пикселей жирный) требует 3:1. AAA — это улучшенная доступность: 7:1 для обычного текста и 4,5:1 для крупного текста. Стремитесь к минимуму AA во всех производственных дизайнах.

Можно ли проверять цвета с использованием сокращенного шестнадцатеричного кода в 3 цифры, например #fff?

Да. Инструмент принимает как сокращенные шестнадцатеричные коды в 3 цифры (#rgb), так и полные шестнадцатеричные коды в 6 цифр (#rrggbb). Просто введите или вставьте свой цвет, и проверка автоматически расширит и проверит его.

Загружает ли этот инструмент мои данные?

Нет. Всё выполняется прямо в вашем браузере, поэтому ваши данные никогда не покидают устройство — после загрузки страницы он работает даже офлайн.

🌗 Проверка контрастности цветов (WCAG AA / AAA)

Мгновенно проверьте, соответствует ли ваша пара цвета текста и фона стандартам доступности WCAG 2.x AA или AAA — прямо в вашем браузере, бесплатно, без отправки данных с вашего устройства. Выберите или введите любой шестнадцатеричный код цвета, увидьте точное соотношение контрастности и получите четкие значки прохождения/не прохождения для обычного текста, крупного текста и обоих уровней соответствия.

Цвет текста

Цвет фона

Результаты контраста

—

соотношение контраста

Живой предварительный просмотр

Приватно по умолчанию. Этот инструмент работает полностью в вашем браузере — ничего из введённого не загружается и не сохраняется, и он работает офлайн.

Об инструменте

Формула контрастности WCAG (Web Content Accessibility Guidelines) вычисляет относительную яркость каждого цвета с использованием стандарта IEC 61966-2-1 sRGB, а затем рассчитывает, насколько светлее один цвет по сравнению с другим. Соотношение 4,5:1 или выше удовлетворяет требованиям AA для обычного текста (16 пикселей), а 7:1 или выше соответствует AAA. Для крупного текста (24 пикселя или 18,67 пикселей жирный) требования более мягкие: 3:1 для AA и 4,5:1 для AAA. Этот инструмент полностью выполняет алгоритм WCAG 2.x в вашем браузере — без сервера, без учетной записи. Результаты сохраняются локально, поэтому ваша последняя пара цветов будет ждать вас, когда вы вернетесь.

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

Выберите цвет текста с помощью цветового выбора или введите шестнадцатеричный код (например, #1a2b3c) в поле Цвет текста.
Выберите цвет фона таким же образом в поле Цвет фона. Используйте кнопку Обмен, чтобы быстро поменять два цвета.
Прочитайте отображаемое соотношение контрастности в крупном тексте и проверьте четыре значка прохождения/не прохождения: AA и AAA для обычного текста и крупного текста.
Предварительный просмотр того, как ваш текст выглядит на выбранном фоне в разделе Живой предварительный просмотр перед окончательным оформлением вашего дизайна.

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

Этот инструмент проверки контрастности WCAG бесплатен?: Да, полностью бесплатно без регистрации, без платных барьеров и без ограничений на использование. Откройте страницу и сразу начните проверять цвета.
Работает ли он без подключения к интернету?: Да. Все вычисления выполняются полностью в вашем браузере с использованием JavaScript. После загрузки страницы вы можете отключиться от интернета, и инструмент продолжит работать. Никакие данные не отправляются на сервер.
Мои данные о цвете конфиденциальны? Что-нибудь загружается?: Ваши цвета никогда не покидают ваш браузер. Нет анализа цветов, которые вы вводите, нет загрузки, нет обмена с третьими лицами. Ваша последняя пара цветов сохраняется только в localStorage вашего браузера.
В чем разница между WCAG AA и AAA?: AA — это минимальный стандарт, требуемый большинством регуляций (например, ADA, EN 301 549). Обычный текст требует соотношения 4,5:1; крупный текст (24 пикселя или 18,67 пикселей жирный) требует 3:1. AAA — это улучшенная доступность: 7:1 для обычного текста и 4,5:1 для крупного текста. Стремитесь к минимуму AA во всех производственных дизайнах.
Можно ли проверять цвета с использованием сокращенного шестнадцатеричного кода в 3 цифры, например #fff?: Да. Инструмент принимает как сокращенные шестнадцатеричные коды в 3 цифры (#rgb), так и полные шестнадцатеричные коды в 6 цифр (#rrggbb). Просто введите или вставьте свой цвет, и проверка автоматически расширит и проверит его.
Загружает ли этот инструмент мои данные?: Нет. Всё выполняется прямо в вашем браузере, поэтому ваши данные никогда не покидают устройство — после загрузки страницы он работает даже офлайн.