Ключевые факты
- Категория
- Дизайн и цвет
- Типы входных данных
- color, file, select
- Тип результата
- html
- Покрытие примерами
- 4
- API доступен
- Yes
Обзор
Этот инструмент позволяет разработчикам и дизайнерам проверять цветовой контраст по стандартам WCAG и моделировать восприятие интерфейса людьми с нарушениями цветового зрения. Вы можете оценить читаемость текста, загрузить макет для поиска слабоконтрастных зон и убедиться, что ваш дизайн доступен для всех пользователей, включая людей с протанопией, дейтеранопией, тританопией и ахроматопсией.
Когда использовать
- •При выборе цветовой палитры для нового веб-сайта или приложения, чтобы сразу заложить доступные цвета.
- •Перед передачей дизайн-макетов в разработку для проверки локального контраста на сложных фонах.
- •Во время аудита доступности (a11y) существующих интерфейсов на соответствие стандартам WCAG AA или AAA.
Как это работает
- •Укажите цвет переднего плана (текст или иконка) и цвет фона в формате HEX.
- •При необходимости загрузите изображение макета (PNG, JPEG или WEBP) и выберите целевой уровень WCAG (AA или AAA).
- •Инструмент рассчитает базовый коэффициент контрастности и покажет, проходит ли пара проверку для обычного и крупного текста.
- •Вы получите визуальный отчет с симуляцией различных видов цветовой слепоты и пересчитанным контрастом, а на загруженном макете будут подсвечены проблемные зоны.
Сценарии использования
Примеры
1. Проверка контраста основной кнопки
UI/UX Дизайнер- Контекст
- Дизайнер создает новую дизайн-систему и хочет убедиться, что белый текст на синем фоне кнопки доступен для всех пользователей.
- Проблема
- Нужно проверить соответствие контраста стандарту WCAG AA и убедиться, что текст на кнопке читается при цветовой слепоте.
- Как использовать
- Введите цвет текста в поле «Цвет переднего плана» и цвет кнопки в «Цвет фона», затем выберите уровень WCAG AA.
- Пример конфигурации
-
{ "foreground": "#ffffff", "background": "#2563eb", "wcagLevel": "AA" } - Результат
- Инструмент показывает коэффициент контрастности и подтверждает, что пара проходит стандарт AA. Карточки симуляции показывают, как кнопка выглядит при протанопии и дейтеранопии.
2. Поиск проблемных зон на макете лендинга
Специалист по доступности (a11y)- Контекст
- Команда подготовила макет лендинга с текстом поверх фотографий. Есть сомнения, что текст везде читается хорошо.
- Проблема
- Быстро найти участки на макете, где контраст текста и фона падает ниже допустимого уровня.
- Как использовать
- Загрузите скриншот лендинга в поле «Изображение макета» и установите уровень WCAG AAA для строгой проверки.
- Пример конфигурации
-
{ "designImage": "landing_page_mockup.webp", "wcagLevel": "AAA" } - Результат
- Инструмент анализирует изображение и накладывает метки на те плитки макета, где локальный контраст ниже 7:1, указывая на необходимость затемнить фон под текстом.
Проверить на примерах
image, png, jpgСвязанные хабы
FAQ
В чем разница между уровнями WCAG AA и AAA?
Уровень AA требует контраста 4.5:1 для обычного текста и 3:1 для крупного. Уровень AAA более строгий: 7:1 для обычного и 4.5:1 для крупного текста.
Зачем нужна симуляция цветовой слепоты?
Некоторые цветовые сочетания, которые отлично выглядят при нормальном зрении, могут сливаться для людей с дальтонизмом. Симуляция помогает выявить такие риски и пересчитать контраст для каждого случая.
Как работает анализ изображения макета?
Инструмент разбивает загруженный скриншот на участки и измеряет локальный контраст. Зоны, не дотягивающие до выбранного порога WCAG, помечаются специальными метками.
Что считается крупным текстом по стандартам WCAG?
Крупным считается текст размером от 18pt (или 14pt, если он полужирный). Для него требования к минимальному контрасту ниже, чем для основного текста.
Какие форматы изображений поддерживаются для анализа?
Вы можете загрузить скриншоты или макеты в форматах PNG, JPEG и WEBP размером до 10 МБ.