Лаборатория различимости

Сохраняют ли эти два цвета разный смысл?

Посмотрите на пару через три модели полного дефицита цветового зрения. Hexees измеряет оставшееся перцептивное различие и показывает, почему подписи, формы и значки всё равно необходимы.

01 / Четыре вида

Сравните изменение сигнала рядом.

К одной паре применяются матрицы Machado с уровнем 1. Числа описывают отображённую пару, а не выставляют оценку доступности.

Эталонное зрение

Исходная пара в sRGB

ΔE в OKLab: 0,260
Сохранённое различие: 100%
Контраст пары: 1,17:1

Симуляция протанопии

Модель полного дефицита красных колбочек

ΔE в OKLab: 0,124
Сохранённое различие: 48%
Контраст пары: 1,68:1

Симуляция дейтеранопии

Модель полного дефицита зелёных колбочек

ΔE в OKLab: 0,045
Сохранённое различие: 17%
Контраст пары: 1,04:1

Симуляция тританопии

Модель полного дефицита синих колбочек

ΔE в OKLab: 0,310
Сохранённое различие: 119%
Контраст пары: 1,16:1

Большее ΔEOK означает большее вычисленное различие в OKLab. Универсального порога, который гарантирует различимость для любого человека, экрана, размера, контура или состояния интерфейса, не существует.

02 / Дублирование сигнала

Передавайте смысл несколькими способами.

Красивая цветовая пара всё равно может стать трудноразличимой. Добавляйте явный текст, значки, узоры, формы или положение, чтобы смысл не зависел только от цвета.

Проверить контраст текста по WCAG →

Только цвет

Цвет + текст + символ

✓ Готово! Проверить

03 / Метод и ограничения

Диагностика дизайна, а не медицинский тест.

Физиологическая симуляция

Три варианта используют опубликованные матрицы преобразования линейного sRGB с уровнем 1 из модели Machado, Oliveira и Fernandes.

Machado, Oliveira & Fernandes, 2009

Перцептивное различие

Hexees показывает евклидово ΔEOK в OKLab и стандартный контраст относительной яркости для каждой симулированной пары sRGB.

CSS Color 4 · ΔEOK

Используйте цвет ответственно

Предпросмотр не ставит диагноз и не подтверждает соответствие WCAG. Проверяйте готовый компонент и сохраняйте видимый сигнал, который не зависит от цвета.

WCAG 2.2 · Use of Color