Проверка цветового контраста ссылок

• Мгновенная проверка двойного контраста: средство проверки цветового контраста ссылок оценивает контраст как по отношению к фону, так и к окружающему основному тексту при каждом нажатии клавиши. Не нужно нажимать кнопку — введите три цвета и мгновенно увидите результаты «пройден/не пройден» WCAG по всем критическим критериям контрастности ссылок.
• WCAG SC 1.4.1 Идентификация ссылок: специально проверяет критерий успеха WCAG 1.4.1 (использование цвета) для ссылок. Проверяет, что цвета ссылок имеют коэффициент контрастности по отношению к основному тексту не менее 3:1, что позволяет пользователям с нарушениями цветового зрения отличать ссылки от обычного контента.
• 100% приватная обработка в браузере: все расчеты контрастности полностью выполняются в вашем браузере с использованием формулы относительной яркости WCAG 2.1. Ваши значения цвета никогда не покидают ваше устройство и никогда не отправляются на какой-либо сервер — это абсолютно безопасно для фирменных цветов брендов и клиентских проектов.
• Бесплатно и без регистрации: проверяйте цветовой контраст ссылок столько раз, сколько вам нужно, без регистрации, подписки и ограничений на использование. Инструмент полностью бесплатен навсегда с предварительным просмотром, который обновляется в реальном времени.

• Веб-разработка и дизайн CSS. Разработчики внешнего интерфейса используют средство проверки цветового контраста ссылок, чтобы перед отправкой убедиться, что стили ссылок соответствуют требованиям WCAG SC 1.4.1. Обеспечение отличия ссылок от основного текста как по цвету, так и по контрасту предотвращает проблемы доступности в рабочих таблицах стилей.
• Проверка токена ссылки системы дизайна. Специалисты по сопровождению системы дизайна используют средство проверки цветового контраста ссылок, чтобы проверить, что токены цвета ссылки — по умолчанию, посещенные, наведенные, активные — имеют достаточный контраст как с фоновыми токенами, так и с токенами цвета основного текста перед публикацией.
• Сайты электронной коммерции и контента. Команды электронной коммерции используют средство проверки цветового контраста ссылок, чтобы убедиться, что ссылки на страницы продуктов, навигационные ссылки и ссылки в нижнем колонтитуле соответствуют требованиям WCAG, что крайне важно для пользователей с плохим зрением, которые полагаются на четкое различение ссылок при просмотре.
• Аудит WCAG и соответствие требованиям доступности. Аудиторы доступности используют средство проверки цветового контраста ссылок во время аудита WCAG 2.1 AA. SC 1.4.1 является распространенной точкой отказа. Этот инструмент предоставляет четкие результаты «прошел/не прошел» и практические предложения по исправлению.
• Управление контентом и публикация: редакторы контента и издатели используют средство проверки цветового контраста ссылок, чтобы убедиться, что встроенные ссылки в статьях и сообщениях блога четко отличаются от окружающего основного текста, что повышает читаемость для всех пользователей.
• Мобильный и адаптивный дизайн. Мобильные дизайнеры используют средство проверки цветового контраста ссылок, чтобы гарантировать, что цвета ссылок будут работать в светлых и темных темах на маленьких экранах, где различение ссылок только по цвету сложнее из-за бликов и меньшего размера текста.

Цветовой контраст ссылок относится к визуальной отличимости гиперссылок как от фона, на котором они расположены, так и от окружающего основного текста, что измеряется по формуле коэффициента контрастности WCAG 2.1. В отличие от стандартной проверки контрастности текста, оценка цвета ссылки включает в себя две отдельные проверки: ссылка должна иметь достаточный контраст с фоном (стандарт SC 1.4.3), И цвет ссылки должен иметь контраст как минимум 3:1 по отношению к цвету окружающего основного текста (SC 1.4.1 Использование цвета). Это двойное требование существует, поскольку пользователям необходимо идентифицировать ссылки, даже если они не могут воспринимать различия в оттенках - например, пользователи с протанопией (красной слепотой) могут быть не в состоянии отличить синюю ссылку от темно-серого основного текста, если разница в яркости слишком мала. Наша браузерная программа проверки цветового контраста ссылок оценивает оба критерия одновременно, предоставляя комплексную оценку «прошел/не прошел» с практическими рекомендациями.

1. Введите три цвета: введите значения HEX или RGB (или используйте палитру цветов) для цвета ссылки, цвета основного текста и цвета фона. Область предварительного просмотра в реальном времени показывает, как именно будут выглядеть ваши цвета вместе с образцом абзаца, содержащим встроенную ссылку.
2. Мгновенный двухосный расчет: инструмент вычисляет относительную яркость WCAG 2.1 для каждого цвета и рассчитывает три коэффициента контрастности: ссылка по сравнению с фоном, ссылка по сравнению с основным текстом и основной текст по сравнению с фоном. Все расчеты используют стандартную формулу WCAG и выполняются полностью в вашем браузере.
3. Просмотрите результаты и исправьте проблемы. На панели результатов отображается статус «пройден/не пройден» для каждого критерия с полосами соотношений, подробной таблицей соответствия и списком конкретных проблем с практическими предложениями. Используйте кнопку «Копировать отчет», чтобы экспортировать результаты для документации.

• SC 1.4.1 – Использование цвета (уровень AA): Цвет не должен быть единственным визуальным средством передачи информации. Для ссылок, идентифицируемых только цветом, цвет ссылки должен иметь коэффициент контрастности не менее 3:1 по отношению к цвету окружающего основного текста. Это гарантирует, что пользователи смогут различать ссылки, даже если они не могут различать оттенки. Рекомендуется добавлять подчеркивания, значки или другие нецветные индикаторы.
• SC 1.4.3 — Минимальная контрастность (уровень AA): текст ссылки (как и весь текст) должен иметь контрастность не менее 4,5:1 по отношению к фону для обычного текста и 3:1 для крупного текста (жирный шрифт ≥18 пунктов или ≥14 пунктов). Это относится к цвету ссылки на фоне цвета.
• SC 1.4.11 — Нетекстовый контраст (уровень AA): если в ссылках используются подчеркивания, рамки или другие нетекстовые индикаторы, эти индикаторы должны иметь контрастность не менее 3:1 на фоне. Это относится к визуальной границе любого элемента интерактивной ссылки.

Хотя средство проверки цветового контраста ссылок оценивает математические коэффициенты контрастности, истинная доступность ссылок включает в себя нечто большее, чем просто цвет:

• Не полагайтесь только на цвет: всегда сочетайте цвет с подчеркиванием, значками, жирным шрифтом или другими нецветными индикаторами. WCAG SC 1.4.1 явно требует этого: идентификация канала только по цвету не соответствует критерию, даже если коэффициенты контрастности достаточны.
• Учитывайте все состояния ссылки: состояние по умолчанию, посещение, наведение, фокус и активное состояние имеют разные цвета. Каждый штат должен независимо проходить проверку контрастности как фона, так и основного текста.
• Тест с симуляцией дефицита цветового зрения. Цветовая комбинация, прошедшая проверку контрастности, все равно может быть неразличима для пользователей с определенными типами дальтонизма. Используйте симуляторы дальтонизма, чтобы проверить различимость ссылок.
• Предоставляйте описательный текст ссылки: даже при идеальном контрасте ссылки «нажмите здесь» и «читать дальше» недоступны для пользователей программ чтения с экрана. Используйте описательный текст ссылки, который имеет смысл вне контекста.