Симулятор дальтонізму
Завантажте зображення й перегляньте, як воно виглядає за протанопії, дейтеранопії, тританопії чи повної колірної сліпоти, а потім завантажте змодельований результат.
Симулятор дальтонізму — Перетягніть зображення й миттєво побачте, як його сприймала б людина з червоною сліпотою (протанопія), зеленою сліпотою (дейтеранопія), синьою сліпотою (тританопія) або повною колірною сліпотою (ахроматопсія). Симуляція виконується повністю у вашому браузері на 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.