Tiny Online Tools
Проверяйте контраст до того, как цвета попадут в продукт
Палитра может выглядеть красиво и при этом не соответствовать требованиям доступности. Этот инструмент помогает сравнить цвет текста и фона с порогами WCAG, чтобы проблемы были найдены до того, как они окажутся в дизайн-системе, библиотеке компонентов или готовом интерфейсе.
Что показывают результаты
Инструмент выводит коэффициент контраста и показывает, проходит ли сочетание типовые уровни WCAG для:
- обычного текста по AA
- крупного текста по AA
- обычного текста по AAA
- крупного текста по AAA
Почему это важно на практике
Проверка контраста особенно полезна, если нужно:
- проверить фирменные цвета в компонентах
- протестировать текст на кнопках, карточках и баннерах
- учесть доступность на этапе дизайн-хендова
- избежать сочетаний, которые плохо читаются пользователями с ослабленным зрением
Формального прохождения недостаточно
Некоторые пары цветов формально проходят проверку, но все равно выглядят тяжело на маленьком размере или тонком начертании. После проверки коэффициента стоит дополнительно посмотреть на живой предпросмотр с реалистичным размером текста.