Контрастность текста в материалах курса: измерение, исправление и проверка

На большом мониторе автора светло-серый текст кажется аккуратным. В небольшом окне видео подпись под схемой уже трудно разобрать, хотя именно там указан срок или единица измерения. Для проверки полезно отделить два вопроса: достаточно ли различаются текст и фон и достаточно ли крупно материал показан ученику. Увеличение разрешения файла само по себе не исправляет неудачную цветовую пару.

Выделите пары цветов для проверки

Откройте один типичный урок и выпишите места с основным текстом, примечаниями, подписями схем и инструкциями к практике. Для каждого места сохраните цвет текста и цвет непосредственного фона. В редакторе используйте точные значения цвета, если они доступны. Не ограничивайтесь проверкой большого заголовка: самые слабые сочетания часто находятся в сносках и второстепенных подписях.

Составьте короткую ведомость: материал, элемент, цвет текста, цвет фона, результат проверки, действие. Например, строка «урок 2, подпись оси, серый на белом, заменить стиль» должна вести к конкретному редактируемому объекту. Если та же подпись повторяется в двадцати слайдах, сначала выясните, управляется ли она общим шаблоном. Это поможет исправить причину повторения, а не отдельный экземпляр.

Примените критерий для текстового содержимого

В пояснении W3C к критерию WCAG 2.2 1.4.3 для обычного текста задано отношение контраста не ниже 4,5:1, для крупного — 3:1. Крупным считается текст от 18 пунктов либо от 14 пунктов при жирном начертании. Пограничное значение нельзя округлять вверх ради прохождения. Критерий распространяется и на изображения текста; для некоторых объектов предусмотрены исключения.

Для веб-материалов это конкретный критерий доступности. При подготовке слайдов его можно использовать как рабочий ориентир, но размер шрифта в исходной презентации не равен размеру текста в уменьшенном видеоплеере. Если не уверены, что текст останется крупным при просмотре, выбирайте более строгий ориентир для обычного текста. Успешная проверка одной пары не подтверждает соответствие всего курса всем требованиям WCAG.

Проверьте пару на числовом примере

Возьмём сплошной белый фон #FFFFFF и текст #999999 без прозрачности. Расчёт по относительной яркости даёт отношение примерно 2,85:1 — для обычной подписи этого недостаточно. Если заменить текст на #595959, отношение составит примерно 7,00:1. Это вычисленный пример двух цветовых пар, а не результат исследования конкретных учеников. Для решения о прохождении порога используйте неокруглённое значение инструмента.

Подойдёт проверяющий инструмент, принимающий два цвета в HEX и показывающий отношение контраста по WCAG. Внесите исходную пару, запишите результат, затем проверьте предложенную замену. Не сравнивайте цвета только по названию «серый»: небольшие отличия кодов меняют расчёт. Для полупрозрачного текста или фона сначала нужно учитывать итоговый цвет наложения, поэтому простой пример со сплошными цветами нельзя переносить без проверки.

Исправьте повторяющийся стиль

В условной презентации курса важные примечания набраны светло-серым. Автор заменяет цвет стиля, затем проходит несколько слайдов с белым, цветным и фотографическим фоном. Одна и та же новая краска не гарантирует одинаковый результат на разных подложках. Для текста поверх фотографии выберите устойчивое место или сплошную подложку и отдельно проверьте получившуюся пару.

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

Посмотрите на окончательный материал

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

Если надписи встроены в изображение, улучшение контраста не заменяет текстовую альтернативу смыслу схемы. Для неё есть отдельный разбор альтернативного текста изображений курса. В общем аудите учитывайте навигацию, субтитры и инструкции: доступность материалов курса складывается из нескольких независимых проверок, которые нельзя закрыть одним значением отношения цветов.

Сохраните результат в правилах выпуска

Запишите проверенные сочетания для основного текста, примечаний и цветных блоков в рабочий шаблон. Рядом укажите, для какого фона действует каждая пара. В ведомости исправлений сохраните старый цвет, новый цвет, вычисленное отношение и дату проверки готового файла. Другому редактору должно быть понятно, что можно повторно использовать, а что требует нового измерения.

Для курса Umhub начните с одного обязательного урока и приложенного задания. Исправьте элементы, которые мешают прочитать условия, затем обновите используемый шаблон. После следующего экспорта повторно проверьте несколько характерных страниц. Такой порядок делает читаемость воспроизводимой частью подготовки материалов и помогает заметить возвращение старого бледного стиля до того, как с ним столкнутся ученики.