Meta открыла всем свою дизайн-систему Astryx. Прогнала её через свой симулятор дальтонизма и плагины Симулятор: viktoriafilippova.github.io/daltonism-simulator

Смотрела кнопки, формы, статусы, бейджи, графики и ссылки. Светлая тема, живой Storybook.

Что прошло Текст держит 4,5 : 1 во всём, что мерила, кнопки от 7,8 : 1. В форме рамки ошибки и успеха при дейтеранопии одного цвета, но крестик и галочка остаются. Бейджи подписаны словами.

Что нет Точка статуса без подписи: зелёную и красную не отличить. Документация Astryx сама просит так не делать.

Ссылка в тексте. Она почти того же цвета, что текст (1,22 : 1, а нужно 3 : 1), и подчёркивается только под курсором. На телефоне курсора нет, и ссылку не видит никто. По WCAG это провал 1.4.1, уровень A. Лечится одним свойством hasUnderline.

В плагине «Посмотри моими глазами» с дальнозоркостью 40+ первыми плывут подсказки 12 px под полями.

Цвет у Meta продуман. Подвела обычная ссылка.

Какую систему проверить следующей?