พูดถึง Background สีขาวหรือดำ ถึงจะดี?

Color Choices for Better Readability by Lorraine Nepomuceno

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

Reading vs. Scanning

ว่ากันว่า เวลาคนเราเจอตัวหนังสือ สิ่งที่จะทำมี 2 อย่างด้วยกัน คือ อ่านทำความเข้าใจ (Read) หรือ อ่านแบบคร่าวๆ (Scan) การอ่านทำความเข้าใจ (Read) คือการพิจารณาแต่ละคำๆ แล้วตีความว่าเนื้อหานั้นๆ ต้องการจะสื่ออะไร ส่วนการอ่านแบบคร่าวๆ (Scan) คือการอ่านเพื่อทำความเข้าใจภาพรวมของเนื้อหา โดยจะไม่อ่านทุกตัวอักษร ทำให้ใช้เวลาน้อยกว่า ซึ่งการเลือกสีของพื้นหลังและตัวหนังสือนั้น ขึ้นอยู่กับว่า เราต้องการให้ผู้ใช้ อ่านทำความเข้าใจ (Read) หรือ อ่านแบบคร่าวๆ (Scan) ครับ

Paragraph Text

สำหรับการอ่าน (Read) ข้อความที่มีจำนวนค่อนข้างมาก เช่น ข้อความที่เป็นพารากราฟ เราควรหลีกเลี่ยงการใช้ตัวหนังสือสีขาวบนพื้นหลังสีดำครับ เพราะการอ่านตัวหนังสือสีขาวบนพื้นหลังสีดำป็นเวลานานๆ จะทำให้เกิดความเมื่อยล้ากับสายตาเรา เนื่องจากตาของคนเราจะต้องใช้ตัวรับรู้ทั้งสามสี ในการรับรู้สีขาว ตรงกันข้ามกับสีดำที่รับรู้ได้จากการที่ไม่มี visible light มาถึงตาเราเลย ดังนั้น การอ่านตัวหนังสือสีขาวบนพื้นหลังสีดำ จะทำให้ตาเราทำงานหนักกว่าการอ่านตัวหนังสือสีดำบนพื้นหลังสีขาวครับ

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

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

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

Headings, Titles and Labels

การใช้ตัวหนังสือสีขาวบนพื้นหลังสีเข้มกลับเป็นทางเลือกที่ดีกว่า หากเราต้องการให้ผู้อ่าน สามารถเข้าใจภาพรวมของเนื้อหาได้อย่างรวดเร็วที่สุด (Scan) เช่น การใช้ตัวหนังสือสีขาวบนพื้นหลังสีเข้มกับ หัวข้อ ชื่อเรื่อง หรือ ป้ายสัญลักษณ์ต่างๆ ซึ่งสิ่งเหล่านี้ ต้องการดึงดูดความสนใจจากผู้อ่าน และต้องการให้ผู้อ่านเข้าใจความหมายได้ทันทีที่เห็น สาเหตุที่นิยมใช้ตัวหนังสือสีขาว หรือสีอ่อนๆ บนพื้นสีเข้ม เป็นเพราะสีขาวจะสะท้อนแสงสีทุกสี ทำให้ตัวหนังสือดูสว่าง และแยกแยะได้ดีกว่าสีอื่นๆ และไม่ต้องกลัวว่าตัวหนังสือสีขาวจะทำให้สายตาเมื่อยล้า หรือเกิดแสงสะท้อนไปรบกวนเนื้อหาข้างๆ เพราะเราจะใช้กับเนื้อหาสั้นๆ ที่ใช้เวลาอ่านไม่นาน

บทความใช้ขาว ข้อความไม่ยาวใช้ดำ

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

(Visited 7,285 times, 3 visits today)

10 Responses to “พูดถึง Background สีขาวหรือดำ ถึงจะดี?”

  1. NATTO says:

    สุดยอดคับ

  2. มั่วนิ่มม says:

    มั่ว สีขาวนี้แหละทำให้ปวดตาดีนักแล

    • Siam HTML says:

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

    • TiME says:

      คุณอ่านจบยังครับ จะใช้สีอะไร ก็ต้องดูองค์ประกอบอื่นๆด้วย เขาไม่ได้บอกให้ใช้สีขาวอย่างเดียวนี่ครับ

      ขอบคุณเจ้าของบทความมากครับ ได้ความรู้เพิ่มขึ้นอีก ^ ^

  3. Ton Suttikiat says:

    ขอบคุณคราบ

  4. จิบเดียว ก็ซึ้งแมน says:

    อืมสำหรับผมที่ต้องนั่งทำงานนานๆ วันละหลายๆ ชม.
    พื้นหลังดำ + ตัวหนังสือโทนเข้มจะถนอมสายตาที่สุดครับ (ใช้ tone dark ใน visual studio 2012)
    ซึ่งถ้าวันไหนเปิดใช้ word (พื้นขาวตัวหนังสือดำ) หรือใช้ default tone ของ visual studio ซึ่งขาวเว่อร์มาเลย
    สักเที่ยงๆจะล้าตาจนต้องพักสัก 15 – 30 นาที เป็นแบบนี้สะทุกครั้งครับ

    • Siam HTML says:

      ผมเข้าใจว่าเกิดจากพื้นหลังสีขาวนั้นสะท้อนแสงเข้าตาเรามากเกินไปครับ เลยทำให้ล้าเมื่อดูนานๆ การที่เราปวดตามันมีอยู่ 2 สาเหตุหลักๆ คือแสงจากพื้นหลังสะท้อนใส่ตามากเกินไป(พื้นหลังสีอ่อน) กับ แสงจากพื้นหลังมืดเกินไปจนต้องเพ่งอ่านตัวอักษร(พื้นหลังสีเข้ม) ดังนั้น ผมขอสรุปว่าเราควรปรับสีพื้นหลังอย่าให้สว่างหรือมืดเกินไปครับ คือสีพื้นหลังถ้าจะเอาแนวอ่อน ก็เอาเป็นสีเทาอ่อนๆ แทน แต่ถ้าเอาแนวเข้ม ก็อย่าให้ดำสนิทเลยซะทีเดียวครับ ขอขอบคุณ คุณ จิบเดียว ก็ซึ้งแมน มากนะครับ ที่มาร่วมแชร์ประสบการณ์ ^_^

      • Siam HTML says:

        อีกประเด็นนึงที่ผมสังเกตคือ ในการเขียนโค้ด เราไม่ได้ “Read” โค้ด แต่เราใช้วิธี “Scan” มากกว่า ดังนั้น editor หลายๆ เจ้า จึงนิยมใช้สีพื้นหลังสีเข้ม เพราะจะทำให้เรา “Scan” หาของที่ต้องการเจอได้เร็วกว่าครับ

  5. ton saychon says:

    ขอบคุณครับ สำหรับความรู้และประสบการณ์ที่นำมาแบ่งปันตลอดเลย

  6. เว็บ pantip นี่อ่านจนปวดตา

Leave a Reply