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

Посмотрите, как любой цвет выглядит для людей с нарушением цветового зрения

Пресеты:
OriginalNormal color vision
#3B82F6rgb(59, 130, 246)
ProtanopiaRed-blind (no L-cones)
#418EFArgb(65, 142, 250)
DeuteranopiaGreen-blind (no M-cones)
#007DF4rgb(0, 125, 244)
TritanopiaBlue-blind (no S-cones)
#009EB0rgb(0, 158, 176)
AchromatopsiaTotal color blindness (monochromacy)
#7B7B7Brgb(123, 123, 123)

О нарушении цветового зрения

Примерно 8% мужчин и 0,5% женщин во всём мире имеют ту или иную форму нарушения цветового зрения. Протанопия (слепота к красному) и дейтеранопия (слепота к зелёному) являются наиболее распространёнными типами. Этот инструмент использует научно точные матрицы цветовых преобразований для моделирования того, как цвета воспринимаются людьми с этими состояниями, помогая дизайнерам создавать более доступные интерфейсы.

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

Посмотрите, как любой цвет выглядит для людей с нарушением цветового зрения

Возможности

  • Simulate four color vision deficiencies: protanopia (no L-cones), deuteranopia (no M-cones), tritanopia (no S-cones), achromatopsia (greyscale)
  • Uses scientifically-accurate Brettel / Vienot / Machado transformation matrices
  • Proper sRGB gamma correction before applying the matrix (linear-light math)
  • Real-time hex-color input with side-by-side comparison
  • Useful for verifying UI color contrast for ~8% of male users (red-green color blindness) and ~0.5% of female users

Как использовать

  1. Выберите цвет с помощью палитры или введите hex-значение.
  2. Просмотрите имитированный вид для каждого типа нарушения цветового зрения.
  3. Сравните оригинальный цвет со всеми четырьмя симуляциями рядом.
  4. Скопируйте имитированные hex-значения для использования в ваших дизайнах.

Советы и лучшие практики

  • Protanopia and deuteranopia are the most common (red-green color blindness). Tritanopia (blue-yellow) is rare.
  • Achromatopsia is total color blindness — extremely rare (~1 in 30,000), but a useful "ground truth" for ensuring contrast works on luminance alone.
  • WCAG contrast requirements (4.5:1 for normal text) work for color blindness too — sufficient contrast → readable for everyone.
  • For UI elements that rely on color alone (red error / green success), add an icon or text label.
  • For data visualisations, palettes like Viridis, Cividis, and ColorBrewer's color-blind-friendly sets are safe by design.

Вопросы и ответы

Насколько точны эти симуляции?

Симуляции используют матрицы цветовых преобразований Machado, Oliveira и Fernandes (2009), которые являются одними из наиболее научно точных моделей для имитации нарушения цветового зрения.

Какой тип дальтонизма самый распространённый?

Дейтеранопия (слепота к зелёному) и протанопия (слепота к красному) наиболее распространены, затрагивая примерно 6% и 2% мужчин соответственно. Тританопия (слепота к синему) встречается редко, а ахроматопсия (полная цветовая слепота) — крайне редко.

Как сделать мои дизайны более доступными?

Избегайте передачи информации только через цвет. Используйте паттерны, подписи и достаточный контраст. Протестируйте вашу цветовую палитру с этим симулятором, чтобы убедиться, что важные элементы UI остаются различимыми.

Мои данные в безопасности?

Вся обработка происходит локально в вашем браузере. Никакие данные не отправляются на сервер.

Этот инструмент бесплатный?

Да, этот инструмент полностью бесплатный и не требует регистрации.