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

Создает тепловую карту доступности по скриншоту или HTML и предлагает патч-цвета

Загрузите скриншот интерфейса или вставьте HTML с инлайновыми цветами. Инструмент построит тепловую карту вероятных WCAG-рисков и предложит патч-цвета.

Примеры результатов

1 Примеры

Создать тепловую карту по скриншоту с низким контрастом

Подсвечивает рискованные зоны и предлагает патч-цвета.

accessibility-heatmap-example-report.html Показать файл
Показать параметры ввода
{ "htmlInput": "", "designImage": "/public/samples/images/logo.png", "wcagLevel": "AA", "showPatchSuggestions": true }

Click to upload file or drag and drop file here

Maximum file size: 15MB Supported formats: image/png, image/jpeg, image/webp, .png, .jpg, .jpeg, .webp

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

Категория
Дизайн и цвет
Типы входных данных
textarea, file, select, checkbox
Тип результата
file
Покрытие примерами
4
API доступен
Yes

Обзор

Генератор тепловой карты доступности позволяет быстро выявить проблемы с контрастностью в пользовательских интерфейсах. Загрузите скриншот дизайна или вставьте HTML-код с инлайновыми стилями, чтобы получить визуальный отчет с подсвеченными зонами риска по стандартам WCAG (уровни AA или AAA) и рекомендациями по корректировке цветов.

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

  • •Перед передачей макетов в разработку для быстрой проверки контрастности текста и фона.
  • •При аудите существующих веб-страниц или компонентов на соответствие стандартам доступности WCAG.
  • •Для автоматического подбора альтернативных (патч) цветов, если текущая палитра не проходит проверку.

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

  • •Загрузите изображение интерфейса (PNG, JPEG, WEBP) или вставьте HTML-код с инлайновыми цветами.
  • •Выберите требуемый уровень строгости проверки WCAG (AA для 4.5:1 или AAA для 7:1).
  • •Включите опцию показа патчей, чтобы инструмент предложил подходящие цвета для исправления.
  • •Скачайте сгенерированный HTML-отчет с наложенной тепловой картой проблемных зон и списком рекомендаций.

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

Визуальный триаж макетов UI/UX дизайнерами для выявления слабоконтрастных элементов до начала верстки.
Проверка фрагментов HTML-кода email-рассылок или лендингов на читаемость текста.
Подготовка отчетов по доступности (accessibility) для согласования изменений в цветовой палитре бренда.

Примеры

1. Проверка контрастности макета приложения

UI/UX Дизайнер
Контекст
Дизайнер подготовил новый экран мобильного приложения со светло-серым текстом на белом фоне и хочет убедиться, что он читаем.
Проблема
Необходимо быстро найти элементы, которые не соответствуют базовому стандарту доступности, без ручной проверки каждого цвета пипеткой.
Как использовать
Загрузить скриншот макета в поле «Изображение дизайна», выбрать уровень «AA» и включить «Показывать патчи».
Результат
Инструмент генерирует отчет, где нечитаемый светло-серый текст подсвечен красным на тепловой карте, и предлагает более темный оттенок серого для соответствия стандарту AA.

2. Аудит инлайновых стилей компонента

Фронтенд-разработчик
Контекст
Разработчик верстает компонент уведомления с жестко заданными цветами в HTML и должен соблюсти строгий стандарт AAA.
Проблема
Проверить, достаточен ли контраст между фоном и текстом в HTML-коде, и получить готовые значения для исправления.
Как использовать
Вставить HTML-код в поле «HTML ввод», выбрать уровень «AAA» и активировать показ патчей.
Пример конфигурации
Уровень WCAG: AAA, Показывать патчи: true
Результат
В отчете указано, что текущий контраст недостаточен для AAA, и предоставлен скорректированный HEX-код цвета текста, который можно сразу скопировать в код.

Проверить на примерах

html, image, png
Примеры Обработки Изображений Web Python
Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата
preferred input family image
image
Примеры Обработки Изображений Windows C++
Примеры обработки изображений Windows C++ включая чтение/сохранение изображений, изменение размера и преобразование формата с использованием Windows Imaging Component
preferred input family image
image
Примеры Обработки Изображений Web Rust
Примеры обработки изображений Web Rust включая чтение/запись, масштабирование и преобразование форматов
preferred input family image
image
Обработка Изображений macOS Objective-C - Примеры
Примеры обработки изображений macOS Objective-C включая чтение/запись изображений, масштабирование и преобразование формата
preferred input family image
image

Связанные хабы

Инструменты Html для Convert
Изучите 13 инструментов html для сценариев convert и быстро сравните близкие утилиты.
Инструменты Image для Convert
Изучите 100 инструментов image для сценариев convert и быстро сравните близкие утилиты.
Инструменты Image
Изучите 40 инструментов image для сценариев utility и быстро сравните близкие утилиты.
Инструменты Json для Convert
Изучите 100 инструментов json для сценариев convert и быстро сравните близкие утилиты.

FAQ

Какие форматы изображений поддерживаются?

Вы можете загрузить скриншоты в форматах PNG, JPEG и WEBP размером до 15 МБ.

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

Уровень AA требует минимального коэффициента контрастности 4.5:1 для обычного текста, а более строгий уровень AAA — 7:1.

Как работает анализ HTML?

Инструмент сканирует инлайновые стили (color и background-color) в предоставленном HTML-коде, вычисляет их контрастность и выводит проблемные пары.

Что такое патч-цвета?

Это автоматически подобранные альтернативные значения цветов текста или фона, которые позволяют достичь выбранного порога контрастности WCAG.

В каком формате выдается результат?

Результат скачивается в виде файла (HTML-отчета), содержащего визуальную тепловую карту и список найденных проблем с предложенными исправлениями.

Документация API

Конечная точка запроса

POST /ru/api/tools/accessibility-heatmap-generator

Параметры запроса

Имя параметра Тип Обязательно Описание
htmlInput textarea Нет -
designImage file (Требуется загрузка) Нет -
wcagLevel select Нет -
showPatchSuggestions checkbox Нет -

Параметры типа файл должны быть загружены сначала через POST /upload/accessibility-heatmap-generator для получения filePath, затем filePath должен быть передан в соответствующее поле файла.

Формат ответа

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
Файл: Файл

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-accessibility-heatmap-generator": {
      "name": "accessibility-heatmap-generator",
      "description": "Создает тепловую карту доступности по скриншоту или HTML и предлагает патч-цвета",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessibility-heatmap-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Поддерживает ссылки на файлы URL или кодирование Base64 для параметров файла.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]