Softonic

Симулятор дальтонизма

Шаг 1 / 3 Тип симуляции

Около 8% мужчин и 0,5% женщин имеют ту или иную форму нарушения цветового зрения, чаще всего красно-зеленую. Загрузите дизайн, снимок экрана или иллюстрацию, выберите один режим симуляции и сравните оригинал с результатом рядом. Это помогает проверить, остаются ли диаграмма, карта или интерфейс понятными без опоры только на цвет.

Как работает симулятор

  1. 1

    Вставьте изображение

    PNG, JPG, WebP или SVG. Обрабатывается в браузере, ничего не загружается.

  2. 2

    Выберите режим симуляции

    Выберите протанопию, протаномалию, дейтеранопию, дейтераномалию, тританопию, тританомалию, ахроматопсию или ахроматомалию.

  3. 3

    Параллельный предварительный просмотр

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

  4. 4

    Экспортируйте симулированное изображение

    Скачайте выбранную симуляцию в PNG или сделайте снимок сравнения для обзора дизайна.

Формы нарушения цветового зрения

Состояние Распространенность Характеристика
Дейтераномалия ~5% мужчин Красно-зеленая аномалия, М-конус смещен
Протаномалия ~1% мужчин Красно-зеленая аномалия, L-конус сдвинут
Дейтеранопия ~1% мужчин М-конус отсутствует, красно-зеленый едва различим
Протанопия ~1% мужчин L-конус отсутствует, восприятие красного смещено
Тританопия очень редкая S-конус отсутствует, сине-желтая ось свернута
Тританомалия очень редкая S-конус смещен, умеренная сине-желтая потеря
Ахроматопсия крайне редко Полный дальтонизм, только оттенки серого

Большинство дизайнеров начинают с дейтеранопии и протанопии, потому что красно-зеленые нарушения встречаются чаще всего, а затем добавляют аномальные и сине-желтые режимы для более широкой проверки.

Последствия проектирования

  • Не полагайтесь только на красный/зеленый цвет для различения состояний. Для индикаторов ошибок/успехов помимо цвета требуется фигура, значок или текстовая метка. Красный крестик и зеленая галочка заметно отличаются; красные и зеленые круги, нет.
  • Диаграммы: используйте заливку узором, прямые метки или разные по восприятию палитры (ColorBrewer, Viridis). Избегайте светофорной палитры для визуализации данных.
  • Карты: границы и штриховка для различения регионов; только цвет не поможет.
  • Гиперссылки: стиль никогда не определяется только цветом. Подчеркивание или вес помогают всем, включая людей с нормальным цветовым зрением.
  • Обязательные поля формы: красная звездочка и метка «Обязательно» или красная рамка и вспомогательный текст «Обязательно».
  • Индикаторы состояния: красный/желтый/зеленый светофор работает как подкрепление, а не как единственный сигнал.

Хороший выбор палитры для создания безопасного цвета

  • Viridis (используется по умолчанию в matplotlib, D3): от фиолетового до желтого, единообразный по восприятию.
  • Качество ColorBrewer: 8 различных оттенков, разработанных таким образом, чтобы их можно было различить при распространённых формах нарушений цветового зрения.
  • Окабе-Ито: 8-цветная палитра, специально разработанная для людей с дальтонизмом.

Инструменты и тестирование

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

Интересный факт

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

Часто задаваемые вопросы

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

Дейтераномалия охватывает большую часть пользователей с дальтонизмом (~ 5% мужчин). Тестирование на дейтеранопию (тяжелую форму) является консервативной проверкой: если конструкция работает здесь, она работает и для более легкой аномалии.

Да, но гораздо реже (~0,5%). Дефицит красного и зеленого является рецессивным, сцепленным с Х-хромосомой, поэтому мужчинам (XY) нужен только один пораженный Х; женщинам (XX) нужно и то, и другое. Тританопия является аутосомным заболеванием и одинаково поражает представителей обоих полов.

Не непосредственно в этом инструменте, это обычная симуляция слабого зрения, которая также включает в себя размытие и уменьшение контрастности. Для полной имитации доступности для этого используются специальные инструменты, такие как Chrome Lighthouse или NoCoffee.

Сопутствующие инструменты

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Изменение размера изображений

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

WebP в JPG

Конвертируйте изображения WebP в JPG/JPEG прямо в браузере. Выберите качество, объедините прозрачность с цветом фона и скачайте без загрузки файлов на сервер.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Генератор штрихкодов

Создавайте Code 128, EAN-13, UPC, ITF-14 и еще семь линейных штрихкодов. Данные остаются в браузере, результат можно скачать в SVG или PNG.