ช่วงนี้ใคร ๆ ก็ "ดาร์กโหมด (Dark mode)" กันให้พรึ่บ ไม่ว่าจะแอปไหน เว็บไซต์ไหน ถ้าไม่มีดาร์กโหมดให้เลือกเนี่ย ถือว่าเชยสุด ๆ ! แต่เคยสงสัยกันไหมครับว่า ไอ้ดาร์กโหมดที่เราเห็น ๆ กันเนี่ย ทำไมบางทีมันก็สบายตาสบายใจ แต่บางทีก็ทำเอาปวดตาตาลายซะงั้น?

วันนี้เราจะมาเจาะลึกกันถึงเรื่องสีในดาร์กโหมด โดยเฉพาะสีดำที่เราคุ้นเคยกันดี หลายคนอาจจะคิดว่า ดาร์กโหมดก็ต้องดำจ๋า ขาวจี๋สิ ถึงจะคลาสสิก! แต่เดี๋ยวก่อนครับ เพราะความจริงแล้ว การใช้สีดำแบบเพียว ๆ ในงานออกแบบ UX/UI เนี่ย มันมีอะไรให้คิดเยอะกว่านั้นเยอะเลย!

ทำไมดำจ๋าถึง "พลาด" ได้?

ลองนึกภาพตามนะครับ เวลาเราอยู่ในห้องมืด ๆ แล้วเปิดไฟสว่างจ้าขึ้นมาทันที อาการ "จ้า" ที่ตาของเรานั่นแหละครับ คือสิ่งที่เราต้องระวังในการออกแบบดาร์กโหมด การใช้สีดำ (#000000) กับสีขาว (#FFFFFF) แบบสุดขั้ว มันสร้างคอนทราสต์ที่สูงมาก ซึ่งถึงแม้ว่าคอนทราสต์สูง ๆ จะช่วยให้เห็นอะไรชัดเจนก็จริง แต่มันก็ทำร้ายสายตาของเราได้ง่าย ๆ เหมือนกัน โดยเฉพาะเวลาที่เราต้องจ้องหน้าจอเป็นเวลานาน ๆ 

เท่านั้นยังไม่พอ การใช้สีขาวบนพื้นดำยังทำให้เกิดปรากฏการณ์ที่เรียกว่า "Halo Effect" หรืออาการแสงฟุ้งรอบตัวอักษร ซึ่งเจ้าอาการนี้เนี่ย ตัวดีเลยครับ ทำให้เราอ่านตัวหนังสือยากขึ้นไปอีก โดยเฉพาะคนที่มีปัญหาสายตาอย่างสายตาเอียง ซึ่งเป็นปัญหาสายตาที่พบได้บ่อยในคนทั่วไป อาการนี้จะทำให้เกิดแสงเบลอ ๆ หรือแสงกระจายรอบ ๆ ตัวอักษร ทำให้เราโฟกัสและอ่านได้ยากขึ้น 

แล้วสีดำยังดูดกลืนแสงทั้งหมดจากหน้าจอ ทำให้ตัวอักษรดูไม่ชัดเจน ยิ่งถ้ามีแสงสะท้อนจากรอบ ๆ มาที่หน้าจอด้วยแล้ว ยิ่งต้องเพ่งกันเข้าไปใหญ่ 

แล้วสีอะไรถึงจะ "ปัง" กว่า?

ไม่ต้องห่วงครับ! ไม่ได้มีแค่สีดำเท่านั้นที่ใช้ในดาร์กโหมดได้ ยังมีสีอื่น ๆ ที่สวยงามและสบายตากว่าให้เราเลือกใช้อีกเยอะเลย

• สีเทาเข้ม: นี่แหละพระเอก! สีเทาเข้มช่วยลดคอนทราสต์ลง ทำให้สบายตาขึ้นเยอะ Material Design ก็แนะนำให้ใช้สีเทาเข้มเป็นสีหลักในดาร์กโหมดเหมือนกันนะ 
• สีอื่น ๆ โทนเข้ม: นอกจากสีเทาแล้ว เรายังสามารถใช้สีน้ำเงินเข้ม สีชาร์โคล หรือสีม่วงเข้มได้ด้วย

ตารางโค้ดสีดำตัวอย่าง 

แนวทาง WCAG สำหรับความคมชัดของสี

การออกแบบเว็บไซต์และแอปพลิเคชันให้ทุกคนเข้าถึงได้ (Accessibility) เป็นเรื่องสำคัญมาก โดยเฉพาะเรื่องสี ซึ่งมีแนวทางจาก Web Content Accessibility Guidelines (WCAG) กำหนดไว้ 

WCAG 2.1 Level AA กำหนดว่า ข้อความและรูปภาพของข้อความ ต้องมีอัตราส่วนความคมชัด (contrast ratio) อย่างน้อย 4.5:1 สำหรับข้อความขนาดปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ (18pt ขึ้นไป หรือ 14pt ตัวหนาขึ้นไป)ส่วน Level AAA ซึ่งเป็นระดับที่สูงกว่า กำหนดอัตราส่วนความคมชัดที่สูงขึ้นไปอีก คือ 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ 

ทำไมต้องมีอัตราส่วนความคมชัด? ก็เพื่อให้ผู้ที่มีสายตาเลือนรางเล็กน้อยสามารถแยกแยะข้อความออกจากพื้นหลังได้ส่วนข้อความขนาดใหญ่จะผ่อนปรนเรื่องความคมชัดลงมาหน่อย เพราะถึงสีจะไม่ตัดกันมากนัก ก็ยังอ่านได้ง่ายกว่าอยู่ดี 

มีเครื่องมือมากมายที่ช่วยเราตรวจสอบความคมชัดของสีได้ เช่น เว็บไซต์ WebAIM Contrast Checker และ Accessibility Checker หรือโปรแกรม Color Contrast Analyzer ใน Figma ก็มีปลั๊กอินชื่อ Contrast ที่ช่วยตรวจสอบได้เลย 

ตารางสรุปอัตราส่วนความคมชัดขั้นต่ำตาม WCAG 2.1

เทคนิคจัดสีให้โปรในดาร์กโหมด

• สีตัวอักษรก็สำคัญ: อย่าใช้สีขาวจ๋าบนพื้นดำ ลองใช้สีขาวนวล ๆ หรือสีเทาอ่อน ๆ แทน จะสบายตากว่าเยอะ 
• สีสันก็ใส่ได้ แต่อย่าเยอะ: เราสามารถใช้สีสันสดใสในการเน้นองค์ประกอบต่าง ๆ ได้ แต่ต้องระวังเรื่องความอิ่มสี ถ้าสีสดเกินไป มันจะ "ตี" กันกับพื้นหลังสีเข้ม ทำให้แสบตาได้ 
• จัดลำดับความสำคัญด้วยสี: ใช้สีอ่อน ๆ กับองค์ประกอบที่ต้องการเน้น ส่วนองค์ประกอบอื่น ๆ ก็ใช้สีที่เข้มขึ้นมาหน่อย เพื่อสร้างลำดับชั้นในการมองเห็น 
• เช็คคอนทราสต์ให้ดี: อย่าลืมเช็คคอนทราสต์ของสีที่เราใช้ด้วยนะครับ WCAG (Web Content Accessibility Guidelines) เค้ามีมาตรฐานกำหนดไว้ว่า คอนทราสต์ระหว่างสีตัวอักษรกับสีพื้นหลังควรจะเป็นเท่าไหร่ ถึงจะอ่านง่าย 

เบื่อสีขาวจืดชืดแล้วใช่มั้ย? มาดูทางเลือกสีพื้นหลังสุดคูล ที่ UXUI Designer ต้องรู้!

ใครว่าสีขาวจั๊วะมันคือที่สุดของการออกแบบ? ขอบอกเลยว่า...คิดผิดแล้ว! วันนี้เราจะมาเปิดโลกแห่งสีสัน (แบบละมุนๆ) ที่จะทำให้งานออกแบบของเราปังขึ้น แถมยังเป็นมิตรต่อสายตาชาวโลกด้วยนะ! เตรียมตัวให้พร้อม แล้วมาดูกันเลยว่าทำไมเราถึงควร Say No! ให้กับสี

Snappytux: Where Code Meets Board Games & Plant-Based StyleArnon Kijlerdphon

สรุปส่งท้าย

เห็นไหมครับว่า การออกแบบดาร์กโหมด ไม่ใช่แค่เปลี่ยนจากสีอ่อนเป็นสีเข้มเท่านั้น มันมีรายละเอียดที่ต้องใส่ใจเยอะมาก โดยเฉพาะเรื่องการเลือกใช้สี การหลีกเลี่ยงสีดำจ๋าและสีขาวจี๋ แล้วหันมาใช้สีโทนเข้มอื่น ๆ แทน จะช่วยให้เราออกแบบดาร์กโหมดที่สวยงาม สบายตา และใช้งานง่ายขึ้นเยอะเลย

ที่สำคัญ อย่าลืมเรื่อง Accessibility นะครับ การทำตามแนวทาง WCAG จะช่วยให้ดาร์กโหมดของเราเข้าถึงได้กับทุกคน ทำให้ผู้ใช้งานที่มีความบกพร่องทางการมองเห็นสามารถใช้งานได้อย่างไม่ติดขัด