Основний текст на поверхні
НормаОригінал
Aa
Симуляція
Aa
Оригінальний контраст13.98:1
Контраст у симуляції14.62:1
Кольорова доступність
Симулятор порушень сприйняття кольору та безпечна палітра
Інструмент для перевірки кольорів з урахуванням порушень сприйняття кольору: протанопії, дейтеранопії та тританопії. Знаходьте проблемні пари, виправляйте контраст і формуйте безпечну палітру для UI.
Налаштування симуляції
Оберіть профіль зору та запустіть автоматичну генерацію безпечної палітри для ризикових пар.
0Проблемних пар
4Пар у нормі
ПротанопіяПоточний профіль
Другорядний текст на панелі
НормаОригінал
Aa
Симуляція
Aa
Оригінальний контраст4.34:1
Контраст у симуляції4.67:1
Основна кнопка дії
НормаОригінал
Aa
Симуляція
Aa
Оригінальний контраст5.17:1
Контраст у симуляції7.49:1
Попереджувальний бейдж
НормаОригінал
Aa
Симуляція
Aa
Оригінальний контраст8.15:1
Контраст у симуляції6.68:1
Звіт проблемних пар
Пари нижче 4.5:1 у вибраній симуляції підсвічуються як ризикові для читабельності тексту.
Для поточного профілю проблемних пар не виявлено.
:root {
--safe-primary-text-foreground: #1e293b;
--safe-primary-text-background: #f8fafc;
--safe-muted-text-foreground: #64748b;
--safe-muted-text-background: #f1f5f9;
--safe-action-foreground: #ffffff;
--safe-action-background: #2563eb;
--safe-warning-foreground: #78350f;
--safe-warning-background: #fef3c7;
}Симулятор дальтонізму: навіщо потрібен і як ним користуватися
Симуляція дальтонізму показує, як інтерфейс бачать користувачі з різними типами порушення кольоросприйняття. Це допомагає знайти небезпечні пари кольорів, які у звичайній темі здаються «нормальними».
Як користуватися: 1) оберіть профіль зору; 2) перевірте контраст проблемних пар у симуляції; 3) натисніть генерацію безпечної палітри; 4) експортуйте CSS/JSON токени і застосуйте їх у дизайн-системі.
Поширені запитання про симулятор дальтонізму
Що перевіряє ця сторінка, окрім контрасту?
Окрім числового контрасту, вона показує візуальну симуляцію для трьох профілів дальтонізму. Це допомагає оцінити читабельність, відмінність станів і ризикові кольорові поєднання.
Як швидко виправити проблемні пари?
Запустіть генерацію безпечної палітри: інструмент скоригує передній колір до читабельного рівня у вибраній симуляції, намагаючись зберегти тон і стиль.
Чи замінює симулятор класичну WCAG-перевірку?
Ні. Найкраща практика: поєднувати симуляцію дальтонізму з перевіркою контрасту WCAG AA/AAA для повного контролю доступності.
Що робити після генерації безпечної палітри?
Експортуйте палітру в CSS або JSON, оновіть токени дизайн-системи, перевірте ключові екрани та повторно проганяйте перевірки перед релізом.