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

Находитель доступных пар цветов

РазработчикМатематика

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

ВХОД

Автоматический процесс

ВЫХОД

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

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

Гид

Находитель доступных пар цветов

Найдите цвета переднего плана, соответствующие стандартам доступности WCAG, для любого цвета фона. Введите цвет фона, и инструмент будет искать в цветовом пространстве HSL, чтобы сгенерировать палитру цветов текста, которые соответствуют требованиям AA или AAA. Предварительно просмотрите каждую пару с образцом текста, проверьте конкретные цветовые комбинации и экспортируйте доступные пары как пользовательские свойства CSS.

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

Выберите или введите цвет фона с помощью средства выбора цвета или ввода HEX. Инструмент немедленно сканирует цветовое пространство и отображает сетку предлагаемых цветов переднего плана, которые соответствуют выбранному вами уровню WCAG. Нажмите на любой образец, чтобы просмотреть его как текст на вашем фоне. Чтобы проверить конкретную пару, введите как цвет фона, так и цвет переднего плана и получите мгновенные значки соответствия/несоответствия для уровней AA Normal, AA Large и AAA. Экспортируйте выбранные вами пары как пользовательские свойства CSS для прямого использования в ваших таблицах стилей.

Возможности

Расчет контрастности WCAG – Точный расчет относительной яркости и коэффициента контрастности согласно спецификации WCAG 2.1
Поиск по сетке HSL – Систематический поиск оттенка, насыщенности и светлоты для нахождения всех подходящих цветов переднего плана
Предварительный просмотр текста в реальном времени – Просмотр образцов обычного и крупного текста, отображаемых на выбранном вами фоне с каждым предлагаемым цветом
Соответствие AA и AAA – Переключение между AA Normal (4.5:1), AA Large (3:1) и AAA (7:1) порогами контрастности
Проверка конкретной пары – Введите любые два цвета, чтобы получить мгновенные результаты соответствия/несоответствия для всех уровней WCAG
Образцы цветов по оттенку – Предложения, организованные по семействам оттенков для удобного просмотра
Отображение формулы яркости – Отображает расчет относительной яркости WCAG и значения прозрачности
Экспорт CSS – Копируйте доступные пары как пользовательские свойства CSS, готовые для вашей таблицы стилей

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

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

Что такое коэффициент контрастности WCAG и почему он важен?

WCAG (Web Content Accessibility Guidelines) определяет минимальные коэффициенты контрастности между текстом и цветами фона для обеспечения читаемости для людей с нарушениями зрения. Коэффициент контрастности варьируется от 1:1 (нет контрастности) до 21:1 (максимальный, черный на белом). Уровень AA требует 4,5:1 для обычного текста и 3:1 для крупного текста. Уровень AAA требует 7:1 для обычного текста. Соответствие этим стандартам гарантирует, что ваш веб-сайт доступен примерно 1 из 12 мужчин и 1 из 200 женщин с дефицитом цветового зрения, а также для людей с ослабленным зрением.
Какова разница между соответствием AA и AAA?

AA — это минимальный рекомендуемый уровень доступности, требующий коэффициента контрастности 4,5:1 для текста обычного размера и 3:1 для крупного текста (18pt или 14pt жирный шрифт и выше). AAA — это самый высокий уровень, требующий 7:1 для обычного текста и 4,5:1 для крупного текста. Большинство организаций нацелены на соответствие AA, поскольку оно обеспечивает хорошую доступность при разумной гибкости дизайна. AAA идеально подходит для критически важного контента, такого как основной текст на правительственных или медицинских сайтах. Крупный текст имеет более низкие требования, поскольку большие символы по своей природе легче читать.
Как рассчитывается относительная яркость?

Относительная яркость измеряет воспринимаемую яркость цвета по шкале от 0 (черный) до 1 (белый). Формула WCAG сначала преобразует значения sRGB (0-255) в линейный RGB, деля на 255 и применяя гамма-коррекцию. Для значений 0,04045 или меньше разделите на 12,92. Для более высоких значений добавьте 0,055, разделите на 1,055 и возведите в степень 2,4. Итоговая яркость составляет 0,2126, умноженное на красный, плюс 0,7152, умноженное на зеленый, плюс 0,0722, умноженное на синий. Эти веса отражают, как человеческие глаза воспринимают яркость, причем зеленый вносит наибольший вклад.
Могу ли я использовать этот инструмент для выбора фирменных цветов?

Да. Введите цвет фона вашего бренда, и инструмент покажет каждый цвет текста, соответствующий стандартам доступности. Это особенно полезно при разработке бренда или редизайне, когда вам нужно убедиться, что ваша цветовая палитра подходит для доступного веб-дизайна. Вы также можете проверить существующие цветовые пары бренда, чтобы убедиться, что они соответствуют требованиям WCAG. Функция экспорта CSS позволяет копировать доступные пары непосредственно в ваши таблицы стилей, экономя время разработки и обеспечивая соответствие с самого начала.