Проверка контраста цветов
Задайте цвета текста и фона — инструмент посчитает коэффициент контраста по стандарту доступности WCAG 2, покажет, проходит ли пара уровни AA и AAA, и подскажет ближайший оттенок текста, который проходит проверку.
Нажмите на код цвета, чтобы скопировать его. Замок оставляет цвет на месте при новой генерации. Пробел — новая палитра.
Схема
Палитра из фото
Загрузите картинку — инструмент найдёт пять главных цветов. Файл не покидает ваш компьютер.
Экспорт
Цвета
Клик — цвет текста, клик с Shift — цвет фона.
Результат
Как видят вашу палитру
Проверить картинку
Загрузите схему, график или макет — увидите его в четырёх вариантах цветовосприятия. Файл не покидает ваш компьютер.
Как это работает
Цветовые схемы строятся по цветовому кругу: основной цвет переводится в модель HSL (оттенок, насыщенность, светлота), и от его оттенка откладываются нужные углы — 180° для комплементарной пары, ±30° для аналоговой, 120° для триады, 90° для тетрады. Монохромная схема меняет только светлоту. Чтобы палитра не выглядела «кислотной», насыщенность и светлота производных цветов слегка варьируются.
Палитра из фото: картинка уменьшается, её пиксели группируются по сходству цвета (метод k-средних), и пять самых крупных групп становятся палитрой. Контраст считается по формуле стандарта доступности WCAG 2: из каждого цвета вычисляется относительная яркость, и их отношение показывает, насколько текст отличается от фона. Симуляция дальтонизма использует научные матрицы Machado, Oliveira и Fernandes (2009) для полной формы протанопии, дейтеранопии и тританопии, а также переводит цвета в оттенки серого для монохромного зрения.
Про сами названия цветов — откуда взялись «бирюзовый», «бордовый» и «маренго» — читайте в статье журнала «Названия цветов».
Частые вопросы
Что такое контраст по WCAG и какой нужен?
Это отношение яркостей текста и фона — от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Стандарт доступности WCAG требует для обычного текста не меньше 4,5:1 (уровень AA) или 7:1 (AAA), для крупного текста — 3:1 и 4,5:1. При меньшем контрасте текст тяжело читать людям со слабым зрением, на ярком солнце и на плохих экранах.
Что считается крупным текстом?
По WCAG крупный текст — от 18 пунктов обычного начертания или от 14 пунктов жирного; на экране это примерно 24 и 18,7 пикселя. Для него требования мягче: 3:1 для уровня AA и 4,5:1 для AAA.
Как исправить пару, которая не проходит?
Нажмите кнопку с предложенным оттенком: инструмент меняет только светлоту цвета текста, а тон оставляет прежним, и ищет ближайший вариант, который проходит нужный уровень. Можно и наоборот — поменять цвета местами и подобрать фон.
Где взять цвета для проверки?
Введите коды вручную или выберите их пипеткой. Если вы собрали палитру на вкладке «Палитра», её цвета появятся под полями: клик берёт цвет для текста, клик с Shift — для фона.