Генератор доступной палитры WCAG

Сгенерируйте палитру случайных цветов и оставьте только те, которые действительно достигают коэффициента контрастности WCAG AA или AAA с белым или чёрным текстом. Расчёт яркости и контраста выполняется прямо в вашем браузере.

Цветов: 6
Aa
Белый текст: 1.33:1
Чёрный текст: 15.79:1
✅ AAA
Aa
Белый текст: 3.46:1
Чёрный текст: 6.06:1
✅ AA
Aa
Белый текст: 5.14:1
Чёрный текст: 4.09:1
✅ AA
Aa
Белый текст: 3.73:1
Чёрный текст: 5.62:1
✅ AA
Aa
Белый текст: 2.62:1
Чёрный текст: 8:1
✅ AAA
Aa
Белый текст: 18.75:1
Чёрный текст: 1.12:1
✅ AAA

Как это работает

Если выбирать фирменную палитру только по внешнему виду, цвета нередко не проходят проверку на доступность в сочетании с текстом. Этот инструмент подбирает случайные цвета, вычисляет их относительную яркость по формуле WCAG, затем сравнивает полученный коэффициент контрастности с белым и чёрным текстом и (по желанию) оставляет только те цвета, которые достигают уровня AA или AAA.

Как рассчитывается коэффициент контрастности?

Расчёт следует официальной формуле WCAG: каждый цвет переводится в относительную яркость (меру воспринимаемой светлоты с учётом чувствительности человеческого глаза к красному, зелёному и синему каналам), после чего коэффициент получается сравнением яркости более светлого цвета с яркостью более тёмного. Коэффициент 21:1 соответствует максимально возможному контрасту (чисто чёрный на чисто белом).

Почему у одних цветов указан «белый текст», а у других — «чёрный текст»?

Инструмент считает коэффициент в обоих вариантах и автоматически выбирает цвет текста (белый или чёрный), который даёт лучший контраст на сгенерированном фоне. Именно эту комбинацию стоит использовать, если вы применяете этот цвет в качестве фона в своём интерфейсе.

Весь расчёт яркости и контраста выполняется на JavaScript в вашем браузере: ни один сгенерированный цвет не отправляется на сервер.