Доступные QR-коды: как сделать их понятными для всех

Практические советы по доступности QR-кодов: высокий контраст, размер под расстояние, понятный призыв, текстовая альтернатива рядом с кодом, удобная мобильная страница и правильный язык страницы в WebQR.

QR-код работает, только если его можно заметить, отсканировать и понять, куда он ведёт. Это касается и людей со слабым зрением, и тех, у кого старый телефон, дрожат руки или вовсе нет камеры. Вот простые правила, которые делают коды понятными для всех, и настройки WebQR, которые стоит проверить.

1. Высокий контраст: тёмные точки на светлом фоне

И сканеру, и глазу нужна чёткая разница между точками и фоном. Самый надёжный вариант — тёмные точки на светлом фоне. На шаге QR дизайн в разделе Стиль форм есть Цвет фона и Цвет точек. Если код легко читается, под превью показывается Готов к скану.

Шаг QR дизайн: чёрные точки на белом фоне, под превью — Готов к скану

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

Светлые точки на тёмном фоне на шаге QR дизайн, под превью — Может не сканироваться

Увидели предупреждение — сделайте точки темнее или фон светлее. Другие причины: Почему QR-код не сканируется.

2. Размер и расстояние

Слишком маленький код заставляет подходить вплотную и держать телефон неподвижно — многим это трудно. Распространённое правило: сторона кода — не меньше десятой части расстояния сканирования. Для меню на столе хватит 2–3 см, для плаката, который читают с 2 метров, — около 20 см. Оставляйте чистое поле вокруг кода и не размещайте его на сгибах, углах и глянцевых изогнутых поверхностях.

Для печати скачивайте большой файл, чтобы код оставался чётким. В окне Скачать QR-код выберите формат и Размер — на скриншоте выбраны PNG и 2K (2048px) Большой. Для любого размера без потери качества подойдут SVG, PDF или EPS.

Выбран PNG, в строке Размер отмечен 2K (2048px) Большой

Подробнее: Форматы скачивания QR-кода и Как печатать QR-коды.

3. Понятный призыв под кодом

Пустой квадрат не объясняет, зачем его сканировать. Добавьте короткий призыв: в разделе Рамка выберите рамку и впишите текст в поле Текст под QR-кодом, например "Scan for details" или его перевод для вашей аудитории. Текст — короткий, контрастный и на языке ваших посетителей. Проверьте, что в превью по-прежнему Готов к скану.

Раздел Рамка в WebQR: чёрная рамка, белый текст Scan for details и превью с отметкой Готов к скану

4. Скажите, куда ведёт код

Незнакомый код сканируют неохотно, а пользователи экранных дикторов картинку вообще не видят. Рядом с кодом простыми словами напишите, что откроется: «Меню», «Отслеживание заказа», «Пароль Wi-Fi», «Форма бронирования». В цифровых материалах (письма, сайты, PDF) дайте изображению кода alt-текст с тем же смыслом и поставьте рядом обычную кликабельную ссылку — на экране ссылка удобнее кода.

5. Текстовая альтернатива для тех, кто не может сканировать

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

6. Страница, удобная на телефоне

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

7. Правильный язык страницы

Для страниц WebQR блок Язык страницы задаёт Язык кнопок и подписей на странице. Выберите язык, на котором читают ваши посетители, напишите на нём основные тексты и проверьте страницу в превью телефона.

Блок Язык страницы с полем Язык English и переключателем Переводы рядом с превью страницы Aurora Guesthouse Kazbegi на телефоне

Пример для многоязычной аудитории: QR-коды для недвижимости и туризма в Грузии.

8. Напечатанный код должен работать

Если содержимое меняется, человек с напечатанным кодом не должен попадать на пустую страницу. У динамического кода содержимое можно поменять без перепечатки: Как изменить QR-код после печати. Разница объяснена в статье Статические и динамические QR-коды.

Чек-лист

  • Тёмные точки на светлом фоне, в превью Готов к скану.
  • Размер соответствует расстоянию, вокруг кода чистое поле.
  • Короткий призыв под кодом.
  • Простыми словами — куда ведёт код; alt-текст и ссылка в цифровых материалах.
  • Короткий адрес рядом с кодом.
  • Мобильная страница на нужном языке, проверенная на телефоне.