Создание полезных сайтов
Бледный текст на сайте? Проверьте и исправьте контраст
Измерьте реальные цвета текста и фона, выберите порог для размера шрифта, сохраните более контрастную пару и проверьте опубликованную страницу.
Проверьте конкретную опубликованную страницу
Если подпись, абзац или подсказка в форме выглядят бледными, сравните текст с фоном непосредственно за ним. Начните с опубликованной страницы: в предпросмотре редактора цвета могут отличаться. Для обычного текста ориентируйтесь на коэффициент контраста WCAG 2.2 не ниже 4,5:1, лучше с запасом.
- В Chrome нажмите на текст правой кнопкой и выберите «Просмотреть код» (Inspect). В Elements выберите элемент с нужными словами. В Styles найдите свойство color и нажмите на маленький цветной квадрат.
- Раскройте Contrast ratio, если этот раздел доступен. Проверьте, какой фон использует инструмент. Chrome описывает эту проверку для color относительно background-color; результат не проверяет все изображения и слои за текстом.
- Нужен коэффициент контраста WCAG 2, например 4,5:1. Оценка APCA использует другую шкалу: сравнивать её с этим порогом нельзя. Если включён APCA, переключите инструмент на WCAG 2; расположение настроек зависит от версии браузера.
- Если редактор показывает шестнадцатеричные значения цветов текста и фона, можно ввести эту пару в калькулятор контраста WCAG 2. Такой способ подходит для непрозрачных цветов на известном однотонном фоне.
- Сделайте текст темнее на светлом фоне или светлее на тёмном и измерьте контраст снова. Если сервис публикации не позволяет менять цвет, передайте его поддержке адрес страницы, проблемный текст и измеренную пару цветов.
Выберите подходящий порог
Критерий 1.4.3 WCAG 2.2 задаёт минимум 4,5:1 для обычного текста и 3:1 для крупного. Для распространённых шрифтов крупный текст начинается с 18 pt обычного или 14 pt жирного начертания: это 24 CSS px обычного или 18⅔ CSS px жирного. Жирный заголовок размером 18 px ещё не достигает границы; сам тег H1 или H2 не делает текст крупным.
Тонкий или необычный шрифт может плохо читаться даже при достаточном коэффициенте. Увеличьте контраст или выберите более плотное начертание. У критерия есть конкретные исключения, в том числе неактивные элементы управления, чисто декоративный текст и логотипы; полезная подпись или инструкция к форме не становится исключением лишь потому, что она второстепенная.
Исправление, которое можно измерить
Допустим, на сайте непрозрачный серый текст расположен на однотонном белом фоне (#FFFFFF). Значения ниже рассчитаны по формуле относительной яркости sRGB из WCAG. Показанные коэффициенты приблизительные; вывод для обычного текста сделан по неокруглённому результату.
- #999999 → примерно 2,85:1. Ниже минимума и для обычного, и для крупного текста.
- #777777 → примерно 4,48:1. Не достигает минимума для обычного текста, хотя близок к нему; превышает 3:1 для текста, который действительно считается крупным.
- #767676 → примерно 4,54:1. Достигает минимума для обычного текста с небольшим запасом.
- #595959 → примерно 7,00:1. Даёт больший запас в этом примере с белым фоном. При смене фона пересчитайте контраст.
4,49 нельзя округлить до успешной проверки
Не округляйте недостаточный коэффициент вверх до нужного порога. Например, #767777 на белом даёт около 4,49157:1: этого меньше 4,5:1. Более обманчивая пара — #77767C на белом, около 4,499863:1. При выводе двух знаков после запятой получится 4,50, но пара всё равно не проходит.
Рядом с границей проверьте вывод инструмента о прохождении WCAG и более точное значение либо выберите пару с большим контрастом. Одной округлённой цифры недостаточно.
Прозрачность меняет пару цветов
Прозрачный фон не обязательно белый: найдите видимый фон под ним. Полупрозрачный текст тоже смешивается с фоном. При обычном смешивании sRGB чёрный с непрозрачностью 40% поверх непрозрачного белого превращается в #999999: примерно 2,85:1. Проверка непрозрачного чёрного на белом ошибочно дала бы для этого примера 21:1.
Непрозрачность родительского элемента, режимы смешивания и фильтры также могут изменить результат. На фотографии или градиенте контраст зависит от участка за каждой буквой. Одна выбранная точка не подтверждает минимум для всего текста. Непрозрачная подложка за текстом часто упрощает исправление и проверку; проверьте все варианты вёрстки и темы, где она появляется.
Для обычного HTML-текста используйте цвета текста и фона из браузера, а не бледный сглаженный край буквы на снимке экрана. Числовые примеры этого руководства относятся к sRGB; это не универсальная проверка HDR или изображений с широким цветовым охватом.
Отдельно проверьте подписи и состояния
Обычному тексту на кнопке по-прежнему нужен коэффициент 4,5:1. Критерий 1.4.11 отдельно задаёт 3:1 относительно соседних цветов для визуальной информации, необходимой для распознавания элементов управления и их состояний, а также для значимых частей графики, с указанными в нём исключениями. Он не требует рамку у каждой кнопки.
Проверьте текст-заполнитель в полях, ошибки, текст при наведении и при фокусе с клавиатуры, а не только начальный вид. Достаточный контраст основного абзаца не доказывает доступность всей страницы.
Опубликуйте само исправление
- Сохраните цвет в теме сайта, редакторе или таблице стилей. Считайте изменение в DevTools предпросмотром, если вы специально не настроили постоянное сохранение правок.
- Перезагрузите опубликованную страницу и снова измерьте нужный текст. Проверьте мобильную вёрстку, поддерживаемые светлую и тёмную темы, нужные состояния элементов управления.
- Запишите адрес страницы, цвета текста и фона, размер и начертание шрифта, неокруглённый результат и состояние. Для примера: #595959 на #FFFFFF, 16 px обычного начертания, около 7,004729:1 — контраст обычного текста проходит проверку.
- Прочитайте результат как обычный читатель. Контраст — часть удобства чтения: нужны также понятный текст, удобный размер, ясные ссылки и видимый фокус с клавиатуры.