Меню для Тёмных Ресторанов: Правило Контраста 7:1

Виски-бар на 18 столов в стамбульском районе Этилер замечал, что гости включают фонарик телефона, чтобы читать меню при свечах. Решение было не в более ярком свете, а в поднятии контраста меню с 4.5:1 до 7:1.

WCAG 2.2 AA против Рекомендации AAA

WCAG 2.2 AA требует контраста 4.5:1 для обычного текста, но валидировался при 200-500 люкс офисного освещения. Вечерние рестораны работают при 20-50 люкс.

Для вечерних заведений стартуйте с AAA-уровня 7:1. Чистый белый на чёрном даёт 21:1, но создаёт ореолы; идеал — #F5F5F5 на #0A0A0A (~18:1).

Типографика и Вес Шрифта

Тонкие веса (100-300) исчезают в полумраке. Используйте Inter, Manrope или Geist весом 500-600, размером не менее 16px.

• Текст: 17-18px, вес 500
• Название блюда: 19-20px, вес 600
• Цена: 16px, табличные цифры

Автоматический Тёмный Режим

Современные QR-меню читают prefers-color-scheme, чтобы взять тему системы. iOS переключается на закате без кнопок.

Данные Этилер: после тёмного режима + 7:1 контраста жалобы "нечитаемо" упали на 82%, вечерние продажи напитков выросли на 19%.

FAQ

Как измерить 7:1? WebAIM Contrast Checker или Chrome Lighthouse считают автоматически.

Цветные заголовки портят контраст? Да — используйте бренд-цвета только декоративно, основной текст оставьте чисто-белым.

Нужен ли ручной переключатель тёмного режима? Нет — достаточно системной темы.

Было полезно? Поделитесь.