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

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

> Каноническая страница: https://elysiatools.com/ru/tools/accessibility-heatmap-generator

- **Категория:** Design

- **Ключевые слова:** доступность, тепловая карта, wcag, контраст

## Обзор

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

## Входные данные

- **HTML ввод** (textarea): Low contrast text
- **Изображение дизайна** (file)
- **Уровень WCAG** (select)
- **Показывать патчи** (checkbox)

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

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

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

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

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

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

## Частые вопросы

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

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

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

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

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

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

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

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

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

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

## Связанные инструменты

- [Генератор PDF-счетов](https://elysiatools.com/ru/tools/pdf-invoice-generator): Создает брендированный PDF-счет из структурированных позиций
- [Генератор Data URI](https://elysiatools.com/ru/tools/data-uri-generator): Преобразует файлы в Data URI (Base64 или процентное кодирование) для встраивания изображений, шрифтов и ресурсов прямо в HTML, CSS или Markdown
- [Генератор Карты Глубины](https://elysiatools.com/ru/tools/image-depth-map): Создает карты глубины из изображений, используя анализ яркости, насыщенности и краев. Создает карты глубины в градациях серого, где более светлые пиксели указывают на близкие объекты, а более темные - на дальние.
- [Генератор Параллакс-Анимации](https://elysiatools.com/ru/tools/image-parallax): Создает параллакс-анимации из изображений. Создает анимацию на основе глубины, где разные слои движутся с разной скоростью, создавая 3D эффект.
- [Палитра из изображения в design-токены](https://elysiatools.com/ru/tools/image-to-design-tokens): Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков
- [Генератор Красно-Цианового Анаглифа 3D](https://elysiatools.com/ru/tools/image-anaglyph): Создает красно-циановые анаглифы 3D из обычных фотографий. Создает стереоскопические 3D изображения, видимые через красно-циановые 3D очки.
- [Генератор Фото-Мозаики](https://elysiatools.com/ru/tools/image-mosaic-generator): Создавайте потрясающие фото-мозаики, комбинируя сотни маленьких изображений для создания одного большого основного изображения. Cada плитка тщательно подбирается в соответствии с цветами нижележащего изображения.
- [Генератор SVG Favicon](https://elysiatools.com/ru/tools/svg-favicon-generator): Преобразует SVG или растровый логотип в полный набор favicon с ICO, PNG-версиями, Apple touch icon и web manifest

## Примеры

- [Примеры Обработки Изображений Web Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата
- [Примеры Обработки Изображений Android Java](https://elysiatools.com/ru/samples/android-image-processing-java): Примеры обработки изображений Android Java включая чтение/сохранение, масштабирование и преобразование формата
- [Примеры Обработки Изображений Android Kotlin](https://elysiatools.com/ru/samples/android-image-processing-kotlin): Примеры обработки изображений Android Kotlin включая чтение/сохранение, масштабирование и преобразование формата
- [Примеры Обработки Изображений Web Rust](https://elysiatools.com/ru/samples/web-image-processing-rust): Примеры обработки изображений Web Rust включая чтение/запись, масштабирование и преобразование форматов

## Связанные материалы

- [Аудит веб-доступности перед публикацией](https://elysiatools.com/ru/hubs/web-accessibility-audits): Проверьте структуру страницы или UI-компонента, порядок чтения, контраст на скриншотах и риски для цветового зрения, а затем оформите автоматические находки в запись с ручной проверкой.