Проверка контрастности цветов

    Проверьте соотношение контраста между цветами переднего плана и фона, чтобы обеспечить доступность.

    1.00:1
    Контраст
    Fail
    Очень плохой

    Обычный текст

    AA (4.5:1)
    AAA (7:1)

    Крупный текст

    AA (3:1)
    AAA (4.5:1)
    Black
    #000000
    Black
    #2596be

    Быстрые исправления

    Aa

    Название для предварительного просмотра

    Быстрая коричневая лиса перепрыгивает через ленивую собаку

    Пример небольшого текста (12px)

    Текст
    #000000
    Фон
    #2596be

    Стандарты WCAG

    Level AA

    Минимальный коэффициент контрастности - 4,5:1 для обычного текста и 3:1 для крупного. Требуется для большинства сайтов.

    Level AAA

    Повышенный коэффициент контрастности - 7:1 для обычного текста и 4,5:1 для крупного. Рекомендуется для оптимальной доступности.

    Недостаточная контрастность для всех размеров текста - не соответствует стандартам WCAG.

    Проверка контрастности цветов

    Рассчитайте коэффициент контрастности текста и фоновых цветов.

    Выберите цвет с помощью пипетки для текста и фона или введите цвет в шестнадцатеричном формате RGB (например, #259 или #2596BE). Вы можете регулировать ползунок для выбора цвета. В Руководстве по доступности веб-контента (WCAG) есть специальный критерий, который помогает определить, читаем ли текст для зрячих пользователей. Этот критерий использует определенный алгоритм, чтобы сопоставить цветовые комбинации в сопоставимых соотношениях. Используя эту формулу, WCAG утверждает, что соотношение цветового контраста текста и фона 4,5:1 является достаточным для обычного (основного) текста, а крупный текст (18+ пт обычный или 14+ пт жирный) должен иметь соотношение цветового контраста не менее 3:1.

    Основные характеристики

    • Расчет коэффициента контрастности в реальном времени
    • Проверка соответствия требованиям WCAG AA и AAA
    • Ползунки HSL для тонкой настройки
    • Несколько форматов предварительного просмотра

    Продвинутые инструменты

    • Автоматическая фиксация цвета
    • Образцы текста и фона
    • Определение названия цвета
    • Экспорт результатов