어두운 식당을 위한 메뉴 디자인: 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가 자동 계산합니다.

컬러 카테고리 제목이 명암비를 떨어뜨리나요? 네 — 브랜드 색상은 장식용으로만 사용하고 메뉴 본문은 순백색을 유지하세요.

수동 다크 모드 토글이 필요한가요? 아니요, 시스템 테마 존중으로 충분합니다.

도움이 되셨나요? 공유해 주세요.