Почему бледные фоны приложений умирают на дешёвых экранах: правило 4%

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

Почему тонкие оттенки умирают на дешёвых панелях

У бюджетных экранов четыре независимые проблемы. Все они ломают вашу задумку по-своему.

Слабое покрытие gamut. Начальные LCD покрывают лишь 55–70% sRGB, причём с большими ошибками по каждому каналу. Низконасыщенный оттенок просто не имеет запаса прочности, чтобы пережить такое сжатие. Если в панели всего 60% sRGB, разница между вашим фоном и чисто белым превращается в трудноразличимое пятно.

Холодная точка белого. sRGB предполагает D65 (6500K). Бюджетные модули часто уходят в 7000–9000K — синеватый белый выглядит «ярче» на витрине. Этот синий сдвиг размазан по всей градации серого, и его величина сопоставима с вашим тёплым оттенком. Панель может просто нейтрализовать фон: ваш лёгкий кремовый станет либо синеватым, либо грязно-серым.

Растянутый gamut на бюджетном AMOLED. Противоположная беда. В режиме «яркие цвета» панель растягивает sRGB-контент на свой более широкий цветовой охват. Ваш тихий оттенок рендерится вдвое насыщеннее и вдруг начинает спорить с контентом.

Бандинг. Многие дешёвые панели — это 6 бит + FRC. Мягкие градиенты около белого получают видимые ступени, из-за чего чуть разные поверхности выглядят как баги рендера.

Правило 4%

Не нужен калибратор, чтобы понять, в зоне риска вы или нет. Достаточно посчитать разброс каналов — расстояние между максимальным и минимальным значением RGB:

spread = max(R, G, B) − min(R, G, B)

Если разброс меньше ~10 из 255 (≈4%), ваш оттенок находится внутри ошибки дешёвой панели. Он может отобразиться как задумано, как серый или вообще уйти в противоположный оттенок — вы не голосуете. Быстрая проверка по hex: если две старшие пары цифр отличаются от младших меньше чем на ~0x0A — вы в опасной зоне.

Почему именно 4%? Потому что это тот же порядок величины, что и сдвиг серого при ошибке точки белого в несколько сотен кельвинов — самый частый дефект бюджетных панелей. Ваш цвет и ошибка панели одного размера. Панель побеждает в половине случаев.

Конвертация цвета: формула для бюджетного сегмента

Не нужно выбирать другой цвет для дешёвых устройств — это раздваивает бренд. Выведите тот же оттенок с большей насыщенностью.

1. Возьмите цвет фона. Найдите maxC — максимальный канал. Для каждого канала посчитайте d = maxC − канал.
2. Выберите множитель разброса k: 2, если ваш spread ≤4%, и 1.2–1.5, если вы уже около 5%.
3. Опустите потолок чуть-чуть, чтобы карточки могли быть чисто белыми: maxNew = maxC − 4.
4. Новый канал = maxNew − d × k.

Рабочий пример. Допустим, дизайнер выбрал прохладный «бумажно-синий» #F2F5FA.

• Каналы 242 / 245 / 250 → spread 8 (3,1%) — опасная зона.
• k = 2, maxNew = 246.
• R = 246 − (8×2) = 230 → E6.
• G = 246 − (5×2) = 236 → EC.
• B = 246 → F6.
• Бюджетный вариант: #E6ECF6 — spread 16 (6,3%), тот же оттенок, вдвое больше присутствия, и чисто белые карточки #FFFFFF теперь стоят чёткой ступенью выше.

Эта же математика работает для тёплых кремовых, мятно-зелёных, розоватых — оттенок не меняется, меняется только его настойчивость. Если предпочитаете перцептивные инструменты — переведите цвет в OKLCH, умножьте C примерно на 2, вычтите ~0.01 из L, сохраните H. Тот же результат с более чистой математикой. (HSL для этого не подходит: его S у белого крайне обманчив.) В любом случае яркость фона почти не сдвигается, так что контраст текста практически не меняется. Но проверки AA всё равно перезапустите.

Поставляйте tiers, а не темы

Всё остальное — чернила, акцент, типографика — одинаково. Пользователь не видит «другую тему», он видит тот же бренд, но читаемый. Платформенный флаг Android isLowRamDevice — неплохой прокси для класса панели. Плюс добавьте маленький переключатель «Paper tone: Auto · Soft · Rich», чтобы закрыть промахи и тех, кто просто предпочитает другой вариант.

Тестируйте на стекле, а не в Figma

Эмулятор показывает мнение вашего монитора. На реальном устройстве — при полной яркости и на ~40% — задайте себе четыре вопроса:

1. Фон читается как цвет или как белый, который нуждается в стирке?
2. Видно, где заканчивается карточка, не наклоняя телефон?
3. Градиент фон→белый плавный, без ступеней?
4. Контент (особенно фото) всё ещё самое тёплое и насыщенное на экране?

Четыре «да» на самом дешёвом тестовом устройстве — и можно закрывать задачу.

Итог

• Едва заметные off-white — это роскошь флагманов. При разбросе каналов меньше ~4% вы находитесь в погрешности дешёвой панели.
• Никогда не раздваивайте цвет — увеличивайте его насыщенность по формуле maxNew − d × k, оттенок при этом не трогайте.
• Чисто белые карточки над чуть более сильным фоном работают лучше теней на блёклой панели.
• Тируйте по классу устройства с пользовательским переопределением. И проверяйте глазами на реальном стекле.