Реклама мешает? Идти Без рекламы Сегодня 

Генератор сетки цветового контраста

Разработчик

Реклама · УДАЛИТЬ?

ВХОД

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

Генератор сетки цветового контраста

Введите цвета вашего бренда или системы дизайна и сгенерируйте полную матрицу контрастности WCAG, показывающую коэффициент контрастности для каждой возможной комбинации переднего и заднего плана. Мгновенно увидите, какие пары цветов соответствуют требованиям AA, AAA или не соответствуют требованиям доступности — это важно для создания доступных систем дизайна и руководств по стилю.

Как использовать

Введите шестнадцатеричные цвета по одному в строке (с необязательными метками, такими как «Primary #3B82F6»), или выберите предустановленную палитру. Нажмите Создать сетку чтобы создать матрицу контрастности. Каждая ячейка показывает коэффициент контрастности с фактическим цветом переднего плана на фактическом фоне, с цветовой кодировкой по уровню соответствия WCAG.

Возможности

Матрица контрастности N×N – Каждая комбинация переднего и заднего плана протестирована и отображена в визуальной сетке
Цветовая кодировка WCAG – Зеленый для AAA (≥7:1), желтый для AA (≥4.5:1) и красный для неудачи (<4.5:1)
Предварительный просмотр цвета в реальном времени – Каждая ячейка отрисована с фактическим текстом переднего плана на фактическом цвете фона
AA Крупный текст – Также указывает соответствие AA Крупный текст (≥3:1) для более крупных размеров шрифта
Сводная статистика – Всего протестировано пар, пройденных AAA, пройденных AA и неудач с первого взгляда
Предустановленные палитры – Быстро загружаемые цветовые палитры Tailwind, Material Design или монохромные
До 20 цветов – Поддерживает палитры от 2 до 20 цветов
На стороне клиента Все расчёты происходят в вашем браузере.

Реклама · УДАЛИТЬ?

 Часто задаваемые вопросы

Что означают уровни контрастности WCAG?

WCAG (Web Content Accessibility Guidelines) определяет коэффициенты контрастности для читаемости текста. AAA (≥7:1) — это самый высокий стандарт, обеспечивающий читаемость текста для пользователей с умеренными нарушениями зрения. AA (≥4.5:1) — это минимальный стандарт для текста обычного размера. AA Large (≥3:1) применяется к тексту размером 18pt или больше (или 14pt полужирным). Большинство законов и стандартов доступности требуют соответствия как минимум AA для веб-контента.
Зачем мне нужна сетка контрастности вместо индивидуальной проверки пар?

Сетка контрастности показывает все возможные комбинации цветов в вашей палитре одновременно, выявляя проблемы, которые вы бы пропустили при проверке пар по отдельности. Системы дизайна часто содержат 8–15 цветов, которые могут использоваться в различных комбинациях переднего и заднего плана. Сетка с 10 цветами одновременно тестирует 100 пар, мгновенно показывая, какие комбинации доступны, а какие нет. Это необходимо для создания исчерпывающей документации по доступности для команд дизайнеров.
Как рассчитывается коэффициент контрастности?

Коэффициент контрастности WCAG использует относительную яркость, рассчитанную из линеаризованных значений sRGB. Каждый цветовой канал преобразуется из гамма-кодированного sRGB в линейный свет с использованием формулы: если значение sRGB составляет 0,03928 или меньше, разделить на 12,92; в противном случае возвести (значение + 0,055) / 1,055 в степень 2,4. Относительная яркость затем составляет 0,2126×R + 0,7152×G + 0,0722×B. Коэффициент контрастности равен (более светлая яркость + 0,05) / (более темная яркость + 0,05), всегда давая значение от 1:1 до 21:1.