В этой статье
Чтобы проверить контраст текста поверх изображения, созданного ИИ, измеряйте фон прямо под буквами в каждом макете. Начните с самого узкого варианта, где заголовок чаще переносится на новую строку или попадает на светлое пятно. Оставьте текст редактируемым. Сдвиньте его, локально затемните изображение или добавьте сплошную подложку. Проверьте результат с настоящим текстом и шрифтом.
Определите нужный контраст
В объяснении уровня AA стандарта WCAG 2.2 для веб-контента W3C указывает минимум 4,5:1 для обычного текста и 3:1 для текста, который считается крупным. Одного стиля заголовка недостаточно. Посмотрите на отображаемый размер и насыщенность шрифта. Небольшая подпись ниже может по-прежнему требовать 4,5:1. Это нижняя граница: дополнительный запас помогает прочесть текст с первого взгляда.
Измерьте фон прямо под буквами
Представьте баннер мастерской керамики: справа светлая ваза, слева тёмно-синяя стена. На компьютере белый заголовок полностью лежит на синем фоне. При более низком кадрировании на телефоне снимок сдвигается, а последняя строка проходит по бежевому световому пятну. Среднее по всему снимку этого не покажет. В предпросмотре нужного размера временно скройте текст, оставив изображение и затемнение. Возьмите пробы фона под словами, особенно в самых светлых местах под белыми буквами. Для расчёта берите заданный цвет текста, а не сглаженный пиксель на краю буквы.
Сравните сильный и слабый участки
Белый на тёмно-синем #253343 даёт около 12,86:1, а белый на бежевом #B9A78E — около 2,34:1. Это примерные цвета для расчёта, не пробы с обложки. Синий фон превышает минимум для обычного текста. Бежевый не достигает ни одного из двух порогов. Прочтите всю строку в итоговом размере и найдите наименьший контраст под буквами. На неоднородных участках возьмите несколько проб.
Выберите решение для разных обрезок
Сначала попробуйте разместить заголовок на устойчиво тёмном участке и оставьте место для более длинного перевода. Если фотография должна заполнять макет, локальный градиент затемнит область под текстом, сохранив вазу светлой. Снова измерьте самый слабый участок. Если текст перемещается между форматами или снимок часто меняется, используйте сплошную подложку или поставьте текст за пределами изображения. Белый на #222222 даёт примерно 15,91:1. Подложка закроет часть снимка, поэтому предусмотрите для неё место.