Дизайн государственных систем

Ссылки в тексте

Предлагаемое решение не компромисс, а возможность сделать чтение и навигацию по материалу комфортным для всех. Около 8% мужчин и 0,4% женщин не способны различать один или несколько цветов и их оттенков. Человек, страдающий монохромази́ей (полная цветовая слепота), различает цвета только по их яркости.

Важное отступление. Способы визуализации ссылок на сайте всегда зависят от контекста использования. Мы рассматриваем только ссылки в тексте, а значит, исключение составляют любые интерфейсные элементы.

Примеры и правила

  • Любой человек должен сразу понимать что является ссылкой, а значит, все ссылки в тексте всегда должны быть подчеркнуты.

  • Нельзя подчеркивать текст, который не является ссылкой.

  • Ссылки не должны привлекать много внимания. Яркие ссылки в тексте материала часто создают визуальный шум и безосновательно сбивают с темпа чтения. Более того, уровень контраста цветных ссылок не предсказуем для людей с проблемами цветовосприятия.

Сверху: норма. Снизу: один из множества типов цветовой слепоты
Сверху: норма.
Снизу: один из множества типов цветовой слепоты
Любые варианты цвета упираются в ту или иную проблему цветовой слепоты. Контраст — единственный инструмент, который у нас есть.
Любые варианты цвета упираются в ту или иную проблему цветовой слепоты. Контраст — единственный инструмент, который у нас есть.
Сверху: яркий цвет отвлекает от сути, мешает читать и перетягивает внимание. Снизу: подчеркивания обладают достаточной по WCAG контрастностью
Сверху: яркий цвет отвлекает от сути, мешает читать и перетягивает внимание. Снизу: подчеркивания обладают достаточной по WCAG контрастностью

Правильное решение для всех состояний ссылки

a:link — непосещенная ссылка
Цвет текста: #222222 или RGBA(34, 34, 34, 1) Цвет подчеркивания: #949494 или RGBA(148, 148, 148, 1). Удовлетворяет минимальному требованию контрастности WCAG (Уровень АА).

a:hover — ссылка, над которой находится курсор мыши
Цвет текста: #222222 или RGBA(34, 34, 34, 1). Цвет подчеркивания: #000000 или RGBA(0, 0, 0, 1) (для большего различия контраста при наведении).

a:visited — посещенная ссылка
Цвет текста: #767676 или RGBA(34, 34, 34, 1). Удовлетворяет минимальному требованию контрастности WCAG (Уровень AA) для небольшого размера шрифта. Цвет подчеркивания: #949494 или RGBA(0, 0, 0, 1).

a:active — активная ссылка
Максимальный контраст. Цвет текста: #000000 или RGBA(0, 0, 0, 1). Цвет подчеркивания: #000000 или RGBA(0, 0, 0, 1) (для большего различия контраста при наведении).

Хозяйке на заметку

16 декабря 1997 года в Японии показали 38-ю серию мультсериала “Покемон”, которая стала причиной нервного расстройства более чем у семисот детей. Пострадавшие были госпитализированы с признаками эпилепсии.

Примечания

  • Ссылки в материалах на сайте gov.design соответствуют этим требованиям.

  • К выбору точного расстояния от низа базовой линии до подчеркивания мы вернемся после выбора конкретного шрифта и его значений.

  • Концепция анимации должна быть глобальной. На данном этапе нет возможности описать ее для отдельного элемента.

  • Мы поставили задачу реализовать это решение в рамках официального сайта Президента и других поддерживаемых и разрабатываемых проектов.

  • Эта статья будет пополняться новыми элементами (внешняя ссылка, ссылка вызывающая функциональный элемент без перехода на другую страницу и так далее).