Симулятор дальтонизма
Загрузите изображение и посмотрите, как оно выглядит при протанопии, дейтеранопии, тританопии или полной цветовой слепоте, а затем скачайте смоделированный результат.
Симулятор дальтонизма — Перетащите изображение и мгновенно увидите, как его воспринял бы человек с красной слепотой (протанопия), зелёной слепотой (дейтеранопия), синей слепотой (тританопия) или полной цветовой слепотой (ахроматопсия). Симуляция выполняется полностью в вашем браузере на canvas, пиксель за пикселем — изображение никогда не загружается ни на один сервер, поэтому даже приватные макеты и скриншоты остаются на вашем устройстве. Выберите тип, сравните оригинал с результатом бок о бок и скачайте смоделированный PNG.
Что такое Симулятор дальтонизма?
Симулятор дальтонизма — это бесплатный браузерный инструмент, который заново отрисовывает изображение так, как его воспринимал бы человек с конкретным нарушением цветового зрения. Он поддерживает три распространённые дихромазии — протанопию (слабость к красному), дейтеранопию (слабость к зелёному) и тританопию (слабость к синему) — а также ахроматопсию, полностью монохромное (в оттенках серого) представление. Дизайнеры, разработчики и специалисты по доступности используют его, чтобы проверить, остаются ли понятными диаграммы, состояния интерфейса, цвета статусов и инфографика, когда смысл несёт один лишь цвет. Поскольку примерно у одного из двенадцати мужчин есть та или иная форма нарушения цветового зрения, моделирование этих представлений перед публикацией помогает выявить дизайн, который слишком сильно полагается на цветовой контраст, исчезающий для части вашей аудитории.
Как пользоваться Симулятор дальтонизма
- Перетащите изображение в область загрузки или щёлкните по ней, чтобы выбрать файл PNG, JPG или WebP с вашего устройства.
- Откройте выпадающий список «Тип цветового зрения» и выберите Протанопию, Дейтеранопию, Тританопию или Ахроматопсию (выберите «Нет», чтобы увидеть неизменённый оригинал).
- Смоделированный предпросмотр обновляется автоматически рядом с оригиналом, чтобы вы могли сравнить их бок о бок.
- Щёлкните по любому предпросмотру, чтобы открыть его в масштабируемом лайтбоксе и рассмотреть детали вблизи.
- Нажмите «Скачать», чтобы сохранить смоделированное изображение в формате PNG, или «Сбросить», чтобы очистить его и попробовать другое изображение.
Примеры
Проверка красно-зелёного значка статуса
Загрузите скриншот интерфейса, в котором красный означает 'error', а зелёный — 'success', выберите Дейтеранопию и понаблюдайте, как оба цвета сближаются к похожему мутному тону — это сигнал, что стоит добавить значки или подписи, а не полагаться на один лишь цвет.
Проверка диаграммы данных
Загрузите многосерийный линейный или круговой график, переключайтесь между Протанопией и Тританопией и убедитесь, что каждая серия остаётся различимой; если линии сливаются, измените палитру или добавьте узоры.
Тест читаемости в полностью серых тонах
Выберите Ахроматопсию, чтобы свести изображение только к яркости; если текст или ключевые элементы исчезают, ваш дизайн опирается на оттенок, а не на контраст яркости.
Часто задаваемые вопросы
- Какие виды дальтонизма он может моделировать?
- Он моделирует протанопию (красная слепота), дейтеранопию (зелёная слепота) и тританопию (синяя слепота) с помощью стандартных матриц преобразования RGB, а также ахроматопсию, которая преобразует изображение в оттенки серого на основе яркости. Выбор «Нет» оставляет исходное изображение без изменений.
- Загружается ли моё изображение на сервер?
- Нет. Вся симуляция происходит локально в вашем браузере с помощью HTML-canvas — файл никогда не покидает ваше устройство, и ничего не отправляется ни на один сервер, поэтому инструмент работает офлайн и сохраняет приватные изображения приватными.
- Какие форматы изображений и вывод я могу использовать?
- Вы можете загружать распространённые растровые изображения, такие как PNG, JPG и WebP. Смоделированный результат всегда экспортируется в PNG, чтобы при наличии сохранялась прозрачность.
- Насколько точна симуляция?
- Она использует хорошо известные линейные приближения цветовых матриц, которые отлично подходят для выявления проблем с зависимостью от цвета в интерфейсах и графике. Это практичное подспорье для дизайна, а не клинический или медицинский диагностический инструмент, поэтому относитесь к результату как к ориентиру, а не как к точному воспроизведению зрения конкретного человека.
- Почему смоделированные цвета выглядят приглушёнными или смещёнными?
- Каждое нарушение удаляет или ослабляет отклик одного типа колбочек, поэтому цвета, зависящие от этого канала, смещаются к оставшимся. Именно это слияние различных оттенков в похожие тона и есть тот эффект, который вы хотите обнаружить перед публикацией.
Похожие инструменты
Код в изображение
Превратите фрагмент кода в аккуратную PNG-карточку с подсветкой синтаксиса прямо в браузере — с темой, градиентным или прозрачным фоном и отступами, без загрузки на сервер.
Проверка цветового контраста
Проверьте коэффициент контраста WCAG между HEX-цветом текста и фона и узнайте, проходит ли он AA и AAA для обычного и крупного текста.
Смеситель цветов
Смешивайте два HEX-цвета в выбранной пропорции в цветовом пространстве RGB или Lab и считывайте полученный промежуточный цвет в виде образца и копируемого HEX-значения.
Генератор оттенков цвета
Превратите один базовый цвет HEX в шкалу оттенков 50-950 в стиле Tailwind, смешивая его с белым и чёрным; каждая ступень с образцом и копируемым HEX.