Недостаточное соотношение контрастности цветов фона и текста

Текст с низким соотношением контрастности, т. е. недостаточно отличающийся по яркости от фона, может быть трудным для чтения. Например, светло-серый текст на белом фоне сложно разобрать, из-за чего страдает легкость восприятия и падает скорость чтения.

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

В каких случаях проверка контрастности цветов в Lighthouse завершается неудачей #

Lighthouse помечает текст как не прошедший проверку, если обнаруживает недостаточно высокое соотношение контрастности между цветом фона и самого текста:

Для оценки контрастности текста Lighthouse использует критерий успеха 1.4.3 из рекомендаций WCAG 2.1:

• Текст высотой от 18 пунктов (или 14 пунктов, если используется жирное начертание) должен иметь коэффициент контрастности не ниже 3:1.
• Для более мелкого текста текста коэффициент контрастности должен составлять не ниже 4,5:1.

Особенности реализации проверки не позволяют Lighthouse учитывать контрастность текста, наложенного на изображения.

Как убедиться, что текст имеет достаточную цветовую контрастность #

Убедитесь, что весь текст на странице соответствует минимальным соотношениям цветовой контрастности, установленным рекомендациями WCAG:

• 3:1 для текста высотой от 18 пунктов (или 14 пунктов, если используется жирное начертание).
• 4,5:1 для более мелкого текста.

Чтобы подобрать цвет, отвечающий требованиям к минимальной контрастности, вы можете воспользоваться инструментом выбора цвета в Chrome DevTools:

1. Щелкните правой кнопкой мыши (на Mac можно использовать Command+щелчок) на элементе, который вы хотите проверить, и выберите пункт «Просмотреть код».
2. На вкладке Стили панели Элементы найдите среди списка свойств элемента значение color.
3. Щелкните иконку предпросмотра цвета рядом со значением.

Инструмент выбора цвета сообщит вам, соответствует ли элемент требованиям к цветовому контрасту, принимая во внимание размер и толщину шрифта:

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

Как только вы подберете подходящее цветовое значение, укажите его в CSS-коде сайта.

Более сложные случаи, такие как текст, отображаемый поверх градиента или изображения, необходимо проверять вручную; то же самое касается графики и элементов интерфейса. Для исправления текста, отображаемого поверх изображения, используйте в DevTools средство выбора цвета фона, позволяющее проверить фон, на котором отображается текст:

В остальных случаях можно воспользоваться специальным инструментом, таким как Colour Contrast Analyser от Paciello Group.

Ресурсы #

• Исходный код проверки Background and foreground colors do not have a sufficient contrast ratio («Недостаточное соотношение контрастности цветов фона и текста»)
• Цвет текстовых элементов должен быть достаточно контрастным по отношению к фону (Deque university)
• Colour Contrast Analyser