# Проверка цветовой визуальной доступности Измеряет контраст WCAG, моделирует основные нарушения цветового зрения и помечает слабоконтрастные зоны. > Каноническая страница: https://elysiatools.com/ru/tools/color-vision-accessibility-checker - **Категория:** Design - **Ключевые слова:** цветовая слепота, доступность, wcag, контраст ## Обзор Этот инструмент проверяет не только соответствие контраста нормам, но и то, как одна и та же цветовая пара выглядит при разных нарушениях цветового зрения. Что означают метки: - AA normal: проходит ли пара цветов уровень WCAG AA для обычного текста. Порог составляет 4.5:1. - AAA normal: проходит ли пара цветов уровень WCAG AAA для обычного текста. Порог составляет 7:1. Почему это важно: - Под normal понимаются обычный текст интерфейса, небольшие подписи и основная UI-копия. - Для крупного текста пороги ниже: AA large проходит при 3:1, AAA large при 4.5:1. - Поэтому цветовая пара может не пройти AAA normal, но все еще быть приемлемой для крупных заголовков или жирного большого текста. Поля: - Цвет переднего плана: текст, иконка или основной UI-цвет поверх фона - Цвет фона: поверхность, на которой размещен передний план - Изображение макета: необязательный скриншот для анализа локальных зон с низким контрастом - Уровень WCAG: задает порог, по которому помечаются проблемные области на изображении Как читать результат: - Карточки Normal / Protanopia / Deuteranopia / Tritanopia / Achromatopsia показывают внешний вид пары при каждой симуляции. - После каждой симуляции контраст пересчитывается заново, чтобы показать, не становится ли безопасная пара рискованной для других пользователей. - Анализ скриншота отмечает плитки, где локальный контраст ниже выбранного порога WCAG. ## Входные данные - **Цвет переднего плана** (color) - **Цвет фона** (color) - **Изображение макета** (file) - **Уровень WCAG** (select) ## Когда использовать - При выборе цветовой палитры для нового веб-сайта или приложения, чтобы сразу заложить доступные цвета. - Перед передачей дизайн-макетов в разработку для проверки локального контраста на сложных фонах. - Во время аудита доступности (a11y) существующих интерфейсов на соответствие стандартам WCAG AA или AAA. ## Как это работает - Укажите цвет переднего плана (текст или иконка) и цвет фона в формате HEX. - При необходимости загрузите изображение макета (PNG, JPEG или WEBP) и выберите целевой уровень WCAG (AA или AAA). - Инструмент рассчитает базовый коэффициент контрастности и покажет, проходит ли пара проверку для обычного и крупного текста. - Вы получите визуальный отчет с симуляцией различных видов цветовой слепоты и пересчитанным контрастом, а на загруженном макете будут подсвечены проблемные зоны. ## Сценарии использования - Проверка читаемости кнопок призыва к действию (CTA) и текстовых ссылок на светлых и темных фонах. - Тестирование графиков и диаграмм, чтобы убедиться, что разные сектора различимы для пользователей с дальтонизмом. - Автоматизированный поиск нечитаемого текста поверх фоновых изображений или градиентов на готовых скриншотах. ## Частые вопросы ### В чем разница между уровнями WCAG AA и AAA? Уровень AA требует контраста 4.5:1 для обычного текста и 3:1 для крупного. Уровень AAA более строгий: 7:1 для обычного и 4.5:1 для крупного текста. ### Зачем нужна симуляция цветовой слепоты? Некоторые цветовые сочетания, которые отлично выглядят при нормальном зрении, могут сливаться для людей с дальтонизмом. Симуляция помогает выявить такие риски и пересчитать контраст для каждого случая. ### Как работает анализ изображения макета? Инструмент разбивает загруженный скриншот на участки и измеряет локальный контраст. Зоны, не дотягивающие до выбранного порога WCAG, помечаются специальными метками. ### Что считается крупным текстом по стандартам WCAG? Крупным считается текст размером от 18pt (или 14pt, если он полужирный). Для него требования к минимальному контрасту ниже, чем для основного текста. ### Какие форматы изображений поддерживаются для анализа? Вы можете загрузить скриншоты или макеты в форматах PNG, JPEG и WEBP размером до 10 МБ. ## Связанные инструменты - [Проверка доступности](https://elysiatools.com/ru/tools/accessibility-checker): Находит типовые проблемы WCAG 2.1 в HTML, страницах или макетах и возвращает рекомендации по исправлению - [Извлечение палитры из изображения](https://elysiatools.com/ru/tools/image-color-palette-extractor): Загружает изображение, извлекает доминирующие цвета и экспортирует токены для кода с проверкой контраста - [Анализатор изображений VP8](https://elysiatools.com/ru/tools/vp8-image-analyzer): Анализирует WebP/VP8 через Sharp, создает grayscale displacement map и рендерит 3D-рельеф в Three.js - [Генератор heatmap доступности](https://elysiatools.com/ru/tools/accessibility-heatmap-generator): Создает тепловую карту доступности по скриншоту или HTML и предлагает патч-цвета - [Экстрактор Каналов Изображения](https://elysiatools.com/ru/tools/image-channel): Извлекает, манипулирует и анализирует отдельные цветовые каналы (RGB, Alpha, Яркость) с профессиональными опциями обработки - [Извлекатель Цветов Изображения](https://elysiatools.com/ru/tools/image-color-extractor): Извлекает доминирующие цвета из изображений с использованием различных алгоритмов, включая k-means кластеризацию и анализ гистограмм - [Палитра из изображения в design-токены](https://elysiatools.com/ru/tools/image-to-design-tokens): Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков - [Кинематографическая Цветокоррекция](https://elysiatools.com/ru/tools/image-cinematic-color): Примените профессиональную кинематографическую цветокоррекцию к вашим изображениям. ## Примеры - [Примеры Обработки Изображений 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 Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата - [Примеры Обработки Изображений Web Rust](https://elysiatools.com/ru/samples/web-image-processing-rust): Примеры обработки изображений Web Rust включая чтение/запись, масштабирование и преобразование форматов ## Связанные материалы - [Генераторы CSS-эффектов, палитр и дизайн-токенов](https://elysiatools.com/ru/hubs/design-generate): Подборка инструментов для CSS-визуальных эффектов, построения палитр и генерации дизайн-токенов в одном хабе. - [Instrumenty audita web-dostupnosti i proverki chitaemyh cvetov](https://elysiatools.com/ru/hubs/web-accessibility-audits): Proveryayte problemy WCAG, porjadok chteniya dlya screen reader, oshibki kontrasta, riski dlya narushenij cvetovogo zreniya i dostupnye cvetovye resheniya v odnom hube dlya web-accessibility workflow. - [Инструменты конвертации форматов изображений и анимированного экспорта](https://elysiatools.com/ru/hubs/image-convert): Сравните конвертеры JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 и инструменты экспорта анимированных изображений в одном хабе. - [Инструменты для очистки, оформления и пакетной подготовки изображений](https://elysiatools.com/ru/hubs/image-utility): Соберите в одном хабе инструменты для очистки изображений, обрезки, добавления полей и рамок, пакетного изменения размера и сжатия, водяных знаков и финальной визуальной подготовки.