Что такое стандарты WCAG AA и AAA?

WCAG (Web Content Accessibility Guidelines) — это руководство по доступности веб-контента. Уровень AA требует минимального контраста 4.5:1 для обычного текста, а AAA — 7:1.

Как правильно вводить цвета в инструмент?

Цвета нужно вводить списком, где каждая строка содержит название цвета и его HEX-код, разделенные двоеточием. Например: primary: #2563EB.

Что делать, если пара цветов не прошла проверку?

Инструмент покажет проблемные комбинации в отчете. Вам потребуется сделать светлый цвет еще светлее, а темный — темнее, чтобы увеличить коэффициент контрастности.

Можно ли проверить контраст для крупного текста?

Да, в настройках можно выбрать цели «AA Large Text» (контраст 3:1) или «AAA Large Text» (контраст 4.5:1), которые применяются для шрифтов от 18pt или 14pt bold.

Поддерживаются ли форматы цветов кроме HEX?

В данный момент инструмент оптимизирован для работы с HEX-кодами (например, #FFFFFF или #000000).

Elysia Tools

Навигация

Design

Проверка контраста доступной цветовой палитры

Проверяет пары цветов по WCAG 2.1 AA и AAA и предлагает корректировки

Детали

С чем помогает этот инструмент

Подходит для дизайн-систем, брендовых палитр и тем интерфейса с рекомендациями по улучшению.

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

1 примеров

Проверить фирменную палитру по WCAG AA

Проверяет все сочетания переднего плана и фона и показывает, какие цвета бренда нужно скорректировать

{"summary":{"colorCount":4,"combinationCount":12,"failingCount":4},"recommendations":[{"pair":"brand-secondary on surface"}]}

Ввод

Заполните нужные поля и запустите инструмент.

3 параметров

СодержимоеВставьте или введите основные значения.1

Цвета палитрыtextareaОбязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.1

Цель WCAGselectНеобязательно

ПереключателиВключайте или отключайте дополнительные режимы.1

Включать одинаковые пары цветовcheckboxНеобязательноВключено, если отмечено

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Проверка контраста доступной цветовой палитры

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Аудит базовой палитры бренда

2. Проверка контраста для крупного текста

FAQ

Примеры цветовых кодов

Примеры Обработки Изображений Android Java

Примеры Обработки Изображений Android Kotlin

Примеры Обработки Изображений Web Python

Проверка Доступности Цвета

Проверщик Контрастности Цветов

Проверка цветовой визуальной доступности

Генератор отчета по аудиту доступности

Генераторы CSS-эффектов, палитр и дизайн-токенов

Instrumenty audita web-dostupnosti i proverki chitaemyh cvetov

Инструменты цветового дизайна и преобразования цветовых пространств

Инструменты перевода цветовых пространств для веба и печати