Контраст текста и ссылок: как проверить цвета сайта
Серый текст на белом фоне может выглядеть аккуратно в макете и оказаться недостаточно контрастным. А хорошо читаемая ссылка может совсем не отличаться от соседнего текста. Чтобы исправить оформление, нужно проверить цветовую пару, назначение элемента и его состояния, затем повторить проверку на работающей странице.
Сначала определите, что посетитель должен прочитать или найти
Начните с важных действий: прочитать условия услуги, найти ссылку на состав работ, заполнить форму, понять ошибку и отправить запрос. Для каждого действия отметьте место, где текст теряется или элемент трудно обнаружить. Общее замечание «сделать всё ярче» не задаёт проверяемой работы.
Запишите страницу, блок и состояние: обычный абзац, подпись поля, ссылка после посещения, кнопка при наведении или сообщение об ошибке. Один цвет может использоваться в нескольких ролях. Поэтому изменение общей палитры требует проверки всех затронутых мест, а не только первого экрана.
Разделите три вопроса. Читается ли надпись относительно её фона? Понятно ли, что перед человеком ссылка или элемент управления? Видно ли текущее состояние — выбор, ошибка или клавиатурный фокус? Высокий показатель одной цветовой пары не отвечает сразу на все три.
Для первого прохода удобно составить небольшой список типовых элементов: основной текст, второстепенные пояснения, ссылки внутри абзацев, кнопки и поля формы. После него переходите к отдельным сложным экранам. Такой порядок помогает исправлять повторяемые причины, сохраняя понятную область проверки.
Выберите критерий для конкретной части интерфейса
WCAG 2.2 задаёт для обычного текста минимальное отношение контраста 4,5:1 по критерию 1.4.3. Для крупного текста предусмотрено 3:1; крупный текст определяется размером и насыщенностью по правилам WCAG, а не впечатлением «похож на заголовок». Во всех числовых примерах ниже рассматривается обычный текст и порог 4,5:1.
| Объект | Предмет проверки | Что дополнительно учитывать |
|---|---|---|
| Обычный текст и подпись кнопки | Контраст надписи с её непосредственным фоном — не менее 4,5:1 | Размер, насыщенность и фактические цвета в каждом состоянии |
| Ссылка внутри абзаца | Контраст текста ссылки с фоном и возможность отличить её от остального текста | Один хороший коэффициент не подтверждает заметность действия |
| Значимая граница поля или знак состояния | По 1.4.11 — не менее 3:1 с соседними цветами для необходимой визуальной информации, с предусмотренными исключениями | Сначала определить, какая часть действительно нужна для распознавания элемента или состояния |
| Клавиатурный фокус | Видимость указателя текущего элемента при работе клавиатурой | Проверить переходы между элементами на готовой странице |
У кнопки отдельно рассматривают надпись и визуальные признаки самого элемента. Порог 3:1 для значимой нетекстовой информации не означает, что обычной надписи на кнопке достаточно того же значения. И наоборот, не каждой декоративной линии автоматически требуется проверка как границе элемента управления.
В критерии контраста текста есть исключения, в том числе текст в логотипе и неактивных элементах. Они не дают основания объявлять все пояснения мелким шрифтом декоративными. Если текст объясняет условия или помогает выполнить действие, его роль должна быть определена по содержанию.
Выбранный критерий сохраняйте рядом с замечанием. Формулировка «ниже 4,5:1 для обычной подписи» полезнее слова «не соответствует» без указания того, что и по какому условию проверено.
Учебный пример: четыре пары текста и фона
Представим вымышленную страницу мастерской светильников. Ниже заданы четыре сплошные непрозрачные пары sRGB без фотографий, градиентов, прозрачности и наложений. Цвета и ситуации учебные; проверка сайта Salestudia или реального клиента здесь не проводилась. Отношения рассчитаны по формуле относительной яркости W3C.
| Цвет текста | Цвет фона | Контраст | Проверка порога 4,5:1 |
|---|---|---|---|
| #777777 | #FFFFFF | 4,4781:1 | Не достигнут |
| #767676 | #FFFFFF | 4,5422:1 | Достигнут |
| #FFFFFF | #FACC15 | 1,5314:1 | Не достигнут |
| #111111 | #FACC15 | 12,3304:1 | Достигнут |
Два серых оттенка выглядят близкими, но находятся по разные стороны границы. Результат 4,4781:1 нельзя округлить до 4,5:1 и принять за прохождение. W3C прямо рассматривает пороги как границы без такого округления. Статусы в таблице определены по неокруглённым результатам; сокращённая запись нужна только для чтения.
Замена белой надписи на тёмную на заданном жёлтом фоне существенно меняет отношение контраста. Однако это ещё не готовое решение для всех жёлтых кнопок. На реальной странице нужно проверить размер, фон, состояние и назначение элемента; учебные коды не описывают произвольный оттенок с тем же бытовым названием.
Пара #767676 на белом проходит выбранную числовую границу с небольшим запасом. Это не повод намеренно подбирать все цвета вплотную к порогу. Тонкое начертание и особенности отображения могут затруднять чтение; полезно оценивать реальный текст, сохраняя расчёт как отдельную проверку.
Получите фактические цвета из реализации
Попросите разработчика указать цвет текста и фона из работающей страницы, а не подбирать похожие значения по маленькому снимку. Для воспроизводимой проверки сохраните формат записи, прозрачность и состояние элемента. Слова «светло-серый на белом» не заменяют этих данных.
Шестизначная запись вроде #777777 задаёт компоненты цвета; восьмизначная может дополнительно задавать прозрачность. MDN описывает обе формы. Поэтому нельзя отбросить последние символы значения с прозрачностью и считать, что проверена та же видимая пара.
В упражнении использованы только непрозрачные сплошные цвета. Если в проекте есть прозрачность, наложение на фото, фильтр или градиент, сначала определите фактическое сочетание в месте текста. Для такого случая двух условных кодов из брендбука может оказаться недостаточно.
Не снимайте случайный полупрозрачный пиксель на сглаженном краю буквы и не выдавайте его за основной цвет шрифта. Сохраните используемый способ измерения. Если результаты двух проверок расходятся, сначала сопоставьте входные цвета и условия, затем обсуждайте изменение палитры.
Сделайте ссылку различимой внутри текста
Тёмная ссылка на светлом фоне может хорошо читаться и выглядеть точно так же, как окружающий абзац. Контраст с фоном подтверждает читаемость цветовой пары, но не объясняет посетителю, где находится переход. Отдельно проверьте, как действие выделено в тексте.
По критерию 1.4.1 цвет не должен быть единственным визуальным способом передачи информации или обозначения действия. Для обычных ссылок внутри абзацев практичный вариант — постоянное подчёркивание вместе с читаемым цветом. Это выбранный способ оформления, а не утверждение, что любая ссылка в любом меню обязана выглядеть одинаково.
Проверьте обычную, посещённую ссылку, наведение и клавиатурный фокус. После смены цвета посещённая ссылка не должна терять читаемость, а действие — становиться неразличимым. Информация, появляющаяся только при наведении мышью, не описывает весь путь человека, который использует клавиатуру или сенсорный экран.
Не исправляйте один абзац, забывая остальные ссылки того же типа. Сначала выясните, можно ли изменить общий стиль ссылок в содержании; затем проверьте его на светлых и тёмных блоках. Навигация, кнопки и ссылки в тексте могут иметь разные стили при понятной общей системе.
Назначение ссылки тоже должно быть ясным. Цвет не исправит подпись «сюда», если рядом не видно, что откроется. Отредактируйте текст перехода и проверьте фактический адрес как отдельную часть приёмки.
Проверьте фотографию и состояния элементов отдельно
Один удачный замер не описывает заголовок на меняющейся фотографии. При другом кадрировании за словами может оказаться светлый участок, хотя в настольном макете там был тёмный. Проверяйте непосредственно фон под текстом в согласованных вариантах страницы.
Для учебной мастерской можно выбрать устойчивую однотонную подложку под условиями запроса или изменить размещение текста. Решение должно сохранять смысл фотографии и читаемость надписи. Добавление тени само по себе не подтверждает результат: после изменения нужно снова проверить получившуюся композицию.
Повторите просмотр на узкой и широкой версии, с длинным заголовком и после смены изображения. Если есть слайдер или видеофон, учитывайте разные кадры. В задаче укажите проверенные состояния и те, которые пока не покрыты, вместо общей отметки «баннер готов».
В форме проверьте подписи, введённые значения и сообщения об ошибках. Красная рамка без понятного пояснения может оставлять открытым вопрос, что именно исправить. Сохраните текст ошибки и связь с полем; цвет должен дополнять сообщение, а не заменять его.
При работе клавишей Tab видно, какой элемент сейчас выбран для действия. W3C описывает видимый клавиатурный фокус как отдельное требование. Не убирайте его ради более чистого вида: подготовьте различимое оформление и проверьте маршрут на готовой странице.
Передайте дизайнеру задачу с проверяемым результатом
Продолжим вымышленный пример мастерской. В макете перед формой используется обычная белая надпись на сплошном жёлтом фоне. Цветовая пара задана точно, поэтому замечание можно воспроизвести и проверить после исправления.
| Поле | Пример записи |
|---|---|
| Место и состояние | Страница услуги, блок перед формой, обычное состояние; учебная версия К-01 |
| Наблюдение | Обычный текст #FFFFFF на непрозрачном фоне #FACC15; расчётное отношение 1,5314:1 |
| Критерий | Для выбранного обычного текста требуется не менее 4,5:1 по 1.4.3 |
| Предлагаемая правка | В версии К-02 проверить текст #111111 на том же фоне; расчёт пары 12,3304:1 |
| Связанные места | Ссылки внутри блока, надписи кнопок и повторные блоки с теми же стилями |
| Приёмка | Подтвердить фактические цвета, повторить расчёт и пройти связанные состояния на готовой странице |
| Статус | Предложено исправление; реальная реализация в этом упражнении не проверялась |
Таблица разделяет найденную проблему, предложенное решение и подтверждение внедрения. Если дизайнер выберет другую подходящую пару, её тоже можно принять после проверки согласованных условий. Цель задачи — читаемый и понятный интерфейс, а не обязательное использование кода из упражнения.
Согласуйте изменения общих стилей. Если цвет применён сразу ко всем второстепенным подписям, проверьте светлые карточки, тёмный подвал и ошибки формы. Локальное исправление способно выявить другой фон, для которого прежнее общее правило уже не подходит.
Сохраните название новой версии и ответственного за публикацию. Снимок исправленного макета не подтверждает, что обновлённый стиль уже появился на сайте. Проверка должна завершаться просмотром нужной версии по реальному адресу.
Повторите короткую приёмку после изменения палитры
Сравните опубликованную страницу с согласованным списком правок. Проверяйте не только главный заголовок: изменение переменной цвета может затронуть подписи, ссылки и состояния формы в других блоках. Для каждого результата сохраните место, условия и замечание, если оно осталось.
| Проверка | Что выполнить | Что записать |
|---|---|---|
| Основной и второстепенный текст | Проверить реальные пары на всех используемых фонах | Цвета, размер, выбранный критерий и результат |
| Ссылки в содержании | Найти ссылки без подсказки автора и пройти их | Различимость, читаемость и правильный адрес |
| Кнопки и поля | Проверить надписи и необходимые визуальные признаки отдельно | Состояния и критерий для соответствующей части |
| Клавиатура | Пройти интерактивные элементы клавишей Tab | Виден ли фокус; где маршрут требует исправления |
| Фото и разные размеры | Проверить согласованные кадрирования и длинные тексты | Какие варианты просмотрены и что осталось открытым |
| Ошибка формы | Ввести согласованные некорректные тестовые данные | Понятно ли сообщение и можно ли исправить ответ |
Калькулятор цветовой пары полезен, но не обнаруживает автоматически все проблемы страницы. Ему могут передать неверный фон или не проверить скрытое до взаимодействия состояние. Сопоставляйте результат инструмента с конкретным элементом и ручным прохождением сценария.
W3C предупреждает, что простые предварительные проверки охватывают лишь часть вопросов доступности. Прохождение списка контраста не означает, что проверены управление, структура, текстовые альтернативы и все остальные аспекты сайта. В итоговой записи перечислите выполненные проверки без расширения их смысла.
Если одновременно меняется оформление и текст, сохраните оба изменения. Так следующий редактор поймёт, что именно нужно повторно проверить при замене изображения, добавлении языка или нового сообщения формы.
Сохраните палитру как систему применения
Для команды полезнее список проверенных сочетаний по назначению, чем набор красивых квадратов без пояснений. Укажите основной текст, пояснения, ссылки, надписи кнопок и разрешённые фоны. Приложите примеры состояний, чтобы новый блок не приходилось оформлять наугад.
В учебном случае итогом может быть решение проверить тёмную надпись на жёлтой подложке и явно выделить ссылки в абзацах. Это обоснованное направление правки по заданным условиям. Оно не является измеренным ростом конверсии и не подтверждает доступность всего реального сайта.
Salestudia создаёт сайты для бизнеса в Германии и других странах. В проекте можно согласовать дизайн интерфейса, систему повторно используемых элементов, адаптивную разработку и проверку качества. Перечень экранов, состояний и критериев приёмки фиксируется для конкретной задачи.
Для обсуждения подготовьте адреса страниц, примеры проблемных элементов и текущие материалы оформления. Сначала определите, где посетитель теряет текст или действие, затем согласуйте исправление и способ его проверки. Такой порядок связывает визуальное решение с задачей пользователя.
Официальные и профильные ссылки
Эти материалы дают контекст для данных, правил и рекомендаций на странице.
- W3C — Contrast (Minimum), 1.4.3 Источник проверен: 29.10.2026
- W3C — Use of Color, 1.4.1 Источник проверен: 29.10.2026
- W3C — Non-text Contrast, 1.4.11 Источник проверен: 29.10.2026
- W3C — расчёт и проверка контраста, G18 Источник проверен: 29.10.2026
- W3C — Focus Visible, 2.4.7 Источник проверен: 29.10.2026
- W3C WAI — Easy Checks Источник проверен: 29.10.2026
- MDN — запись цвета и прозрачности Источник проверен: 29.10.2026
Часто спрашивают
Ответы уточняют объём работ, роли, зависимости и способ оценки результата.
Если серый текст хорошо виден мне, нужно ли считать контраст?
Личное впечатление полезно, но не заменяет воспроизводимую проверку пары. Сохраните фактические цвета, роль и размер текста, затем сопоставьте результат с подходящим критерием.
Можно ли округлить 4,4781:1 до 4,5:1 и принять текст?
Нет. Порог 4,5:1 сравнивают с неокруглённым расчётом. В учебной таблице пара #777777 на #FFFFFF этой границы не достигает.
Любой текст на кнопке достаточно проверить по порогу 3:1?
Нет. Надпись и значимые нетекстовые признаки проверяются отдельно. Для обычного текста в статье используется 4,5:1; 3:1 нельзя автоматически перенести с границы элемента на его надпись.
Достаточно ли сделать ссылку другого цвета?
Проверьте и контраст с фоном, и различимость действия. Для ссылок внутри абзацев постоянное подчёркивание может служить дополнительным визуальным признаком, не зависящим только от цвета.
Хороший коэффициент контраста подтверждает доступность всего сайта?
Нет. Он относится к проверенной паре и условиям. Фокус, управление, состояния, содержание и другие аспекты требуют соответствующих отдельных проверок.
Удобнее написать напрямую?
Коротко укажите компанию, рынок и задачу — так разговор будет предметнее.