ขออย่าบังคับใช้โหมดมืด
(iamvishnu.com)- หากเว็บไซต์ มีให้ใช้เฉพาะโหมดมืด อาจทำให้ผู้ใช้บางคนที่อ่านบทความยาว ๆ รู้สึกล้าตาและไม่สบายตา จึงควรมีทางเลือกหรือชุดสีที่สบายตากว่า
- ประเด็นสำคัญไม่ใช่ตัวโหมดมืดเอง แต่คือ อัตราส่วนคอนทราสต์ ระหว่างข้อความกับพื้นหลัง โดยข้อความสีขาวล้วนบนพื้นหลังสีดำสนิทอาจสร้างภาระต่อสายตาได้ด้วยคอนทราสต์ 21:1
- หากใช้ข้อความสีเทา
#888888บนพื้นหลังสีดำ อัตราส่วนคอนทราสต์จะลดลงเหลือ 5.9:1 ซึ่งเป็นตัวอย่างของโหมดมืดที่อ่านสบายกว่าการใช้คอนทราสต์สูงเกินไป - WCAG 2.1 กำหนดเพียงอัตราส่วนคอนทราสต์ขั้นต่ำ 4.5:1 สำหรับข้อความทั่วไป และไม่ได้จำกัดคอนทราสต์สูงสุด ทำให้ชุดสีแบบ 21:1 ก็ยังอาจถูกนับว่าเข้าถึงได้ตามกฎ
- ข้อกำหนด Maximum text contrast ในร่าง WCAG 3.0 ถูกถอดออกในการอัปเดตวันที่ 4 กันยายน 2025 และบทความที่บังคับใช้โหมดมืดยังต้องอาศัยวิธีแก้ชั่วคราวอย่างการเขียนทับ CSS เองในตอนนี้
เมื่อโหมดมืดแบบบังคับทำให้อ่านยาก
- มีทั้งเว็บไซต์และบล็อกส่วนตัวจำนวนมากที่ออกแบบมาให้ใช้ได้เฉพาะโหมดมืด และบางเว็บก็ทำให้รู้สึกไม่สบายตาตั้งแต่ยังอ่านไม่จบแม้แต่ย่อหน้าเดียว
- โหมดมืดมีประโยชน์ในบางสถานการณ์ แต่หาก บังคับใช้ โดยไม่ให้ผู้ใช้เลือกเอง ก็จะกลายเป็นประสบการณ์ใช้งานที่ไม่ดี
- หลังอ่านบทความยาวในโหมดมืด ดวงตาอาจปรับตัวกลับไม่ได้ทันที จนรู้สึกเหมือนยังเห็นลายเส้นแนวนอนค้างอยู่
ใจกลางของปัญหาคืออัตราส่วนคอนทราสต์
- ปัจจัยสำคัญที่กำหนดความสบายหรือไม่สบายตาในโหมดมืดคือ อัตราส่วนคอนทราสต์ ระหว่างข้อความกับพื้นหลัง
- หากวางข้อความสีขาวล้วนบนพื้นหลังสีดำสนิท จะได้คอนทราสต์ 21:1
- ชุดสีนี้อาจสร้างภาระให้สายตาและทำให้อ่านยาก
- หากใช้ข้อความสีเทา
#888888บนพื้นหลังสีดำ คอนทราสต์จะลดลงเหลือ 5.9:1- เป็นตัวอย่างของชุดสีในโหมดมืดที่อ่านสบายกว่า แม้จะยังเป็นโหมดมืดเหมือนกัน
- คอนทราสต์ที่สูงขึ้นไม่ได้หมายความว่าดีกว่าเสมอไป และในโหมดมืด คอนทราสต์ที่มากเกินไป อาจยิ่งเพิ่มความไม่สบายตา
จุดที่เกณฑ์ WCAG ยังครอบคลุมไม่ถึง
- ปัจจุบัน WCAG 2.1 SC 1.4.3 กำหนด อัตราส่วนคอนทราสต์ขั้นต่ำ 4.5:1 สำหรับข้อความทั่วไป
- ใน WCAG 2.1 ไม่มีการจำกัด อัตราส่วนคอนทราสต์สูงสุด
- ดังนั้นชุดสีอย่างข้อความสีขาวล้วนบนพื้นหลังสีดำสนิทที่มีคอนทราสต์ 21:1 ก็ยังอาจถูกมองว่าเข้าถึงได้อย่างสมบูรณ์ตามกฎ
- แม้จะทำให้ผู้ใช้จำนวนมากรู้สึกไม่สบายตา แต่แนวทางเดิมก็ไม่ได้จัดการปัญหาคอนทราสต์ที่มากเกินไปในโหมดมืด
- เดิมที WCAG 3.0 เคยมีแผนจะเพิ่ม Maximum text contrast ในฐานะข้อกำหนดเชิงสำรวจ
- ตามการอัปเดตเดือนธันวาคม 2025 ข้อกำหนดนี้ถูก ถอดออกในการอัปเดตร่าง WCAG 3.0 วันที่ 4 กันยายน 2025
- Issue บน GitHub ที่ว่าด้วยคณิตศาสตร์ของอัตราส่วนคอนทราสต์ยังคงเปิดอยู่
วิธีเลี่ยงปัญหาที่พอทำได้ในตอนนี้
- หากบทความสำคัญเปิดให้อ่านได้เฉพาะโหมดมืดแบบบังคับ ก็สามารถใช้ เครื่องมือสำหรับนักพัฒนา ของเบราว์เซอร์เพื่อเขียนทับ CSS และกลับสีได้
- หากไม่ต้องการใช้ปลั๊กอินเพิ่มเติม เครื่องมือสำหรับนักพัฒนาก็ยังเป็นวิธีชั่วคราวไปก่อนจนกว่าจะมีทางออกที่ดีกว่า
สถานการณ์ที่โหมดมืดเหมาะสม
- ไม่ได้คัดค้านโหมดมืดโดยตัวมันเอง และยังชอบใช้โหมดมืดในสถานการณ์ต่อไปนี้
- เวลาอ่านบทความบน หน้าจอ OLED ในห้องมืด เช่น อ่านบนโทรศัพท์ก่อนนอน
- เวลเขียนโค้ด เพราะ IDE แทบทั้งหมดมีโหมดมืดที่ให้คอนทราสต์สบายตาเป็นค่าเริ่มต้น
- เมื่อโหมดมืดของเว็บไซต์มี อัตราส่วนคอนทราสต์ที่สบายตา
- หลังบทความเผยแพร่ ก็มีทั้งเสียงเห็นด้วยและเสียงวิจารณ์ใน การสนทนาบน Hacker News โดยพูดถึงประเด็นอย่างการเลือกโหมดมืด/สว่างตั้งแต่ระดับ OEM ยุคแรก ความสำคัญของคอนทราสต์ ประสบการณ์ส่วนตัว ภาวะทางการแพทย์ ปัญหาการเข้าถึง และวิธีหลีกเลี่ยงปัญหา
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
โหมดมืด เดิมทีก็ใกล้เคียงกับค่าเริ่มต้นแบบดั้งเดิมอยู่แล้ว
อย่างจอแสดงผลยุคแรกที่เป็นตัวอักษรสีเขียว/สีอำพันบนพื้นดำล้วน, โหมดข้อความ DOS สีเทาบนพื้นดำ, C-64 ที่ใช้ตัวอักษรสีฟ้าอ่อนบนพื้นหลังสีน้ำเงินเข้ม, และ Apple II ที่ใช้สีเทา/ขาวบนพื้นดำ
แม้แต่ใน GUI นั้น Amiga ก็มี Workbench ค่าเริ่มต้นเป็นพื้นหลังสีน้ำเงินเข้ม และผู้ใช้เลือกพาเลตสีทั้งหมดได้เอง
Microsoft Windows เป็นฝ่ายที่ทำให้แอปส่วนใหญ่ตั้งค่าเริ่มต้นเป็นตัวอักษรสีดำบนหน้าจอสีขาว ด้วยเหตุผลว่าคล้ายกระดาษ แต่แม้กระดาษจะเป็นสีขาว มันก็ไม่ใช่สีขาวที่ส่องแสง การเปลี่ยนผ่านนั้นจึงทรมานมาก
ดีใจที่โหมดมืดกลับมา แต่สิ่งที่ต้องการคือทางเลือก ไม่ใช่การบังคับใช้โหมดมืด และถ้าเป็นไปได้ โหมดสว่างก็ไม่ควรเป็นสีขาวที่สว่างสุดด้วย
ไม่ควรตั้งอุปกรณ์หรือจอให้เป็นสีขาวส่องแสง แต่ควรลดความสว่างลงให้ดูคล้ายกับกระดาษที่วางอยู่ข้าง ๆ
สิ่งที่เปลี่ยนพาราไดม์ก็ไม่ใช่ Windows แต่เป็น Mac ที่มาก่อนในฐานะอุปกรณ์ผู้บริโภคที่แพร่หลาย และ CRT ในตัวของมันก็ยังสว่างน้อยกว่ากระดาษภายใต้แสงสำนักงานแบบดั้งเดิม
คอมพิวเตอร์ยุคแรกใช้โทนสีมืดเพราะความละเอียดต่ำและความสว่างของพิกเซลฟุ้ง ทำให้อ่านง่ายกว่า เมื่อเทคโนโลยีดีขึ้น ปัญหานั้นก็หายไป และไม่ว่าจะเป็นหน้าจอหรือสิ่งพิมพ์ ตัวอักษรสีเข้มบนพื้นหลังสว่างก็สบายตากว่า
สีอำพันและสีเขียวก็ถือว่าสบายกว่าตัวอักษรสีขาว และความต่างนั้นมากจนแทบเทียบกันไม่ได้
ถ้าพื้นหลังไม่ใช่สีดำสนิท แต่มีความสว่างอยู่ระดับหนึ่ง โหมดมืดอาจใช้ได้กับคนมากขึ้น แต่แบบนั้นก็จะเสียข้อดีส่วนใหญ่ของ OLED ไป
จริงอยู่ที่ DOS/Unix บน PC ยุคแรกใช้พื้นหลังสีดำตามคุณลักษณะของจอในตอนนั้น แต่ก่อนหน้านั้นผู้คนก็แชร์ข้อมูลผ่านกระดาษสีขาว และอินเทอร์เน็ตยุคแรกก็นำตัวอักษรสีดำบนพื้นขาวกลับมาอีกครั้ง
สุดท้ายแล้วไม่มีอะไรอย่าง ค่าเริ่มต้นดั้งเดิมที่แท้จริง หรอก มันขึ้นอยู่กับว่าคุณเข้ามาในยุคไหน
ที่ Amiga Workbench ใช้พื้นหลังสีน้ำเงินเข้มก็เพราะต้นทุน คาดกันว่าหลายคนจะต่อเข้ากับทีวีผ่านเอาต์พุตวิดีโอคอมโพสิต และตัวอักษรสีขาวกับพื้นหลังสีน้ำเงินเป็นชุดสีที่ทีวีแสดงผลได้ดี
จอ 1080 มีราคาประมาณหนึ่งในสามของราคา A1000 และเป็นไปได้สูงว่า A500 จำนวนมากหลังถูกแกะกล่องในช่วงคริสต์มาสก็ถูกต่อเข้ากับทีวีอยู่พักใหญ่
ผมเคยใช้เวิร์ดโปรเซสเซอร์สำหรับ Amiga มาแทบทั้งหมด นอกจาก WordPerfect แล้วทุกตัวเป็นพื้นขาวตัวอักษรดำ และแม้ WordPerfect จะปรับได้ แต่ก็แค่คงค่าเริ่มต้นสีน้ำเงิน/ขาวไว้เพื่อให้ตรงกับ DOS เท่านั้น
พื้นหลังมืดทำให้การกะพริบสังเกตเห็นได้น้อยลง และเมื่อ CRT ที่มีอัตรารีเฟรชสูงขึ้นเริ่มแพร่หลายในทศวรรษ 1990 ปัญหาการกะพริบก็ลดลง ทำให้โหมดสว่างกลายเป็นค่าเริ่มต้น
เดี๋ยวก่อน ถ้าเว็บไซต์หนึ่งมีแค่ตัวอักษรสว่างกับพื้นหลังมืด นั่นก็คือ ธีมและบรรยากาศ ของเว็บไซต์นั้น
โหมดมืดจะมีอยู่ก็ต่อเมื่อมีโหมดสว่าง และในทางกลับกันก็เช่นกัน
คุณไม่สามารถบังคับเว็บไซต์ที่ไม่ต้องการให้ต้องดูแลทั้งสองโหมดได้
ถ้าโหมดมืดเป็นลักษณะของแบรนด์ ก็ให้เลือก อัตราคอนทราสต์ ที่อ่านสบายสำหรับข้อความ
โหมดสว่างที่เป็นค่าเริ่มต้นและปรับไม่ได้มีมานานแล้ว และก็มีปลั๊กอินอย่าง Dark Reader เพื่อมาช่วยชดเชย
แต่ในทางกลับกัน โครงสร้างพื้นฐานสำหรับบังคับใช้ โหมดสว่าง นั้นมีไม่มาก
ในสถานการณ์ส่วนใหญ่ ผมมองว่าโหมดสว่างดีกว่าโหมดมืด สถานการณ์เดียวที่โหมดมืดดีกว่าคือเมื่อคุณนั่งอยู่ในห้องมืดที่หน้าจอเป็นแหล่งกำเนิดแสงเพียงอย่างเดียว ซึ่งโดยมากไม่ใช่สภาพแวดล้อมที่ดีต่อสุขภาพ
โหมดมืดใกล้เคียงกับเครื่องมือช่วยเหลือมากกว่า และเปิดไฟหรือนอนน่าจะดีกว่า
ในสภาพแวดล้อมที่ไม่มีแสง โหมดสว่างอาจอ่านแล้วรำคาญตา แต่ในสภาพแวดล้อมสว่าง โหมดมืดแทบอ่านไม่ได้เลย ลองอ่าน UI โหมดมืดบนมือถือในวันที่แดดจ้ากลางฤดูร้อนดู ต่อให้เร่งความสว่างสุดก็ยังมองไม่ค่อยเห็น
จริง ๆ แล้วเบราว์เซอร์มีฟังก์ชันตั้งค่าสีพื้นหลังและสีตัวอักษรเริ่มต้นอยู่แล้ว ดังนั้นถ้าเว็บไซต์แค่เคารพค่าเริ่มต้นนี้เมื่อไม่จำเป็นจริง ๆ ก็ไม่ต้องมีส่วนขยายด้วยซ้ำ
โลกที่ต้องมีส่วนขยายเพื่อ “เคารพความชอบของฉันจริง ๆ” นั้นน่าเสียดาย แต่ถ้าจำเป็น อย่างน้อยก็ควรรู้ว่ามันรองรับตัวเลือกทั้งสองฝั่ง สถานการณ์โดยรวมค่อนข้างงี่เง่า แต่ก็ยังมีทางเลี่ยง
ตอนนี้ระบบปฏิบัติการล้วนมีโหมดที่สลับได้ และสามารถแจ้งสิ่งนี้ให้เบราว์เซอร์รู้ได้ เบราว์เซอร์สามารถและควรปรับตามการตั้งค่าที่ระบบปฏิบัติการรายงาน
การออกแบบ UI โดยมากเป็นห่วงโซ่ของอารมณ์และแฟชั่นที่ถูกนำไปใช้ผิดทาง ยกเว้นเกาะเล็ก ๆ แห่งความมีเหตุผลไม่กี่แห่งอย่าง Paul Fitts
ตอนแรกบอกว่าคอนทราสต์ไม่ดี เลยใช้คอนทราสต์ไม่พอ ต่อมาบอกว่าความสว่างไม่ดี เลยใช้ความสว่างไม่พอ แล้วก็กลับมาตระหนักอีกครั้งว่าทำไมคอนทราสต์และความสว่างจึงสำคัญมาตั้งแต่แรก วนไปแบบนี้
มันเหมือนมองไฟสูงรถยนต์ตรง ๆ และถึงผมจะใช้ปลั๊กอิน Dark Reader แต่มันก็ไม่เหมือนกับการที่เว็บไซต์รองรับโหมดมืดอย่างถูกต้อง
แม้กลางวันแสก ๆ ก็ยังดูสบายกว่ามาก ผมอยากให้โหมด Pure Black เป็นตัวเลือกแยกจากโหมดมืด/สว่างเหมือนในแอป Android บางตัว
ตอนนี้ผมใช้ Dark Reader ลดความสว่างให้ต่ำสุดเพื่อทนใช้อยู่ แต่มันค่อนข้างหยาบ
บล็อกนี้เองก็ไม่ได้ทำตามการตั้งค่าของอุปกรณ์ แต่บังคับให้ผู้อ่านใช้ โหมดสว่าง
ผู้เขียนเปลี่ยนจุดยืนกลางคัน แล้วสรุปว่าปัญหาไม่ใช่โหมดมืด แต่เป็นคอนทราสต์ของสี
color: #111;และbackground-color: #fdfdfd;ไว้อย่างชัดเจน ซึ่งเป็น อัตราคอนทราสต์ 18.56:1ที่น่าขันคือท้ายที่สุดกลับบอกว่าจะใช้ฟิลเตอร์กลับสีเป็นทางเลี่ยง แต่ถ้าคนที่ชอบโหมดมืดใช้สิ่งอย่าง
Invert Modeของ Vivaldi กับเว็บพื้นหลังขาวจัด/ตัวอักษรดำเข้มของผู้เขียน ก็จะได้คอนทราสต์แบบมืดที่ผู้เขียนบ่นอยู่นั่นเองอยากให้เลิกบังคับ คอนทราสต์ต่ำ กับผู้ใช้
ไม่ใช่ทุกคนจะดูคอนเทนต์บนหน้าจอที่คาลิเบรตไว้เกิน 100 นิต และอยู่ในสภาพแสงรอบข้างที่สว่างแต่สมเหตุสมผล
ชุดสีเทาบนเทาที่แนะนำอาจอ่านยาก เช่น เมื่อดูในห้องมืดสนิทโดยตั้งความสว่างเป็น 0 หรือดูใต้แสงแดดตรง ๆ
ช่วงสี SDR ทั้งหมดมีไว้ให้ใช้งาน ไม่ใช่ HDR ที่ต้องจำกัดเพื่อไม่ให้ผู้ใช้ตาบอด
นี่ไม่ใช่แค่ปัญหาโหมดสว่างกับโหมดมืดเท่านั้น อยากให้เว็บไซต์เคารพการตั้งค่าระบบของฉันโดยรวม
ถ้าธีมระบบปฏิบัติการของฉันเป็นข้อความ Comic Sans สีม่วงบนพื้นหลังก้อนอิฐสีเหลือง เบราว์เซอร์ก็ควรเคารพสิ่งนั้นด้วย
ถ้าฉันอยากอ่านข้อความเต็มความกว้างของเบราว์เซอร์ แต่กลับต้องดูผ่านคอลัมน์แคบ ๆ กว้าง 5 นิ้วตรงกลาง ฉันไม่ควรต้องร่ายเวทในตั้งค่าเบราว์เซอร์ เรียก CSS ทับค่า หรือไปติดตั้งส่วนขยาย
เบราว์เซอร์ควรพูดแค่ว่า “นักพัฒนาเว็บเอ๋ย ช่วยไม่ได้ ความต้องการของผู้ใช้ชนะ”
เบราว์เซอร์ยกการควบคุมให้นักพัฒนามากเกินไปจนทำให้พวกเขาเมินสิ่งที่ผู้ใช้ต้องการได้ คำว่า “user agent” เลยแทบไม่สมชื่อ ตอนนี้ใกล้เคียงกับ developer agent มากกว่า
ฉันก็ใช้แบบนั้นอยู่ และการท่องเว็บดีขึ้นมาก
บางที่โหมดมืดทำได้ยอดเยี่ยม บางที่ก็ไร้สาระ โหมดธีมขาวก็เหมือนกัน
นักพัฒนาเว็บจำนวนมากเกินไปทึกทักว่าทุกคนชอบโหมดมืด แล้วตั้งเป็นค่าเริ่มต้น ก่อนจะอ้างว่ามีปุ่มสลับ Dark/Light Mode อยู่แล้ว
น่าประหลาดใจที่แม้แต่เว็บไซต์ที่เพิ่งสร้างใหม่ก็มักไม่ตรวจจับค่าความชอบของผู้ใช้ แต่ล็อกไว้ตายตัว
ถ้าเป็นนักพัฒนา สามารถใช้คุณสมบัติ
color-schemeของ CSS เพื่อระบุว่าองค์ประกอบสามารถเรนเดอร์ได้สบายตาในชุดสีแบบใด:root { color-scheme: light dark; }element { light-dark(light-color-code, dark-color-code); }ในฐานะผู้ใช้ macOS มีบางกรณีที่โหมดมืดดี เช่น แถบเมนูหรือ IDE แต่สำหรับการอ่าน การเขียน และการท่องเว็บ ฉันชอบโหมดสว่าง เลยมีความชอบแบบผสม
ให้ตั้งธีมเป็น LIGHT ใน System Preferences แล้วรัน
defaults write -g NSRequiresAquaSystemAppearance -bool Yesจากนั้นล็อกเอาต์ แล้วตั้งธีมเป็น DARK ใน System Preferencesหากต้องการกลับไปใช้ธีมเริ่มต้น ให้รัน
defaults write -g NSRequiresAquaSystemAppearance -bool Noที่ตลกคือ ตัวอย่าง “ข้อความที่อ่านง่าย” ในบล็อกนั้นสำหรับฉันอ่านยากจริง ๆ เพราะ คอนทราสต์ต่ำ
สงสัยว่าเขามีสภาพสายตาหรือใช้จอแบบไหนกัน
ทนไม่ได้ ดูแย่ และอ่านยาก อยากให้ทุกคนเลิกทำสักที
มี Web API สำหรับดูว่าผู้ใช้ใช้โหมดมืดหรือไม่ ดังนั้นก็ใช้มันสิ
@media (prefers-color-scheme: dark) { CSS Rules here... }โหมดมืดเป็นความผิดพลาด
LCD ยุคแรก ๆ มืด ทุกคนเลยเร่งสีขาวขึ้นแรง ๆ เพื่อชดเชย และตอนนี้เมื่อ LCD ตามทันแล้ว มันก็ถึงระดับที่เผาตาของผู้คนจำนวนไม่น้อย
ดังนั้นจึงต้องรองรับสองโหมดมากขึ้นเรื่อย ๆ และ ไอคอนโหมดมืด ของ Apple ที่หน้าตาแย่อย่างน่าขันก็แสดงให้เห็นว่าการทำเรื่องนี้ให้ดีนั้นยากแค่ไหน
ในอุดมคติ ผมคิดว่าควรเปลี่ยนสีพื้นฐานของอินเทอร์เฟซคอมพิวเตอร์กลับไปเป็นสีเทา เหมือนยุคที่ CRT สว่างเป็นมาตรฐาน
แบบนั้นยังมีข้อดีคือให้คิวความลึกกับองค์ประกอบ UI ได้ด้วย และควรนำสิ่งนี้กลับมาเช่นกัน
ประเด็นหลักคือควร ปรับแต่งได้ เพื่อให้ผู้ใช้ตั้งค่าตามความชอบของตนเอง
ส่วนตัวแล้วโหมดสว่างแสบตา ปวดตา และทำให้ล้า แต่ละคนไม่เหมือนกัน
โหมดสว่างโดยมากก็ไม่ใช่สีขาวล้วน และโหมดมืดก็เป็นโทนสีเทา