Эта проверка контраста измеряет коэффициент цветовой контрастности WCAG между любыми двумя цветами и мгновенно сообщает, проходят ли они уровни доступности AA или AAA. Введите цвет переднего плана (текста) и цвет фона как hex или rgb/rgba либо выберите их с помощью встроенных образцов цвета, и инструмент вычислит точный коэффициент плюс вердикты прохождения для обычного и крупного текста. Он создан для разработчиков, дизайнеров и QA-инженеров, которым нужна быстрая проверка коэффициента контрастности цвета при создании доступных интерфейсов, дизайн-систем или маркетинговых страниц. Живой предпросмотр рендерит образец текста в выбранных вами цветах, чтобы вы могли оценить читаемость с первого взгляда и рано выявить проблемы контраста доступности. Всё работает локально в вашем браузере, поэтому ваши значения цветов обрабатываются на устройстве и ничего не загружается на сервер.
Возможности
Вычисляет точный коэффициент контрастности WCAG 2.x между двумя цветами
Принимает форматы цвета hex (3 или 6 знаков), rgb() и rgba()
Показывает прохождение AA для обычного текста (4.5:1) и крупного текста (3:1)
Показывает прохождение AAA для обычного текста (7:1) и крупного текста (4.5:1)
Нативные образцы выбора цвета для переднего плана и фона
Живой предпросмотр, рендерящий образец текста в выбранных цветах
Понятное сообщение проверки, когда значение цвета не удаётся разобрать
Как использовать Проверка контраста
Введите цвет текста в поле «Передний план (текст)» или выберите его с помощью образца цвета.
Введите цвет фона в поле «Фон» или используйте его образец.
Читайте коэффициент контрастности, показанный над значками вердикта.
Проверьте значки прохождения AA и AAA для обычного и крупного текста.
Пример
Ввод
Передний план (текст): #777777
Фон: #ffffff
Результат
коэффициент контрастности: 4.48
AA · обычный текст (4.5:1): Не пройдено
AA · крупный текст (3:1): Пройдено
AAA · обычный текст (7:1): Не пройдено
AAA · крупный текст (4.5:1): Не пройдено
Средне-серый на белом едва не проходит AA для обычного текста.
Частые ошибки и устранение неполадок
Вставка имени CSS-цвета вроде «red» или «rebeccapurple» возвращает ошибку недопустимого цвета. — Используйте hex-значение (например #ff0000) или rgb()/rgba() вместо именованных цветов.
8-значный hex с альфой (#rrggbbaa) отклоняется как недопустимый цвет. — Уберите альфа-канал и укажите 6-значный hex; проверка читает только непрозрачные цвета.
Текст проходит AA для крупного, но не проходит AA для обычного, и вы не уверены, что применимо. — Крупный текст означает примерно 18pt+ (или 14pt+ жирным); основной текст должен соответствовать более строгому порогу 4.5:1 для обычного.
Значение альфы в rgba() не меняет коэффициент контрастности. — Коэффициент вычисляется только по каналам RGB, поэтому сведите прозрачность к реальному цвету фона перед проверкой.
Часто задаваемые вопросы
Что такое проверка контраста и почему важен коэффициент WCAG?
Проверка контраста сравнивает два цвета и сообщает коэффициент контрастности WCAG между ними, который предсказывает, насколько читаемым будет текст. Проверка контраста ArrayKit показывает точный коэффициент плюс вердикты AA и AAA, чтобы вы могли подтвердить, что текст читаем для пользователей со слабым зрением.
Какой коэффициент контрастности нужен для прохождения WCAG?
WCAG AA требует не менее 4.5:1 для обычного текста и 3:1 для крупного текста, а AAA требует 7:1 для обычного текста и 4.5:1 для крупного текста. Проверка контраста показывает все четыре вердикта сразу.
Как проверить коэффициент контрастности для моего текста и фона?
Введите цвет текста в поле «Передний план» и цвет фона в поле «Фон» (hex, rgb или rgba) или используйте образцы. Проверка контраста обновляет коэффициент и значки AA/AAA вживую по мере ввода.
Что считается крупным текстом для порога 3:1?
Крупный текст — это обычно примерно от 18pt, или от 14pt при жирном начертании. Всё меньше считается обычным текстом и должно соответствовать более высокому коэффициенту 4.5:1.
Учитывает ли коэффициент контрастности прозрачность?
Нет. Коэффициент основан на сплошных значениях RGB, поэтому сведите любой полупрозрачный цвет к его реальному фону перед проверкой в проверке контраста.
Отправляются ли куда-либо цвета, которые я ввожу в проверке контраста?
Нет. Проверка контраста работает полностью в вашем браузере, поэтому введённые цвета остаются на вашем устройстве и ничего не загружается на сервер.
Связанные инструменты
Конвертер цветов CSS — Преобразуйте между HEX, RGB и HSL с живым образцом цвета.
Форматировщик CSS / SCSS — Форматируйте или минифицируйте CSS/SCSS/LESS, сортируйте свойства и убирайте дубликаты.
Оптимизатор SVG — Минифицирует SVG: удаляет комментарии, метаданные и остатки редактора, сжимает пробелы.
Форматировщик HTML — Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.
Оптимизатор изображений — Перекодируйте и уменьшайте изображения (JPEG/WebP/PNG) с опциональным изменением размера.
Генератор Open Graph — Генерируйте мета-теги Open Graph и Twitter с предпросмотром социальной карточки.
Предпросмотр Markdown — Преобразуйте Markdown в HTML с предпросмотром в реальном времени.
Другие инструменты: Форматировщики кода
Рендер диаграмм Mermaid — Рендерит диаграммы Mermaid (поток, последовательность, gantt) в SVG в вашем браузере.
Оптимизатор SVG — Минифицирует SVG: удаляет комментарии, метаданные и остатки редактора, сжимает пробелы.