Фронтенд и мобильные

Инструменты для цвета и доступности

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

Конвертер цветов показывает один цвет сразу в нескольких форматах — HEX, RGB, HSL и других, так что не приходится гадать при переносе между дизайн-инструментами. Для доступности проверка контрастности цветов сверяет пару текста и фона с порогами WCAG, а калькулятор контрастности APCA применяет более новую перцептивную модель APCA для точной оценки читаемости. Симулятор дальтонизма сравнивает цвета и изображения бок о бок по четырём моделям зрения, показывая выбор палитры, который подводит людей с дальтонизмом.

5 инструментов

Все инструменты категории «Color & Accessibility»

Вопросы об инструментах категории «Color & Accessibility»

В чём разница между контрастом WCAG и APCA?

Коэффициент контраста WCAG — это простая формула по яркости, которая по-разному относится к светлому и тёмному тексту и не всегда совпадает с восприятием. APCA моделирует перцептивный контраст точнее. Проверка контрастности цветов покрывает пороги WCAG, а калькулятор контрастности APCA применяет новую модель APCA к той же паре цветов.

Как проверить, что палитра работает для людей с дальтонизмом?

Симуляция нарушений цветового зрения — единственный надёжный способ проверить это, поскольку дальтонизм меняет восприятие цвета так, что это незаметно при простом взгляде на оригинал. Симулятор дальтонизма сравнивает цвета и изображения бок о бок по нескольким моделям зрения.

Когда стоит использовать OKLCH вместо HSL?

OKLCH спроектирован перцептивно равномерным, поэтому изменение светлоты не сдвигает насыщенность цвета так, как иногда происходит в HSL. Конвертер цветов показывает тот же цвет в OKLCH рядом с HEX, RGB, HSL и другими форматами, чтобы сравнить их напрямую.