Что это такое
Это бесплатный онлайн-калькулятор, который проверяет контрастность двух цветов по стандартам WCAG 2.1. Простыми словами — инструмент показывает, насколько хорошо текст будет читаться на фоне, и соответствует ли это сочетание требованиям веб-доступности (accessibility). Вместо того чтобы гадать «а норм ли этот серый на белом?», вы получаете точную цифру коэффициента и вердикт: прошел уровень AA или AAA, или нет.
Как пользоваться
- Откройте инструмент на сайте DarkPlay.
- Выберите способ ввода цвета: HEX, RGB или HSL — подойдет любой, что есть у вас под рукой.
- Задайте цвет текста в первом поле и цвет фона во втором. Можно кликнуть по палитре или вставить код вручную.
- Смотрите на результат: калькулятор мгновенно покажет коэффициент контрастности (например, 7.8:1) и отметку, соответствует ли пара уровням AA или AAA для обычного и крупного текста.
- Если контраст не прошел — не беда. Используйте встроенный подбор доступных цветов: инструмент предложит варианты, которые будут соответствовать WCAG.
- Для проверки сочетаний на цветовую слепоту включите симуляцию дальтонизма — увидите, как ваши цвета воспринимают люди с разными типами цветоаномалий.
Кому и когда пригодится
Инструмент полезен всем, кто работает с интерфейсами и текстом:
- Веб-дизайнеры — проверяют кнопки, ссылки, заголовки и подписи на соответствие стандартам доступности сразу на этапе макета.
- Frontend-разработчики — тестируют CSS-переменные и токены цветов, чтобы не переделывать стили в конце проекта.
- UX-специалисты — анализируют пользовательские сценарии для людей с плохим зрением и дальтонизмом.
- Контент-менеджеры и маркетологи — проверяют тексты в email-рассылках, лендингах и соцсетях, чтобы никто не потерял информацию из-за плохой читаемости.
- Менеджеры продуктов — аргументированно требуют от команды исправить проблемные цвета на основе цифр, а не личных предпочтений.
Инструмент выручает в моменты, когда нужно быстро проверить десяток комбинаций или объяснить заказчику, почему «красивый светло-желтый на белом» — плохая идея.
Плюсы и ограничения
Плюсы
- Полностью бесплатный и работает прямо в браузере, без установки.
- Поддерживает все популярные цветовые форматы — HEX, RGB, HSL.
- Мгновенная проверка по уровням AA и AAA, включая требования для крупного текста.
- Симуляция дальтонизма помогает избежать ошибок уже на старте.
- Встроенный подбор альтернативных цветов экономит время.
Ограничения
- Проверяет только пару «текст-фон», но не учитывает сложные градиенты или узоры под текстом.
- Не оценивает общую эстетику — высокий контраст не гарантирует красивый дизайн.
- Коэффициент не учитывает качество самого экрана (блики, низкое разрешение) и возрастные особенности зрения.
Частые вопросы
Какой контраст считается нормальным по WCAG?
Для обычного текста нужно минимум 4.5:1, чтобы пройти уровень AA. Для крупного текста (от 18.66px жирного или от 24px обычного) достаточно 3:1. Уровень AAA требует 7:1 для обычного и 4.5:1 для крупного текста. Это минимальные требования, но лучше стремиться к более высоким значениям.
Что такое уровень AA и AAA?
Это уровни соответствия стандартам веб-доступности WCAG. AA — базовый уровень, который считается обязательным для большинства сайтов. AAA — улучшенный, он нужен для строгих требований, например, для государственных порталов или сервисов, ориентированных на людей с ослабленным зрением.
Почему контраст считается не по разнице яркости, а как-то сложно?
WCAG использует математическую формулу, основанную на относительной яркости цветов в цветовом пространстве. Простое сравнение «светлый — темный» не работает, потому что человеческий глаз по-разному воспринимает каналы красного, зеленого и синего. Калькулятор считает по формуле, поэтому результат объективный.
Как симуляция дальтонизма помогает в разработке?
Она показывает, как ваши цвета выглядят для людей с протанопией, дейтеранопией и тританопией. Например, красный и зеленый могут сливаться в один оттенок. Если текст и фон становятся неразличимыми — меняйте палитру, даже если контраст по цифрам формально высокий.
Можно ли доверять бесплатному онлайн-инструменту?
Да, если он использует алгоритм WCAG 2.1. Формула расчета контраста математически одинакова во всех инструментах, поэтому результаты совпадут с платными аналогами. Главное — правильно ввести цвета и не забывать про симуляцию дальтонизма для сложных графических элементов.