Color Contrast Checker Tool — это небольшая утилита для Android, созданная для одной задачи: определить, читается ли текст одного цвета на фоне другого, используя ту же математику, что и стандарт WCAG. Идея понравилась нам настолько, что мы создали собственную версию для браузера — Clarity Check, чтобы каждый, кто выбирает цвета для сайта, презентации или приложения, мог получить результат без установки чего-либо. Выберите два цвета, и коэффициент обновится мгновенно при изменении любого из них.
Проверьте контраст прямо сейчас
При открытии инструмент загружается с реальной парой цветов — белый текст на индиго, поэтому вы видите живой коэффициент и индикаторы прохождения/непрохождения до первого же действия. Перетаскивайте любой из выбирателей цвета или введите hex-код для проверки вашей пары.
Как его использовать
Установите цвет текста в разделе “Text” и цвет фона в разделе “On”, либо перетаскивая встроенный выбиратель цвета, либо введя hex-код напрямую. Коэффициент, живой предпросмотр текста и три индикатора (AA текст, AA крупный текст, AAA текст) обновляются при каждом изменении без необходимости нажимать кнопку. Нажмите Swap, чтобы поменять местами текст и фон, или выберите одну из готовых пар, чтобы загрузить готовое сочетание и увидеть его результат. Всё, что вы вводите, остаётся в вашем браузере; ваша последняя пара сохраняется на устройстве, поэтому она будет там и при следующем открытии страницы.
Как это сравнивается с Color Contrast Checker Tool
Clarity Check сохраняет самую важную часть оригинального приложения для повседневной работы: введите или выберите два цвета, получите коэффициент контраста WCAG и чёткий результат прохождения или непрохождения AA и AAA за мгновение, без регистрации. Живой предпросмотр текста — это наше собственное дополнение, поэтому вы видите не просто число, а то, как пара будет выглядеть для читателя.
Что мы исключили — всё остальное, что есть в полноценном приложении для Android: историю сохранённых проектов, пакетную проверку нескольких пар одновременно и любой доступ в автономном режиме за пределами одной вкладки браузера. Если вы проверяете цвета один раз во время разработки на веб-сайте, Clarity Check достаточно. Если проверка контраста — часть вашего регулярного рабочего процесса и вы хотите иметь её на телефоне без открытой вкладки браузера, приложение для Android будет лучшим выбором.
Ещё одно, что стоит упомянуть: мы применили к собственному инструменту тот же стандарт, который он измеряет. Каждый текст интерфейса на странице, метки, индикаторы, кнопки имеют контрастность не менее 4,5:1 на фоне. Инструмент проверки контраста, который не пройдёт собственный тест, был бы плохой рекламой для самой идеи.
Получить полное приложение
Color Contrast Checker Tool — бесплатное приложение для Android, если вам нужна проверка контраста вне браузера с сохранением истории на устройстве.
Часто задаваемые вопросы
Какую формулу использует этот инструмент проверки контраста?
Ровно ту, что в WCAG 2.1: относительная светлота для каждого цвета из его каналов sRGB, затем коэффициент контраста (L1 + 0,05) / (L2 + 0,05), использующий более светлую и более тёмную светлоту. Это та же математика, что используют браузеры и дизайн-инструменты, поэтому пара чёрного на белом даст здесь 21:1 так же, как и везде.
Что такое AA и AAA?
Это уровни соответствия WCAG 2.1 для контраста текста. AA требует минимум 4,5:1 для обычного текста и 3:1 для крупного текста (примерно 18px полужирный или 24px обычный и выше). AAA строже: 7:1 для обычного текста. Большинство сайтов и приложений ориентируются на AA; AAA предназначена для контента, где читаемость особенно важна, например для продуктов, ориентированных на доступность.
Это оригинальное приложение Color Contrast Checker Tool?
Нет. Clarity Check — инструмент для браузера, который мы создали, вдохновлённый тем, что делает приложение для Android, и он не связан и не одобрен его разработчиком. Он использует ту же формулу WCAG, но это наш собственный код и интерфейс. Ссылки для загрузки выше указывают на оригинальное приложение.
Работает ли он в автономном режиме, и приватны ли мои данные?
После загрузки страницы он не делает никаких сетевых запросов, поэтому потеря соединения не помешает ему работать. Всё, что вы вводите или выбираете, не отправляется никуда; ваши последние цвета сохраняются только в локальном хранилище вашего браузера.
Это бесплатно?
Да, полностью. Без объявлений, без регистрации, без ограничений на количество проверяемых пар.
