Поиск названий цветов WCAG

• Мгновенная проверка соответствия WCAG: поиск оценивает более 250 именованных цветов относительно вашего фона при каждом нажатии клавиши. Каждый цвет показывает точный коэффициент контраста WCAG и уровень соответствия (AAA, AA, AA Large или Не пройдено) - не нужно нажимать кнопку и перезагружать страницу.
• Более 250 именованных цветов из 3 источников: включает все 148 именованных цветов CSS, более 50 расширенных названий X11 и более 80 приближений Pantone - самая широкая возможная палитра доступных цветов текста для любого цвета фона.
• 100 % конфиденциально - без загрузок: все расчёты контраста происходят локально в вашем браузере. Ваши значения цветов никогда не покидают устройство и не отправляются на сервер - безопасно для клиентских проектов и проприетарных брендовых систем.
• Бесплатно и без ограничений: проверяйте неограниченное число цветов фона без регистрации, подписки и лимитов. Поиск названий цветов WCAG полностью бесплатен навсегда, без рекламы, блокирующей интерфейс.

• Доступная фронтенд-разработка: фронтенд-разработчики используют поиск, чтобы выбрать цвета текста, соответствующие требованиям доступности. Введите цвет фона вашего дизайна и сразу увидите, какие именованные цвета CSS проходят WCAG AA или AAA, затем скопируйте значение HEX прямо в таблицу стилей.
• Аудит соответствия WCAG AA/AAA: аудиторы доступности используют поиск, чтобы быстро найти доступные альтернативы цвета текста для любого фона. Значки «пройдено/не пройдено» с цветовой кодировкой и отображение коэффициента контраста упрощают проверку того, что выбранные цвета текста соответствуют правовым стандартам доступности.
• Выбор токенов цвета дизайн-системы: ответственные за дизайн-системы используют поиск для проверки токенов цвета текста. Проверяя каждый токен относительно всех токенов фона, они могут задокументировать, какие комбинации проходят WCAG AA/AAA, а какие требуют альтернативных значений токенов ради доступности.
• Доступность мобильных приложений: разработчики мобильных приложений используют поиск, чтобы выбрать цвета текста для приложений iOS и Android. Инструмент работает с любым цветом фона в HEX - просто введите фон вашего приложения и просмотрите доступные названия цветов с их точными коэффициентами контраста.
• Тестирование доступности при слабом зрении: дизайнеры, тестирующие доступность при слабом зрении, используют поиск, чтобы убедиться, что их цвета соответствуют требованиям усиленного контраста (AAA). Режим фильтра AAA показывает только самые контрастные цвета, подходящие для пользователей с умеренными нарушениями зрения.
• Дизайн веб-контента и email: создатели веб-контента и дизайнеры email используют поиск, чтобы текст был читаемым на различных фонах. Благодаря более 250 именованным цветам из нескольких источников он даёт больше доступных вариантов, чем ручное угадывание значений цвета.

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

1. Введите цвет фона: введите значение HEX (например, #1E3A5F) или выберите цвет визуально с помощью палитры. Можно также нажать на один из 16 пресетов фона (Белый, Чёрный, Тёмно-синий, Бежевый и т. д.) для быстрой проверки. Вся обработка выполняется локально в вашем браузере - данные о цветах никогда не покидают устройство.
2. Просмотрите доступные цвета: инструмент мгновенно оценивает все более 250 именованных цветов из нашей базы относительно вашего фона. Каждый цвет показывает коэффициент контраста, значок соответствия (AAA, AA, AA Large или Не пройдено) и визуальный предпросмотр цвета на вашем фоне. Используйте вкладки фильтра, чтобы показывать только цвета, соответствующие AA+ или AAA.
3. Скопируйте любой цвет: нажмите на любую карточку цвета, чтобы скопировать её значение HEX в буфер обмена. Цвета отсортированы по коэффициенту контраста (от наибольшего), что позволяет быстро найти самый контрастный цвет текста для вашего дизайна.

• AAA (7:1): усиленный контраст для обычного текста. Самый высокий стандарт WCAG, рекомендованный для пользователей с умеренными нарушениями зрения. Этого уровня достигают только самые контрастные цвета. Идеально для основного текста в критичных для чтения разделах или при проектировании с приоритетом доступности.
• AA (4,5:1): минимальный контраст для обычного текста. Это правовой стандарт, требуемый большинством норм доступности, включая Section 508 и ADA. Весь основной текст размером менее 18 pt (или 14 pt жирным) должен соответствовать этому уровню. Это наиболее часто требуемый уровень WCAG для веб-контента.
• AA Large (3:1): минимальный контраст для крупного текста (≥18 pt или ≥14 pt жирным) и элементов интерфейса. Это также применяется к нетекстовым элементам, таким как значки, рамки и графические объекты, согласно критерию успеха 1.4.11 WCAG 2.1.
• Не пройдено (<3:1): не соответствует ни одному требованию WCAG по контрасту текста. Цвета этого уровня не следует использовать для текста или важных элементов интерфейса на таком фоне. Рассмотрите их использование только в декоративных целях.

Наш поиск названий цветов WCAG использует стандартную формулу относительной светимости WCAG 2.1, которая учитывает различную чувствительность человеческого глаза к разным длинам волн света. Формула сначала преобразует каждый цвет в его линейные компоненты sRGB, а затем применяет стандартные веса светимости (красный: 0,2126, зелёный: 0,7152, синий: 0,0722). Коэффициент контраста рассчитывается как (L1 + 0,05) / (L2 + 0,05), где L1 - светимость более светлого цвета, а L2 - более тёмного. Это даёт математически точное измерение воспринимаемого контраста в диапазоне от 1:1 (идентичные цвета) до 21:1 (чёрный против белого).