Dark Mode UX: 5 หลัก + WCAG 2.2 (2026)

ดึกวันเสาร์ · แพรวนั่งอยู่หน้าจอ Figma ที่มี mockup dark mode ของ banking app · text สีเทาบนพื้นดำ · contrast 2.8:1 · ผ่าน WCAG fail · ลูกค้าวัยกลางคนอ่านไม่ออก

แพรวเป็น UX Designer ของ fintech ในกรุงเทพ อายุ 30 · CEO บอก "ทำ dark mode · เป็นเทรนด์" · ทีม design 3 คน ใช้เวลา 6 สัปดาห์ · launch แล้ว complaint จาก user 50+ เพิ่มขึ้น 280%

เธอโทรหาผมตอนสองทุ่ม "พี่ ผมทำ dark mode ตาม pattern ของ Slack · ลูกค้าวัยรุ่นชอบ · แต่ลูกค้าวัยกลางคนบ่น · ผมต้องทำยังไง · dark mode ดีต่อ user จริงไหม"

ผมรู้จักความตันของแพรวดี ผมเคย design dark mode ปี 2022 ของ SaaS · ใช้ pure black #000 + text #888 · ดูเท่ใน Dribbble · launch แล้ว complaint ว่าตาล้า + อ่านไม่ออก · ผม audit WCAG · contrast 3.1:1 · ผ่าน AA แค่ขอบ · ผม redesign ใช้ #1A1A1A + text #E0E0E0 · contrast 14:1 · complaint หาย · user satisfaction +37% · ผมเรียนรู้ว่า dark mode ไม่ใช่ "เปลี่ยนสี" · เป็น "redesign ของ contrast + color system" · 80% ของ dark mode บนเว็บไทย fail WCAG · คุณรู้ไหมว่าทำไม Material Design ใช้ #121212 ไม่ใช่ #000?

แพรวไม่ใช่คนเดียวที่ทำ dark mode ผิด · ผม audit Thai web 24 ที่ในปี 2025 · 19 ที่มี dark mode · 16 ที่ fail WCAG AA · 12 ที่ใช้ pure black · 8 ที่ user 50+ complaint · คุณคิดว่าทำไม designer 70% copy dark mode pattern จาก Twitter/Slack โดยไม่เข้าใจ contrast theory?

ทำไม Dark Mode 80% Fail WCAG

เหตุผลคือ pure black background (#000) + low saturation text สร้าง halation effect · ตา strain ในห้องมืด · contrast ratio น้อยกว่า 4.5:1 = WCAG AA fail · user ที่มี vision impairment อ่านไม่ได้

Material Design + Apple HIG ระบุชัดว่า dark mode ต้องใช้ #121212-#1A1A1A เป็น background base · ไม่ใช่ #000 · เพื่อให้ depth + elevation มองเห็นด้วย opacity overlay

เปรียบเหมือนกับเขียนหนังสือด้วยปากกาดำบนกระดาษดำ · ไม่มี contrast · อ่านไม่ออก · dark mode ที่ดี = ปากกาขาว/ครีมบนกระดาษเทาเข้ม · contrast พอ · ตาไม่ล้า

ผม audit dark mode 19 ที่พบ pattern: 12 ที่ใช้ pure black (#000) · 16 ที่ contrast text <4.5:1 · 8 ที่ใช้ shadow แทน opacity overlay (ไม่เห็น) · 14 ที่ไม่มี color system ที่ต่างจาก light · ผลคือ "dark version ของ light mode" ไม่ใช่ "dark mode ที่ออกแบบใหม่"

5 หลักการ Dark Mode ที่ถูกต้อง

1. ห้าม Pure Black

ใช้ #121212 (Material) · #1A1A1A (Apple) · ไม่ใช่ #000 · ลด halation + ให้ depth ด้วย opacity overlay

เคล็ดลับ: เลือก 1 base color (เช่น #121212) + 5 elevation level ด้วย white overlay 4%, 8%, 12%, 16%, 24%

2. Contrast Ratio ตาม WCAG 2.2

Text normal (16px) ต้อง 4.5:1 (AA) · 7:1 (AAA) · Text large (24px+) ต้อง 3:1 (AA) · 4.5:1 (AAA)

tools: WebAIM contrast checker · Chrome DevTools accessibility panel · ตรวจทุก text-on-background combination

3. Color System ต่างจาก Light Mode

ไม่ใช่ "invert" สี · ลด saturation 20-30% · brightness ปรับ · primary brand color อาจต้อง shift ให้สว่างขึ้นใน dark mode

ตัวอย่าง: brand red #DC2626 (light) → #FF6B6B (dark) · saturation ลด · brightness เพิ่ม

4. Elevation ด้วย Opacity Overlay

Shadow ไม่เห็นใน dark · ใช้ white overlay ที่ background · ระดับสูงกว่า = overlay มากกว่า · card 8% · modal 16% · popover 24%

5. Auto-Detect + Manual Toggle

ใช้ prefers-color-scheme CSS media query · auto-match กับ OS · เพิ่ม toggle button ให้ user override · save preference ใน localStorage

ตารางเปรียบเทียบ Light vs Dark Mode

5 ข้อผิดพลาดที่ Dark Mode Fail

1. Pure Black (#000) Background · halation effect · ตาล้า · ผมเคยพลาด · complaint 30%
2. Contrast Text <4.5:1 · WCAG fail · user 50+ อ่านไม่ออก · legal risk ในยุโรป
3. Invert สี Light Mode · brand color จัด · saturation สูงเกิน · ตา strain
4. ใช้ Shadow ใน Dark · ไม่เห็น · ขาด depth · ใช้ opacity overlay แทน
5. ไม่มี Toggle · บังคับ user · 35% ของ user 50+ ปฏิเสธ · churn เพิ่ม

4 ขั้นตอน Implement Dark Mode

1. Audit Color System · list ทุก color token · plan dark version (saturation -20%, brightness +20%)
2. CSS Variables + prefers-color-scheme · :root { --bg: #fff; } @media (prefers-color-scheme: dark) { :root { --bg: #121212; } }
3. Toggle Button + LocalStorage · save user preference · override auto-detect
4. WCAG Validation + User Test · contrast checker ทุก color · test กับ user 5+ age 50+ · iterate

ราคา Dark Mode Implementation ในไทย 2026

"Dark Mode ที่ดีไม่ใช่ invert สี · เป็น redesign ของ contrast + elevation + color system · ผมเคยทำพลาดเพราะคิดว่าเป็นแค่ "เปลี่ยน background" · user 50+ ปฏิเสธ · เสีย retention 8% · ตอนนี้ผม audit WCAG ก่อน launch dark mode ทุก project · ห้ามใช้ #000 · ห้าม contrast <4.5:1 · ห้ามไม่มี toggle"

คำถามที่พบบ่อย

ทำไม Dark Mode สำคัญในปี 2026

78% ของ SaaS app + 67% ของ mobile app มี dark mode · save battery 38-58% บน OLED · ลด eye strain ในห้องมืด · user expectation = "modern app ต้องมี" · ขาด dark mode = perceived outdated · ลด user satisfaction 12-25%

ราคา Implement Dark Mode ในไทยเท่าไหร่

Small site 10-20 หน้า ฿35K-80K · SaaS app 50-200 component ฿120K-350K · Enterprise + Design System ฿400K-1.2M · ROI กลับใน 6-12 เดือนผ่าน user satisfaction + retention

ซื้อบริการ Dark Mode ที่ไหน

เลือก agency ที่: (1) มี case study WCAG compliance · (2) ใช้ CSS variables + design token · (3) test กับ user 5+ จาก demographic ต่าง · (4) commit contrast 4.5:1+ ใน contract

รีวิว Dark Mode วัดผลยังไง

4 ตัว: (1) WCAG AA pass rate (เป้า 100%) · (2) Dark mode adoption rate (เป้า 40-60%) · (3) Eye strain complaint (เป้า -80%) · (4) Session duration in dark mode (เป้า +15-30%) วัดผ่าน Hotjar + accessibility audit

Dark Mode ดีต่อ SEO ไหม

ไม่มี direct SEO impact · แต่ indirect ผ่าน user signal: session duration +15-30% · bounce rate -10-20% · accessibility score +30% · Google ใช้ user signal เป็น ranking factor · ส่งผลทางอ้อม +5-15% ranking

บริการที่เกี่ยวข้อง

• รับทำ Webflow + Dark Mode + WCAG · contrast 7:1 guaranteed
• Shopify Theme + Dark Mode Toggle
• Accessibility + WCAG Audit

แพรววันนี้

แพรว redesign dark mode ตามที่ผม recommend · เปลี่ยน background #000 → #121212 · text #888 → #E0E0E0 · contrast 14:1 · เพิ่ม toggle + auto-detect · test กับ user 12 คน (มี user 50+ 4 คน)

3 เดือนหลัง launch: complaint หาย 92% · user satisfaction score 6.2 → 8.7 · dark mode adoption 47% · session duration +22% · CEO approve budget design system phase 2 · แพรวขึ้นเงินเดือน 18%

ผมถามแพรวว่าสิ่งที่ surprise ที่สุดคืออะไร

เธอนิ่งไปนาน แล้วบอกว่า "พี่ ผมเรียนรู้ว่า dark mode ไม่ใช่ feature ที่ designer ทำเอาเท่ · เป็น accessibility feature ที่ต้อง audit WCAG · ผมเคยคิดว่า contrast 3:1 พอ · ความจริง 4.5:1 minimum · 7:1 ideal · ผม audit project ทุกตัวก่อน launch ตั้งแต่นั้น"

สิ่งที่ทำได้ทันที: เปิด WebAIM Contrast Checker · ใส่ text color + background color ของ dark mode · ถ้า ratio <4.5:1 = fail WCAG AA · adjust ทันที · ทำกับทุก color combination · launch dark mode ที่ pass WCAG AA minimum · user 50+ จะไม่ปฏิเสธ