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

Подивіться на своє зображення очима людини з порушенням колірного зору. Оберіть тип, перегляньте та завантажте результат. Усе працює у вашому браузері.

Як працює Симулятор дальтонізму

Симулятор колірної сліпоти застосовує матриці перетворення кольорів до вашого зображення, щоб показати, як воно виглядає для людей із протанопією (нечутливість до червоного), дейтеранопією (нечутливість до зеленого), тританопією (нечутливість до синього) або ахроматопсією (повна колірна сліпота). Матриці застосовуються піксель за пікселем за допомогою Canvas.getImageData() та Canvas.putImageData() у браузері. Дані зображення не передаються на сервер.

Симуляції засновані на опублікованих перцептивних моделях, похідних від досліджень дефіциту кольорового зору. Вони є наближеннями того, як зорова система людини з відповідним порушенням обробляє колір, а не точними відтвореннями індивідуального досвіду, який варіюється. Інструмент розроблений для допомоги дизайнерам та розробникам виявляти проблеми контрасту або кодування кольорів, які вплинуть на значну частку аудиторії: близько 8 відсотків чоловіків і 0,5 відсотка жінок мають певну форму дефіциту кольорового зору.

Автор: Bastien Sulyan

Симулятор дальтонізму: покрокова інструкція

Перетягніть зображення на область завантаження або натисніть, щоб вибрати.
Виберіть тип дефіциту кольорового зору з меню: протанопія, дейтеранопія, тританопія або ахроматопсія.
Перегляньте симульований результат поруч з оригіналом на панелі порівняння.
Перемикайтесь між типами симуляції, щоб порівняти, як кожен стан впливає на зображення.
Використовуйте режим «пліч-о-пліч», щоб ідентифікувати ділянки, де лише колір передає інформацію, яка може бути втрачена.

Поширені сценарії використання

UI-дизайнер перевіряє, чи розрізняє індикатор стану червоний-зелений користувачам із дейтеранопією перед відправкою функції.
Автор візуалізації даних перевіряє, що багаторядковий графік із кольоровими серіями залишається читабельним у симуляції протанопії.
Бренд-дизайнер оцінює, як логотип із градієнтними кольорами читається при ахроматопсії, щоб переконатися, що він зберігає впізнавану форму та контраст.
Розробник гри перевіряє, чи розрізняються кольоровані зони карти для гравців із тританопією, і додає заповнення візерунком для доповнення кодування кольором.

Поширені запитання

Наскільки точними є симуляції колірної сліпоти?

Симуляції застосовують матриці перцептивного перетворення, похідні від опублікованих досліджень дефіциту кольорового зору. Вони є науково обґрунтованими наближеннями типових випадків кожного стану. Індивідуальний досвід варіюється: тяжкість відрізняється між людьми з однаковим діагнозом, і симуляція не може враховувати компенсаторні стратегії, які розвивають деякі користувачі. Сприймайте вихід як корисний індикатор, а не як остаточний тест.

Чи охоплює інструмент усі типи колірної сліпоти?

Чотири охоплені типи є найпоширенішими формами дефіциту кольорового зору та повної колірної сліпоти. Типи аномальної трихроматії (протаномалія, дейтераномалія, тританомалія), що представляють часткові дефіцити, окремо не моделюються в поточній версії.

Чи аналізується зображення на сервері для отримання симуляції?

Ні. Перетворення колірної матриці обчислюється локально за допомогою Canvas.getImageData() для зчитування масиву пікселів та Canvas.putImageData() для запису результату. Уся обробка відбувається у вкладці браузера, і дані зображення залишаються на пристрої.

Чи можна використовувати цей інструмент для перевірки коефіцієнтів контрасту кольорів?

Цей інструмент показує, як кольори виглядають для людей із дефіцитом кольорового зору, але не обчислює чисельно коефіцієнти контрасту WCAG. Для чисельної перевірки контрасту використовуйте інструмент «Конвертер кольорів», який включає перевірку контрасту WCAG.

Чи працює інструмент із зображеннями, що містять текст?

Так. Перетворення застосовується до всього масиву пікселів, включаючи будь-який текст, відтворений у зображенні. Це дозволяє перевірити, чи залишається колір тексту на фоні читабельним за кожної симульованої умови.

Схожі інструменти

Тримайте все локально, досліджуйте додаткові інструменти.

Усі інструменти для зображень