Без качване, 100% локално, без акаунт

Симулатор на цветна слепота

Вижте изображението си през очите на човек с нарушение на цветното зрение. Изберете типа, прегледайте и изтеглете резултата. Всичко работи в браузъра ви.

Как работи Симулатор на цветна слепота

Симулаторът на цветна слепота прилага матрици за цветова трансформация към изображението, за да покаже как изглежда то за хора с протанопия (слепота за червено), дейтеранопия (слепота за зелено), тританопия (слепота за синьо) или ахроматопсия (пълна цветна слепота). Матриците се прилагат пиксел по пиксел с Canvas.getImageData() и Canvas.putImageData() в браузъра. Никакви данни за изображения не се предават на сървър.

Симулациите се основават на публикувани перцептивни модели, извлечени от изследвания на дефицити в цветното зрение. Те са приближения на начина, по който зрителната система на засегнат човек обработва цвета, а не точни възпроизвеждания на индивидуалното преживяване, което варира. Инструментът е проектиран да помогне на дизайнери и разработчици да идентифицират проблеми с контраста или цветовото кодиране, които биха засегнали значителна част от аудиторията: около 8% от мъжете и 0,5% от жените имат някаква форма на дефицит в цветното зрение.

Написано от Bastien Sulyan

Как да използвате Симулатор на цветна слепота, стъпка по стъпка

  1. Пуснете изображението върху зоната за качване или щракнете, за да го намерите.
  2. Изберете тип дефицит в цветното зрение от менюто: протанопия, дейтеранопия, тританопия или ахроматопсия.
  3. Вижте симулирания резултат наред с оригинала в панела за сравнение.
  4. Превключвайте между типовете симулация, за да сравните как всяко състояние засяга изображението.
  5. Използвайте изгледа едно до друго, за да идентифицирате области, където само цветът предава информация, която може да бъде загубена.

Често срещани приложения

  • UI дизайнер проверява дали индикатор за статус в червено-зелено е различим за потребители с дейтеранопия, преди да пусне функция.
  • Автор на визуализация на данни проверява дали многоредова диаграма с кодирани по цвят серии остава четима в симулацията за протанопия.
  • Марков дизайнер оценява как лого с градиентни цветове се чете при ахроматопсия, за да гарантира, че запазва разпознаваема форма и контраст.
  • Разработчик на игри тества дали цветово кодираните зони на картата са различими за играчи с тританопия и добавя запълвания с модели, за да допълни цветовото кодиране.

Често задавани въпроси

Колко точни са симулациите за цветна слепота?

Симулациите прилагат перцептивни трансформационни матрици, извлечени от публикувани изследвания на дефицит в цветното зрение. Те са научно обосновани приближения на типичните случаи на всяко състояние. Индивидуалното преживяване варира: тежестта се различава между хора с едни и същи диагнози и симулацията не може да отчете компенсаторни стратегии, които някои потребители развиват. Третирайте изхода като полезен индикатор, а не като категоричен тест.

Покрива ли инструментът всички видове цветна слепота?

Четирите обхванати типа са най-честите форми на дефицит в цветното зрение и пълна цветна слепота. Типовете аномалозна трихромация (протаномалия, дейтераномалия, тританомалия), представляващи частични дефицити, не са моделирани отделно в текущата версия.

Анализира ли се изображението на сървър за генериране на симулацията?

Не. Трансформацията на цветната матрица се изчислява локално с Canvas.getImageData() за четене на масива от пиксели и Canvas.putImageData() за записване на резултата. Цялата обработка се извършва в раздела на браузъра и данните за изображението остават на устройството.

Мога ли да използвам инструмента за проверка на коефициентите на контраст на цветовете?

Инструментът показва как цветовете изглеждат за хора с дефицит в цветното зрение, но не изчислява числово коефициентите на контраст по WCAG. За числова проверка на контраста използвайте инструмента Color Converter, който включва проверка на контраст по WCAG.

Работи ли инструментът с изображения, съдържащи текст?

Да. Трансформацията се прилага върху целия масив от пиксели, включително текст, изобразен в изображението. Това ви позволява да проверите дали цветът на текста спрямо фона му остава четим при всяко симулирано условие.

Свързани инструменти

Пазете всичко локално, разгледайте допълнителни инструменти.

Всички инструменти за изображения