暗い店舗のためのメニュー設計：コントラスト比 7:1 ルール

イスタンブール・エティラーの 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 から始めましょう。純白に純黒で 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 が自動計算します。

カラーのカテゴリー見出しはコントラストを下げる？ はい — ブランドカラーは装飾のみに使い、本文は純白に保ちましょう。

ダークモードの手動トグルは必要？ いいえ、システムテーマを尊重すれば十分です。

お役に立ちましたか?シェアしてください。