Как выбрать различимый цвет ссылок

Разделяйте читаемость и распознавание ссылки

Сначала определите, читается ли текст ссылки на её фоне. По критерию успеха 1.4.3 WCAG 2.2 обычному тексту обычно требуется коэффициент контрастности не менее 4,5:1, а подходящему крупному тексту — 3:1. Это сравнение не объясняет читателю, какие слова являются ссылками. Критерий 1.4.1 также требует, чтобы цвет не был единственным визуальным способом передачи информации или различения элемента. Постоянное подчёркивание решает задачу напрямую: оно остаётся заметным в оттенках серого и не зависит от восприятия тона. Типографика и расположение тоже дают контекст, но встроенным в абзац ссылкам полезна явная декорация.

• Измеряйте каждый цвет ссылки на фактическом фоне, включая карточки, баннеры, строки таблиц и тёмные поверхности.
• Сохраняйте подчёркивание или другой постоянный признак формы у ссылок в тексте, а не показывайте его только при hover.
• Не отличайте ссылку от соседнего текста одним цветом, когда размер и насыщенность шрифта у них одинаковы.
• Пишите осмысленный текст ссылки, чтобы доступное имя описывало назначение без опоры на окружающий цвет.

Задайте полную матрицу состояний

Default, visited, hover, focus и active — отдельные отрисованные состояния. Каждый цвет переднего плана должен читаться на фоне, а смена состояния не должна убирать признак ссылки. Visited помогает распознать историю навигации, но не должен становиться настолько бледным, что перестаёт проходить контраст текста. Hover даёт обратную связь пользователю указателя, однако не заменяет клавиатурный индикатор фокуса. Active может длиться недолго, но текст и в нём не должен исчезать. Документируйте разрешённые цвет и декорацию каждого состояния, затем проверяйте их внутри реальных компонентов.

Реализуйте цвет и декорацию вместе

CSS должен описывать ссылку сочетанием цвета текста, декорации и оформления фокуса. Пример сохраняет подчёркивание в состояниях default и visited, увеличивает его толщину при hover и добавляет отдельную обводку фокуса. Значения приведены как иллюстрация: их необходимо заново измерить на каждом поддерживаемом фоне. Селектор focus-visible в совместимых браузерах нацелен на клавиатурный вариант фокуса, а нативное поведение должно оставаться запасным вариантом. Не задавайте outline: none без равноценной видимой замены. Одинаковый код во всех переводах исключает расхождения при копировании реализации.

a {
  color: #005FCC;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

a:visited {
  color: #6F42C1;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

a:focus-visible {
  outline: 3px solid #6D28D9;
  outline-offset: 3px;
}

Проверяйте контраст с обоими соседями

У ссылки внутри строки есть фон позади и обычный текст рядом. Контраст текста относится к первому сравнению. Если реализация намеренно различает ссылки цветом, достаточная техника W3C G183 описывает отношение 3:1 между ссылкой и окружающим текстом вместе с дополнительным визуальным признаком при hover или focus. Постоянное подчёркивание проще: оно непрерывно создаёт нецветовое различие, хотя не отменяет читаемость текста на фоне. Рассчитывайте коэффициенты по итоговым цветам sRGB, включая результат прозрачности. Названия тона вроде «синий» или «фиолетовый» ничего не доказывают без численного измерения. G183 — достаточная техника, а не обязательная реализация и не единственный способ выполнить критерий.

• Рассчитайте контраст ссылки с фоном для default, visited, hover, focus и active цветов переднего плана.
• Если встроенную ссылку различает цвет, оцените также соседний основной текст и сверяйтесь с применимой техникой.
• Считайте подчёркивание, обводку, иконку и другие формы явными сигналами, а не полагайтесь на смену тона.
• После opacity, оверлея или смешивания пересчитайте итоговый цвет, поскольку исходный токен может измениться.
• Осторожно проверяйте ссылки в приглушённых контейнерах: активная ссылка не должна выглядеть недоступной.

Сохраняйте семантику и видимый фокус

Если элемент выполняет навигацию, он должен оставаться ссылкой с действительным адресом. Нативная семантика даёт клавиатурное управление, поведение фокуса и информацию вспомогательным технологиям, которых нет у цветного span. Видимый индикатор фокуса нужно оценивать в каждом контексте, особенно внутри карточки, меню или тёмного баннера. Обводка способна касаться нескольких цветов, поэтому рассматривайте все прилегающие области. Изменение одного цвета не должно быть единственным признаком фокуса. Также не маскируйте под ссылки кнопки, выполняющие действие на текущей странице: правильная семантика уменьшает число исключений и делает поведение предсказуемым.

Тестируйте контент, состояния и окружение

Проверьте ссылки в абзацах, навигации, карточках, таблицах, предупреждениях, подвале и сообщениях об ошибках. Пройдите их клавиатурой, изучите порядок и видимость фокуса, затем посетите несколько адресов, чтобы проявился visited. Увеличьте масштаб браузера и включите высококонтрастный режим или forced colors там, где они поддерживаются. Автотесты могут проверять пары токенов и наличие подчёркивания, но не оценят ясность формулировки назначения или обрезание обводки через overflow. Используйте длинные переведённые подписи: перенос способен поместить части ссылки на разные фоны. Повторяйте матрицу после изменения общих токенов типографики, поверхности или ссылок.

• Отрисуйте встроенные, отдельные, навигационные, карточные и табличные ссылки на каждой разрешённой поверхности.
• Пройдите каждый пример клавиатурой и убедитесь, что фокус виден без наведения указателя.
• Откройте адреса, проявите visited и заново измерьте его контраст вместо проверки только чистого профиля.
• Проверьте масштаб, переносы, forced colors и переводы до фиксации утверждённой матрицы состояний.