昏暗餐厅的菜单设计：7:1 对比度法则

伊斯坦布尔 Etiler 区一家 18 桌威士忌吧发现客人在烛光下打开手机手电筒阅读菜单。解决方案不是更亮的灯光，而是把菜单对比度从 4.5:1 提升到 7:1。

WCAG 2.2 AA vs AAA 建议

WCAG 2.2 AA 要求正文对比度 4.5:1，但是在 200-500 勒克斯办公照明下验证的。晚间餐厅约 20-50 勒克斯，仅为十分之一。

晚间场所应从 AAA 级 7:1 起步。纯白 #FFFFFF 配纯黑 #000000 为 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 CSS 媒体查询读取手机系统主题。iOS 在日落时自动切换，无需按钮。

Etiler 数据：深色模式 + 7:1 对比度后，"看不清菜单"投诉减少 82%，晚间饮品销售上升 19%。

常见问题

如何测量 7:1？ WebAIM Contrast Checker 或 Chrome Lighthouse 自动计算。

彩色分类标题会破坏对比度吗？ 会 — 品牌色仅用于装饰，菜单正文保持纯白。

需要手动深色模式切换吗？ 不需要，遵循系统主题即可。

觉得有用?分享给朋友。