Цвет ссылок: почему #0000FF не работает и 8 цветов ссылок, которые стоит использовать вместо него
Чистый синий - первый цвет ссылок, который выбирает каждый, и неверный рядом с основным текстом и на тёмных экранах. Подчёркивайте, осветляйте на тёмном фоне, показывайте посещённые ссылки, сохраняйте кольцо фокуса. Восемь кодов внутри.
Правильный цвет ссылки - чуть более мягкий синий, который ещё и подчёркнут, а не одинокий #0000FF. Чистый синий - первый цвет ссылок, который выбирает каждый, и он подводит в двух местах: рядом с чёрным основным текстом и на тёмных экранах. Вот четыре исправления и восемь цветов, которые можно отдать разработчику.
Почему #0000FF не работает
Никто не решает использовать #0000FF. Он просто появляется. Это ключевое слово blue в CSS и первый насыщенный синий в любой палитре.
У самих браузеров по умолчанию чуть другие цвета: #0000EE для ссылки и #551A8B для посещённой, и обе они подчёркнуты. Подчёркивание - часть исходной сделки. Дизайнеры убирают его ради чистоты и оставляют синий.
И тогда синему приходится работать в одиночку. Чистый синий очень тёмный. Поставьте его в абзац почти чёрного текста, и они почти неотличимы для тех, кому трудно различать цвета. На тёмном экране ещё хуже: #0000FF тонет в фоне.
Ссылка - это три вещи: цвет, линия и состояние.
Исправление 1: подчеркните
Только цвет
С подчёркиванием
Правило за этим - WCAG 1.4.1, использование цвета.
Ссылка, отмеченная только цветом, должна чётко выделяться на фоне окружающего текста. Чистый синий рядом с чисто чёрным этого не делает, а #0F62FE рядом с #161616, цветом текста у нас здесь, делает. Подчёркивание снимает проблему полностью, потому что ссылка больше не зависит от цвета.
Подчёркивайте ссылки внутри сплошного текста. Навигация, кнопки и карточки - другое дело: их положение и форма уже говорят «можно нажать», так что подчёркивание там необязательно.
Только цвет, оттенки серого
С подчёркиванием, оттенки серого
Исправление 2: осветлите на тёмном
#0000FF на тёмном
#78A9FF на тёмном
Разница огромная. #0000FF на #161616 слишком тёмный для чтения в размере основного текста, а #78A9FF на том же фоне читается легко. Насыщенные цвета, работающие на белом, на тёмном становятся светлее и мягче, тот же приём мы применяем для цветов ошибок.
Держите два синих и переключайте их вместе с темой: #0F62FE на светлых экранах, #78A9FF на тёмных. Наведение сдвигается ещё на шаг: #0043CE на светлом, #A6C8FF на тёмном.
Исправление 3: покажите, где люди уже были
Все ссылки выглядят новыми
Посещённые становятся фиолетовыми
Nielsen Norman Group утверждает это с 2004 года: люди теряются и ходят по кругу, когда посещённые и новые ссылки одного цвета. Фиолетовый - общепринятая норма, браузеры используют его с самого начала. Берите #8A3FFC на светлых экранах и #BE95FF на тёмных. Это стоит одного правила CSS: a:visited.
Исправление 4: оставьте кольцо фокуса
outline: none
Кольцо 2px #0F62FE
Пользователи клавиатуры, переключателей и все, у кого устала рука с мышью, зависят от кольца фокуса.
Удаление его через outline: none без замены нарушает WCAG 2.4.7, видимость фокуса. Если стандартное кольцо браузера не вяжется с вашим дизайном, замените его. Не удаляйте.
Кольцо 2px в цвете ссылки с небольшим отступом - безопасный вариант. WCAG 2.2 описывает сильнейшую форму как периметр не менее 2 CSS-пикселей.
8 цветов ссылок, светлая и тёмная темы
Нажмите на любую плашку, чтобы скопировать её код.
| Роль | Светлая | Тёмная | Для чего |
|---|---|---|---|
| Текст | #161616 | #F4F4F4 | Основной текст вокруг ссылки |
| Ссылка | #0F62FE | #78A9FF | Каждая ссылка в обычном состоянии |
| Наведение | #0043CE | #A6C8FF | Указатель над ссылкой |
| Посещённая | #8A3FFC | #BE95FF | Уже открытые ссылки |
Это токены ссылок IBM Carbon, считанные из опубликованных значений его тем.
Отдайте это разработчику
:root {
--color-text: #161616;
--color-link: #0F62FE;
--color-link-hover: #0043CE;
--color-link-visited: #8A3FFC;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #F4F4F4;
--color-link: #78A9FF;
--color-link-hover: #A6C8FF;
--color-link-visited: #BE95FF;
}
}
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:visited { color: var(--color-link-visited); }
a:hover { color: var(--color-link-hover); }
a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
Порядок важен: :link, :visited, :hover, :focus, :active - классическая последовательность, а правило hover, поставленное перед правилом visited, никогда не победит на посещённой ссылке. Селектор :focus-visible показывает кольцо пользователям клавиатуры и пропускает его при клике мышью, так что причин убирать его ни у кого нет.
Цифры за словами «легко читать»
| Пара | Контраст |
|---|---|
| #0000FF на белом | 8,6 к 1, проходит, но всё равно слишком близок к чёрному тексту |
| #0000FF на #161616 | 2,1 к 1, не проходит |
| #0F62FE на белом | 5,0 к 1 |
| #0043CE на белом | 7,8 к 1 |
| #8A3FFC на белом | 5,0 к 1 |
| #78A9FF на #161616 | 7,7 к 1 |
| #A6C8FF на #161616 | 10,6 к 1 |
| #BE95FF на #161616 | 7,7 к 1 |
Первая строка объясняет, почему одного чекера недостаточно. Чистый синий на белом проходит по цифре. Но он не проходит настоящий тест: отличается ли ссылка от чёрного текста рядом.
FAQ
Какого цвета должны быть ссылки?
Средний синий вроде #0F62FE на светлых фонах и более светлый синий вроде #78A9FF на тёмных, с подчёркиванием в основном тексте.
Хороший ли цвет ссылки #0000FF?
Не сам по себе. На белом он читается нормально, но слишком близок к чёрному основному тексту для людей, которые не различают синий, а на тёмных фонах почти исчезает.
Нужно ли подчёркивать ссылки?
Да, внутри абзацев. WCAG 1.4.1 говорит, что одного цвета недостаточно для обозначения ссылки, если она чётко не выделяется на фоне окружающего текста, а подчёркивание снимает эту зависимость.
Какого цвета должны быть посещённые ссылки?
Фиолетового. Браузеры по умолчанию используют #551A8B, а дизайн-системы вроде IBM Carbon берут #8A3FFC на светлых экранах и #BE95FF на тёмных.
Какой цвет ссылок работает в тёмном режиме?
Более светлый синий. #78A9FF легко читается на #161616, где #0000FF слишком тёмный для чтения в размере основного текста.
Можно ли убрать контур фокуса у ссылок?
Только если заменить его другим видимым индикатором. Удаление без замены нарушает WCAG 2.4.7, видимость фокуса.
Источники
- HTML Living Standard, Rendering: таблица стилей по умолчанию задаёт
:linkкак #0000EE,:visitedкак #551A8B и подчёркивает ссылки. #0000FF - именованный цвет CSSblue. - IBM Carbon color tokens, считано из @carbon/themes 11.40.0: link-primary #0F62FE, hover #0043CE, visited #8A3FFC в белой теме; #78A9FF, #A6C8FF, #BE95FF в теме g100.
- WCAG 2, 1.4.1 Use of Color и техника G183.
- WCAG 2.4.7 Focus Visible и 2.4.13 Focus Appearance.
- Nielsen Norman Group, Change the Color of Visited Links (Якоб Нильсен, 2004).
- Коэффициенты контраста вычислены по формуле относительной яркости WCAG. Пример текста придуман для этой страницы.
- Впервые опубликовано как карусель в UX Brainy.
Want links, forms and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
