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

Контекст

Дизайнер подготовил новый экран мобильного приложения со светло-серым текстом на белом фоне и хочет убедиться, что он читаем.

Проблема

Необходимо быстро найти элементы, которые не соответствуют базовому стандарту доступности, без ручной проверки каждого цвета пипеткой.

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

Загрузить скриншот макета в поле «Изображение дизайна», выбрать уровень «AA» и включить «Показывать патчи».

Результат

Инструмент генерирует отчет, где нечитаемый светло-серый текст подсвечен красным на тепловой карте, и предлагает более темный оттенок серого для соответствия стандарту AA.

Контекст

Разработчик верстает компонент уведомления с жестко заданными цветами в HTML и должен соблюсти строгий стандарт AAA.

Проблема

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

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

Вставить HTML-код в поле «HTML ввод», выбрать уровень «AAA» и активировать показ патчей.