Симулятор дальтонизма
Посмотрите, как любое изображение видят люди с протанопией, дейтеранопией, тританопией или ахроматопсией — рядом с оригиналом, с настраиваемой степенью.
Симулятор дальтонизма работает полностью в вашем браузере через canvas. Ваши изображения обрабатываются на вашем устройстве и никогда не загружаются.
Открыть проверку контраста
Об инструменте Симулятор дальтонизма
Симулятор дальтонизма показывает ваш график, интерфейс или фотографию глазами примерно 8% мужчин и 0,5% женщин с нарушением цветового зрения. Загрузите изображение, выберите тип зрения — распространённые красно-зелёные формы дейтеранопия и протанопия, редкую сине-жёлтую тританопию или ахроматопсию без цвета вовсе — и сравните результат бок о бок с оригиналом. Симуляция использует физиологически обоснованные матрицы преобразования Мачадо, применяемые в линейном свете с правильной обработкой гаммы. Ползунок степени охватывает гораздо более распространённые частичные нарушения. Если ваши состояния ошибки и успеха отличаются только цветом — красным против зелёного, — тридцать секунд здесь точно покажут вам, что не может увидеть пользователь с дальтонизмом.
Возможности
- Протанопия, дейтеранопия, тританопия и ахроматопсия
- Физиологически обоснованные матрицы симуляции в линейном свете
- Ползунок степени от лёгкой аномалии до полной дихромазии
- Просмотр оригинала и симуляции бок о бок
- Указана распространённость для каждого типа зрения
- Скачивание симулированного изображения для проверок
Как использовать Симулятор дальтонизма
- Загрузите скриншот, график или дизайн
- Выберите тип зрения для симуляции
- Настройте степень для частичных нарушений
- Сравните панели и при необходимости скачайте результат
Пример
Ввод
Dashboard with red error and green success badges
Результат
Under deuteranopia both badges render as the same murky ochre
Классическая красно-зелёная ошибка — незаметна, пока не посмотришь правильными глазами.
Частые ошибки и устранение неполадок
- Симулированное изображение выглядит почти без изменений. — Изображения с преобладанием синих, жёлтых и нейтральных тонов хорошо переносят красно-зелёные нарушения — это успешная проверка, а не сбой. Проверьте экраны, которые полагаются на красный и зелёный для передачи смысла.
- При ахроматопсии всё серое — не слишком ли крайний случай? — Полная ахроматопсия действительно убирает весь цветовой тон и встречается крайне редко. Используйте её как предельную проверку контраста: то, что выживает в градациях серого, выживает везде.
- Результаты немного отличаются от другого симулятора. — Некоторые инструменты применяют матрицы напрямую к закодированным значениям пикселей без коррекции гаммы. Этот сначала линеаризует данные — метод, соответствующий опубликованным исследованиям; различия проявляются в основном в тёмных областях.
Часто задаваемые вопросы
- Что означают разные типы дальтонизма?
- При протанопии отсутствуют красные колбочки, при дейтеранопии — зелёные; оба нарушения смешивают красный и зелёный и встречаются примерно у 1% мужчин каждое, а более мягкие аномальные формы гораздо более распространены. Тританопия затрагивает сине-жёлтую ось и встречается редко; ахроматопсия убирает цвет полностью.
- Насколько распространён дальтонизм?
- Примерно у 8% мужчин и 0,5% женщин есть та или иная красно-зелёная недостаточность — это примерно каждый двенадцатый мужчина среди пользователей всего, что вы создаёте.
- Насколько точна эта симуляция?
- Она использует матрицы Мачадо, Оливейры и Фернандеса из исследований зрения, применяемые в линейном RGB с правильным преобразованием гаммы — это стандартный подход для предпросмотра дихромазии.
- Как сделать дизайн понятным для людей с дальтонизмом?
- Цвет никогда не должен быть единственным сигналом: дополняйте его иконками, подписями или узорами. Держите контраст текста на уровне 4,5:1 или выше и предпочитайте сине-оранжевые палитры красно-зелёным в графиках.
Связанные инструменты
- Палитра цветов из изображения — Доминирующий цвет и палитра в HEX, RGB, HSL, CSS и Tailwind
- Конвертер цветовых форматов — Показывает цвет как HEX, RGB, HSL, OKLCH и другие сразу
- Пипетка цвета из изображения — Наводите и кликайте по изображению, чтобы получить HEX, RGB и HSL.
- Проверка контраста — Проверяйте коэффициент контраста WCAG и соответствие AA/AAA между двумя цветами.
- Замазать фото — Навсегда размыть, запикселить или закрасить части скриншота.
- Скругление углов изображения — Скруглённые углы или круг, экспорт прозрачного PNG.
Все инструменты ArrayKit