Цветной QR-код — правила контраста и читаемость
12 мин чтения
Цветные QR-коды работают. Но не все и не всегда. Примерно 30% брендовых QR, которые дизайнеры сдают клиентам, либо не сканируются вообще, либо считываются через раз — при хорошем освещении, с близкого расстояния, на новом iPhone, но не на рабочем Android 2020 года. Причина — контраст. Не «стиль», не «смелый дизайн», не «нестандартный подход». Конкретное математическое соотношение яркости двух цветов, которое либо укладывается в норму, либо нет.
В этой статье разбираем QR-код в цвете со всех сторон: какие пары цветов безопасны, как работает инвертированный режим, почему градиент — это риск, и как сохранить фирменную палитру, не теряя читаемости.
Цветной QR — можно ли вообще
Да, можно. QR-код — не изображение с фиксированными цветами, а математическая матрица модулей, каждый из которых несёт бит данных. Сканер не видит «чёрные квадраты» — он видит контраст: тёмные области против светлых. Пока разница яркости достаточна, сканер читает код независимо от конкретных цветов.
Это значит: тёмно-синие модули на белом фоне читаются так же надёжно, как чёрные. Бордовые на бежевом — тоже. Тёмно-зелёные на светло-жёлтом — тоже. Проблемы начинаются, когда дизайнер берёт «фирменный красный» (#E53935) — яркий, насыщенный, красивый — и кладёт его на белый фон. Контраст падает до 3.9:1. На мониторе всё выглядит нормально. На печати при искусственном свете — 40% неудачных сканирований.
Главное правило: цветной QR работает при контрасте ≥4:1 между модулями и фоном. Всё остальное — выбор и эксперимент в рамках этого ограничения. Подробнее о дизайне кодов — в статье 20 примеров красивого QR.
Правило контраста ≥4:1 (WCAG) — и почему белый QR на тёмном не работает
Стандарт WCAG (Web Content Accessibility Guidelines) устанавливает минимальный контраст 4.5:1 для обычного текста и 3:1 для крупного. Для QR-кодов практика сложилась на уровне 4:1 как рабочего минимума, 7:1+ как уверенной нормы.
Формула контраста: (L1 + 0.05) / (L2 + 0.05), где L1 и L2 — относительная яркость двух цветов по стандарту sRGB. Считать вручную не нужно — любой WCAG-калькулятор (WebAIM Contrast Checker, Coolors, плагин для Figma) даёт результат по двум HEX-кодам за секунду.
Теперь про «белый QR на тёмном фоне». Это классическое заблуждение: «контраст есть, просто инверсный». Контраст действительно есть. Но большинство сканеров — особенно старые Android 7–9 и встроенная камера iOS до версии 13 — при инверсном QR требуют ручного включения специального режима распознавания. iPhone 14+ и современный Android 12+ инверсию обычно читают автоматически. Итог: если ваша аудитория разнородная, белый QR на тёмном фоне даст 15–40% отказов на старых устройствах. Решение — не избегать инверсии вообще, а делать её осознанно (раздел ниже) или оставаться на классической схеме «тёмное на светлом».
Ещё одна ловушка: соотношение 4:1 нужно считать для наихудшего случая — при искусственном освещении, при угле наклона 30°, на слегка потёртой печати. Проверяйте контраст с запасом: 5:1 и выше.
Лучшие пары цветов с HEX-кодами
Ниже — проверенные пары с реальными значениями контраста. Все пригодны для печати и цифровых носителей.
Тёмно-синий на белом. Модули #1E3A8A на фоне #FFFFFF — контраст 12.8:1. Один из самых универсальных вариантов: технологичный вид, идеально для IT, финтеха, корпоративных материалов. Белый фон выносит quiet zone естественно, не требует дополнительного оформления.
Бордовый на бежевом. Модули #7F1D1D на фоне #FEF9EF — контраст 9.4:1. Тёплое сочетание для ресторанов, крафтовой упаковки, свадебных и lifestyle-брендов. Бежевый фон отлично вписывается в крафт-бумагу и небелёные карточки.
Тёмно-зелёный на светло-лимонном. Модули #14532D на фоне #FEFCE8 — контраст 11.2:1. Органика, экология, сельскохозяйственные бренды, здоровое питание. Сочетание считывается как «натуральное» без единого слова текста.
Тёмно-фиолетовый на белом. Модули #4C1D95 на фоне #FFFFFF — контраст 13.6:1. Красота, wellness, премиум-сегмент, fashion.
Антрацит на светло-сером. Модули #1F2937 на фоне #F9FAFB — контраст 16.1:1. Нейтральный, минималистичный. Когда бренд ставит на строгость, не хочет цвет модулей — но и классический чёрный кажется слишком резким.
Пары, которые кажутся красивыми, но не проходят порог: красный #DC2626 на белом — 4.0:1, прямо на грани, при печати часто провисает; оранжевый #F97316 на белом — 3.0:1, не сканируется; бирюзовый #06B6D4 на белом — 2.9:1, не сканируется; любой пастельный на белом — ниже 3:1.
Как сохранить бренд-палитру и QR одновременно
Дизайнеры часто делают ошибку: берут «основной фирменный цвет» бренда и красят в него QR. Если этот цвет — средний по яркости (насыщенный красный, яркий оранжевый, светло-голубой), код не будет читаться надёжно.
Правило: для QR выбирайте тёмный из бренд-палитры, а не средний и не светлый. Почти у каждого бренда есть несколько оттенков фирменного цвета. Возьмите самый тёмный — он, скорее всего, пройдёт порог контраста. Примеры:
- Сбербанк: фирменный зелёный
#21A038— контраст с белым 4.5:1 (на грани). Тёмно-зелёный из расширенной палитры#0C4A23— контраст 14.2:1. Разница огромная. - Яндекс: фирменный жёлтый
#FFCC00— контраст с белым 1.2:1 (катастрофа). Тёмно-серый из их UI#21201F— контраст 18.9:1. QR будет «яндексовским» по форме и сдержанным по цвету. - ВКонтакте: синий
#0077FF— контраст с белым 4.0:1 (на грани). Тёмно-синий#003380— 12.5:1. Узнаваем, безопасен.
Если тёмного варианта нет — используйте фирменный цвет для фона, а модули сделайте чёрными или тёмно-серыми. Фоновый патч цвета создаёт фирменность, сам QR остаётся надёжным. Подробнее о совмещении логотипа с QR — в статьях QR-код с логотипом и правила добавления логотипа.
Градиентный QR — рисковый вариант
Градиент в QR выглядит эффектно. Линейный переход от тёмно-синего к чёрному, радиальный от центра — красиво на экране, интересно в презентации. Но это именно рисковый вариант, который нужно тестировать тщательнее обычного.
Проблема в том, что контраст меняется по всей площади кода. Если начало градиента (светлая часть) даёт контраст 3.8:1, а конец (тёмная) — 14:1, то одна часть модулей читается, другая — нет. Сканер не усредняет контраст, он обрабатывает каждый модуль локально.
Безопасный градиент: оба конца перехода должны давать контраст с фоном ≥4:1 независимо. Переход «тёмный в тёмный» — например, #1E40AF → #0F172A на белом фоне — это 10.5:1 в светлой точке и 17.8:1 в тёмной. Такой градиент можно пробовать. Переход «средний в светлый» (#60A5FA → #BAE6FD) — нельзя ни при каком условии.
Протокол тестирования градиентного QR: проверяйте на пяти сканерах. Обязательно — iOS (нативная камера), Android 12+, Android 8–9 (старое устройство), специализированное приложение (QR & Barcode Scanner, CamScanner). Пятый — любой бюджетный телефон с неоригинальным экраном: у них камеры читают хуже из-за пониженной светочувствительности. Если хотя бы один из пяти даёт больше 10% неудач — переходите на монохромный вариант.
Инвертированный QR — светлый на тёмном
Инвертированный QR (светлые модули на тёмном фоне) — отдельная история. Стандарт ISO 18004, на котором основан QR-код, технически допускает инверсию. Но реализация в сканерах — неравномерная.
Современные устройства (iPhone 12+, Android 10+, большинство приложений-сканеров) читают инвертированный QR автоматически. Устройства 2018–2019 года и ряд бюджетных Android 9 — требуют ручного режима или вообще не поддерживают. Если ваш продукт ориентирован на широкую аудиторию старше 40 лет или на рынки с большой долей бюджетных устройств — инверсию лучше не использовать.
Если инверсия всё-таки нужна (тёмный брендовый фон, печать на чёрной упаковке) — выдержите контраст ≥7:1 в инвертированном варианте (больший запас компенсирует неоднородность поддержки). Например, белые модули #FFFFFF на тёмно-синем фоне #1E3A8A — контраст 12.8:1. Или светло-бежевые #FEF3C7 на тёмно-коричневом #451A03 — 12.1:1. И обязательно — тест на 5 устройствах, включая старое.
Частый вопрос: можно ли делать инвертированный QR с логотипом? Можно, но с уровнем коррекции ECL H (30%) — и тестирование становится обязательным, не опциональным.
Цветовая слепота — про 8% мужчин
Около 8% мужчин и 0.5% женщин имеют ту или иную форму цветовой слепоты. Самые распространённые — протанопия (нарушение восприятия красного, ~1% мужчин) и дейтеранопия (нарушение восприятия зелёного, ~5% мужчин). При этих нарушениях красный и зелёный выглядят похожими оттенками коричневого или жёлтого.
Для QR-кода это имеет конкретное следствие: красный QR на зелёном фоне или зелёный QR на красном фоне — для человека с дейтеранопией модули и фон могут казаться неразличимыми, несмотря на формально приличный контраст по стандарту WCAG. WCAG считает контраст по яркости, не по цветовому тону — и именно поэтому «красный на зелёном» может пройти проверку контраста (если оба достаточно тёмные или светлые), но быть нечитаемым для части пользователей.
Принцип безопасности для доступного QR: контраст по яркости (не по цвету) должен быть ≥7:1 для максимальной универсальности. Это автоматически покрывает большинство форм цветовой слепоты. Самый надёжный вариант — классический чёрный на белом: он универсален для всех типов нарушений цветовосприятия. Если нужен цветной — выбирайте пары с разницей по яркости, а не только по оттенку: тёмно-синий #1E3A8A значительно темнее белого #FFFFFF именно по яркости, и это делает его доступным.
Для проверки на цветовую слепоту используйте Stark (плагин Figma) или Coblis (онлайн-симулятор) — они показывают, как изображение выглядит при разных типах нарушений.
Печать CMYK vs RGB — пастельные цвета не передаются
Экраны работают в RGB — смешивают свет красного, зелёного и синего. Типографии печатают в CMYK — смешивают краски голубой, пурпурной, жёлтой и чёрной. Это разные физические процессы с разным охватом цветов (цветовым гаммутом). CMYK-гаммут уже RGB: некоторые яркие RGB-цвета просто не существуют в CMYK.
Последствия для QR. Насыщенный электрик-синий #0050FF в RGB на печати превращается в более тёмный, приглушённый. Это может неожиданно помочь — если RGB-версия была на грани контраста, CMYK-версия становится чуть темнее и проходит порог увереннее. Но пастельные цвета работают иначе: нежно-лавандовый #E9D5FF в CMYK теряет нежность, становится грязновато-серым. Если этот пастельный был фоном, а модули — тёмными, фон потемнел, контраст упал.
Два практических правила. Первое: для ответственных тиражей (от 500 экземпляров) заказывайте цветопробу в типографии перед основным тиражом. Цена — 500–1500 рублей, срок — 1–2 дня. Это стоит любого тиража с нечитаемыми кодами. Второе: сохраняйте файл для типографии с цветовым профилем Fogra39 (ISO Coated v2) — это стандарт офсетной печати в России и Европе. При конвертации RGB → CMYK через этот профиль предсказуемость цветопередачи максимальная.
Отдельная тема — PNG vs SVG. Для цифрового использования PNG 300 ppi достаточно. Для печати всегда запрашивайте SVG или PDF с встроенными цветовыми профилями: векторный формат масштабируется без потери качества, а значит — без размытия краёв модулей при увеличении.
Создание цветного QR через QRkoder
В конструкторе QRkoder цветной QR создаётся в три шага. Открываете конструктор, вводите данные (URL, текст, vCard или другой тип), переходите на вкладку «Дизайн».
На вкладке дизайна доступны два цветовых пикера: цвет модулей (foreground) и цвет фона (background). Рядом с каждым — поле для ввода HEX вручную. После выбора цветов конструктор автоматически рассчитывает контраст между двумя значениями и показывает соотношение: зелёный индикатор если ≥4:1, жёлтый при 3–4:1, красный если ниже. Это не заменяет тест на реальных устройствах, но отсекает очевидно опасные комбинации на этапе выбора.
Дополнительные настройки: форма модулей (квадрат, скруглённый, круг), уровень коррекции ошибок (ECL Q для QR с логотипом, ECL H для максимальной устойчивости), Quiet Zone — пустое поле вокруг кода. Скачивать можно в PNG (для цифрового) или SVG (для печати).
Если нужен QR с логотипом — добавьте его на вкладке «Логотип» после настройки цветов. При наличии логотипа конструктор автоматически переключает уровень коррекции на Q, предотвращая типичную ошибку с M-уровнем при перекрытой центральной зоне. Если что-то пошло не так — подробный разбор в статье QR-код не сканируется: причины.
Для автоматической генерации и нейросетевых QR — отдельные разделы конструктора.
Частые вопросы
Можно ли сделать QR полностью в цвете бренда — модули, фон и рамку?
Можно, если каждая пара «модули — фон» удовлетворяет контрасту ≥4:1. Фон и рамка могут быть любого фирменного цвета — они не мешают считыванию, пока не заходят в Quiet Zone вокруг кода. Модули — самая строгая зона: именно их контраст с фоном определяет читаемость. Рамка за пределами QR не влияет на сканирование никак. Схема для бренда с ярким цветом: рамка и фоновая плашка — фирменный яркий, модули — тёмный из палитры (тёмно-синий, тёмно-бордовый, тёмно-зелёный). Такой QR смотрится на 100% фирменным, при этом читается надёжно. Проверяйте контраст пары модули-фон в WebAIM Contrast Checker по HEX-кодам.
Почему QR красиво выглядит на экране, но не сканируется с распечатки?
Три основные причины. Первая — цветовой сдвиг при печати. Ярко-синий #0077FF в RGB при печати CMYK становится чуть темнее или меняет оттенок в зависимости от профиля типографии. Если исходный RGB был на грани контраста (4.0–4.5:1), CMYK-версия может упасть ниже. Вторая — качество печати. Струйный принтер на обычной бумаге даёт размытые края у модулей — они «сливаются» с фоном на мелком масштабе. Для надёжной печати QR нужен лазерник или профессиональный офсет. Третья — размер QR. Минимальный безопасный размер для печати — 2×2 см при уровне коррекции M и 3×3 см при H-уровне с логотипом. Мельче — модули на грани различимости для камеры смартфона. Решение: запрашивайте цветопробу у типографии, используйте SVG для масштабирования, проверяйте тест-распечатку до тиража.
Что такое ECL Q и ECL H, и какой нужен для цветного QR?
ECL (Error Correction Level) — уровень коррекции ошибок. Определяет, сколько процентов кода сканер может восстановить при повреждении. Четыре уровня: L (7%), M (15%), Q (25%), H (30%). Для цветного QR без логотипа достаточно M — цвет сам по себе не уменьшает объём данных, только меняет контраст. Для цветного QR с логотипом — нужен Q или H в зависимости от размера лого (Q если лого до 18% площади, H если до 25%). Для градиентного QR рекомендуем Q как минимум — высокий уровень коррекции компенсирует потенциальные проблемы с неравномерным контрастом по площади. При H-уровне плотность модульной сетки растёт, QR становится «плотнее» — размер печати нужно увеличить на 15–20% для сохранения читаемости.
Как проверить, что цветной QR читается у людей с цветовой слепотой?
Используйте два метода параллельно. Метод 1: симулятор цветовой слепоты. Загрузите изображение QR в Coblis (онлайн) или откройте в Figma с плагином Stark. Посмотрите версии для дейтеранопии (нарушение зелёного), протанопии (нарушение красного) и тританопии (нарушение синего). Если в любом из режимов модули и фон выглядят похожим цветом — контраст недостаточен по доступности. Метод 2: расчёт по яркости. Конвертируйте оба HEX-цвета в относительную яркость по формуле WCAG. Если разница ≥7:1 — код будет читаться при любых нарушениях восприятия цвета. Самый надёжный вариант — тёмный модуль (L < 0.05) на белом фоне: это и максимальный контраст по яркости, и полная независимость от цветового восприятия. Если по теме бренда принципиально важна цветная пара — выбирайте из тех, у которых разница в яркости (не в насыщенности) максимальна.
Сколько цветов можно использовать в одном QR — модули одного цвета или можно разные?
Технически можно окрашивать каждый модуль в разный цвет или делать градиент по всей площади. Большинство генераторов, включая QRkoder, поддерживают два варианта: монохромный (один цвет на все модули) и градиентный (переход между двумя цветами). Многоцветные QR с разными цветами на каждый модуль — это художественный формат, его сканируемость сильно зависит от реализации. Для коммерческого использования оптимальный выбор — монохромный (надёжность 98%+) или тёмный двухцветный градиент (надёжность 85–92% при правильном расчёте контраста). Правило для любого варианта: минимальный контраст каждого модуля с прилегающим фоном — ≥4:1 в любой точке кода. Если это условие выполнено для самого светлого модуля в самом тёмном месте градиента — код читается. Если нет — не читается, и никакой «высокий ECL» это не исправит.
Создайте свой цветной QR с проверкой
Контраст ≥4:1 проверяется автоматически.
Создать цветной QR →бесплатно · палитры брендов · WCAG-проверка