Как проверить контраст текста поверх фотографии

Редакция Romanov Lab · Опубликовано 13 октября 2026

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

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

Сначала решите, нужен ли текст внутри изображения

Если фотография объясняет сложный объект, свободного места на ней может не быть. В таком случае вынести заголовок в соседнюю колонку или под снимок часто надёжнее, чем затемнять важные детали. Первый экран не обязан быть единой картинкой. Раздельная композиция позволяет сохранить и предмет, и читаемую надпись.

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

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

Определите порог и каждый проверяемый элемент

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

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

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

Составьте карту вариантов блока

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

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

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

Измеряйте итоговую композицию

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

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

Учитывайте итоговый результат наложения прозрачности. Чёрная полупрозрачная плашка над светлой стеной и над чёрной дверью создаёт разные цвета. Процент прозрачности сам по себе не является показателем соответствия. Расхожее правило «добавить тридцать процентов чёрного» не гарантирует читаемость произвольного снимка.

Выберите исправление с понятным компромиссом

• Непрозрачная панель. Самый управляемый фон текста, но закрывает часть фотографии и меняет композицию.
• Локальная полупрозрачная подложка. Сохраняет изображение, однако требует проверки итоговых цветов и всех разрешённых кадров.
• Градиент. Подходит, когда положение текста стабильно. Требует запаса по области и длине строк.
• Другое кадрирование. Сохраняет чистый вид, но может обрезать значимую деталь; на мобильном нужен отдельный контроль.
• Текст вне снимка. Освобождает фотографию от функции фона и обычно упрощает дальнейшее редактирование.

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

Разберите пример до конца

Представим баннер экскурсии по производству. Заголовок белый, под ним дата и небольшая кнопка. На исходном кадре сотрудник находится справа, и всё читается. После мобильного кадрирования светлая каска оказывается под второй строкой. Подпись ещё ниже попадает на отражение металлической поверхности.

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

Для этого условного проекта разумно выбрать третий вариант, если нет требования удержать всё в одном экране. На широком оставить проверенный градиент, на узком вынести текст. Решение записывается вместе с максимальным объёмом подписи и примером длинного заголовка. Ни один из вариантов не следует объявлять универсально лучшим: на другом снимке и с другим объёмом текста баланс изменится.

Как оформить обнаруженный дефект

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

Например: «В вертикальном варианте вторая строка попадает на светлый рукав; после увеличения текста туда же переносится цена. Затемняющий градиент заканчивается выше». Это сразу направляет проверку к области подложки и переносам. Формулировка «сделать текст жирнее» преждевременно назначает решение и может оставить светлый участок без изменений.

После исправления повторите не только сломанный вариант, но и соседние ширины. Градиент, расширенный для телефона, иногда слишком сильно закрывает предмет на планшете. Сохраните длинный текст как постоянный проверочный пример. Если будущая замена фотографии разрешена, отметьте, какие условия потребуется проверить заново.

Для блока с несколькими снимками заведите краткий перечень: идентификатор кадра, допустимая обрезка, вариант подложки, результат и ограничение. Запись «все фото проверены» без перечня быстро теряет смысл, когда редактор заменяет один файл под прежним именем. Связывайте утверждение с конкретным материалом и композицией, чтобы проверку можно было воспроизвести.

Передайте правила редактору

Укажите разрешённую ориентацию снимка, важную область, зоны возможного текста и порядок проверки после замены. Если редактор может свободно двигать фокус кадрирования, объясните, что этим он меняет не только сюжет, но и фон букв. В инструкции полезнее пара «подходит / не подходит» с объяснением, чем общее пожелание выбирать тёмные фотографии.

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

Критерии приёмки

1. Проверены все разрешённые снимки и композиции, а не только главный макет.
2. Заголовок, подпись и текст кнопки имеют отдельные результаты проверки.
3. При переносе строк надпись остаётся в защищённой области.
4. Увеличение текста не помещает его поверх непроверенного участка.
5. Есть читаемый фон без фотографии и понятный порядок редакционной замены.
6. Подложка не скрывает детали, ради которых нужен снимок.

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