Текст в фоновой проверке

• Мгновенный анализ читаемости текста: текст в фоновой проверке обновляет каждое значение при каждом нажатии клавиши — кнопка не нажимается. Введите любой цвет переднего плана и фона и сразу же получите коэффициент контрастности WCAG, статус соответствия AA/AAA и предварительный просмотр текста в реальном времени. Поменяйте цвета или попробуйте предустановленные пары одним щелчком мыши.
• Регулируемый размер и вес шрифта. Переключайтесь между стандартными масштабами текста WCAG — мелким текстом (обычным), крупным текстом, мелким жирным и большим жирным шрифтом — или устанавливайте собственные размеры шрифта от 12 до 48 пикселей и толщину шрифта от 400 до 700. Посмотрите, как именно меняется читаемость при настройке этих параметров, с помощью предварительного просмотра текста выбранного размера в реальном времени.
• Расчеты, соответствующие стандарту WCAG 2.1. Во всех расчетах контрастности используются официальная формула относительной яркости WCAG 2.1 и пороговые значения. Программа проверки оценивает соответствие AA (4,5:1 для обычного текста, 3:1 для крупного текста) и соответствие AAA (7:1 для обычного текста, 4,5:1 для крупного текста) с помощью четких значков «прошел/не прошел».
• 100% бесплатно — регистрация не требуется: текст в фоновой проверке совершенно бесплатен, без регистрации, подписки и ограничений на использование. Все расчеты выполняются локально в вашем браузере — ваши цвета и текст никогда не покидают ваше устройство. Никакой рекламы, блокирующей интерфейс.

• Соответствие веб-доступности: разработчики внешнего интерфейса перед отправкой используют текст в фоновой проверке, чтобы убедиться, что выбранный ими цвет соответствует требованиям WCAG AA или AAA. Проверяйте основной текст, заголовки и надписи на кнопках, используя их фактические размеры и вес шрифта, чтобы гарантировать, что проблемы с доступностью не дойдут до рабочей версии.
• Проверка цвета системы дизайна: специалисты по сопровождению системы дизайна используют текст в средстве проверки фона для проверки каждой пары цветов в своей библиотеке токенов дизайна. Протестируйте основные, вторичные, текстовые и фоновые комбинации в разных масштабах текста, чтобы обеспечить единообразную доступность всей библиотеки компонентов.
• Аудит и исправление WCAG. Аудиторы доступности используют текст при проверке биографических данных для документирования и исправления ошибок контрастности. Предварительный просмотр в реальном времени и четкие значки «прошел/не прошел» позволяют легко демонстрировать проблемы заинтересованным сторонам и тестировать предлагаемые изменения цвета перед их реализацией.
• Мобильный и адаптивный дизайн. Мобильные дизайнеры используют проверку текста на фоне, чтобы проверить читаемость на экранах разных размеров. Мелкий текст (14 пикселей) на мобильном фоне требует более высокого коэффициента контрастности 4,5:1, тогда как для больших заголовков размером 24 пикселя можно использовать порог 3:1 — программа проверки обрабатывает оба сценария.
• Электронная почта и цифровая публикация. Дизайнеры электронной почты и цифровые издатели используют текст для проверки биографических данных, чтобы обеспечить читабельность своих информационных бюллетеней и статей. Благодаря разным цветам фона и размерам текста в разных разделах средство проверки помогает поддерживать доступность при использовании фирменных цветов.
• Информационная панель и визуализация данных. Аналитики данных и дизайнеры информационных панелей используют текст средства проверки фона, чтобы убедиться, что метки, легенды и аннотации остаются читабельными на фоне диаграммы. Режим пользовательского размера шрифта позволяет тестировать точные размеры, используемые при визуализации данных.

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

1. Введите цвета: введите или выберите цвет переднего плана (текста) и цвет фона с помощью ввода цвета или палитры цветов. Вся обработка выполняется локально в вашем браузере — ваши цвета никогда не покидают ваше устройство. Используйте кнопки предустановки для общих пар цветов или кнопку замены, чтобы поменять местами передний план и фон.
2. Выберите размер и насыщенность текста. Выберите один из стандартных масштабов текста WCAG — Мелкий текст (обычный), Крупный текст, Мелкий полужирный или Крупный полужирный — или переключитесь в пользовательский режим для точного управления размером шрифта (12–48 пикселей) и весом (400–700). Средство проверки автоматически использует правильные пороговые значения WCAG на основе вашего выбора.
3. Прочтите результаты: коэффициент контрастности отображается на видном месте вверху с индикатором качества с цветовой маркировкой (отличное, хорошее, среднее или плохое). Значки «пройден/не пройден» для WCAG AA и AAA показывают, соответствует ли ваш текст требованиям доступности. Предварительный просмотр текста в реальном времени позволяет вам увидеть, как именно выглядит ваш текст с выбранным размером и весом.

• Мелкий текст (обычный): основной текст, метки и подписи размером менее 18 пунктов (24 пикселей) обычного веса или менее 14 пунктов (18,67 пикселей) жирным шрифтом. Требуется коэффициент контрастности 4,5:1 для соответствия стандарту AA и 7:1 для соответствия стандарту AAA. Это наиболее распространенная текстовая категория в Интернете.
• Крупный текст: текст размером не менее 18 пунктов (24 пикселей) обычного размера или не менее 14 пунктов (18,67 пикселей) жирным шрифтом. Заголовки обычно считаются крупным текстом. Требуется коэффициент контрастности 3:1 для соответствия стандарту AA и 4,5:1 для соответствия стандарту AAA. К большому тексту предъявляются меньшие требования, поскольку его легче читать.
• Нестандартные размеры: средство проверки использует определение WCAG, чтобы определить, какой порог применяется. Если ваша пользовательская комбинация размера и насыщенности шрифта соответствует определению крупного текста (24 пикселя обычного или 18,67 пикселя полужирного), автоматически используются более мягкие пороговые значения для крупного текста.

Начните с высокой контрастности: черный текст на белом фоне (21:1) — наиболее читаемая комбинация. Хотя фирменные цвета важны, всегда проверяйте их на своем фоне. Распространенной ошибкой является использование светло-серого текста на белом фоне: даже средне-серый (#767676) на белом фоне обеспечивает соотношение только 4,0:1, что не соответствует требованию AA 4,5:1 для обычного текста.

При выборе цвета учитывайте размер текста: вы можете использовать более низкий коэффициент контрастности для больших заголовков (минимум 3:1 AA), сохраняя при этом более высокий контраст для основного текста (минимум 4,5:1 AA). Это обеспечивает большую гибкость дизайна отображаемого текста, сохраняя при этом доступ к основному содержимому. Всегда предоставляйте предлагаемые цвета текста с рекомендацией программы проверки черно-белого цвета, если цвет фона слишком светлый или темный.

Тестируйте с реальным контентом. Используйте предварительный просмотр редактируемого текста для тестирования с реальной копией. Средство проверки позволяет вам ввести любой текст и просмотреть его в выбранном размере и весе, что дает вам истинное представление о том, как ваш контент будет выглядеть для пользователей.