สีมีผลมากกว่าที่คิด: ทำอย่างไรให้เว็บไซต์ใช้ได้กับผู้ที่ตาบอดสี

คุณอาจออกแบบปุ่มด้วย “สีเขียว = ผ่าน” และ “สีแดง = ผิด” แล้วคิดว่าเข้าใจง่าย แต่ในสายตาของผู้ที่มีภาวะตาบอดสี (Color Blindness) ปุ่มทั้งสองอาจดู “คล้ายกันจนแยกไม่ออก”

ในโลกดิจิทัลที่ทุกคนควรเข้าถึงได้ การออกแบบสีอย่างระมัดระวัง จึงไม่ใช่เรื่องดีไซน์อย่างเดียว แต่คือหัวใจของ Inclusive Design

เข้าใจภาวะตาบอดสีในมุมของ UX

ผู้ที่มีภาวะตาบอดสีไม่ได้ “มองไม่เห็นสีเลย” แต่แยกแยะสีบางคู่ไม่ได้ เช่น:

• แดง–เขียว (Red-Green) – พบได้บ่อยที่สุด
  
  

• น้ำเงิน–เหลือง (Blue-Yellow)
  
  

• ตาบอดสีสมบูรณ์ (Monochromacy) – พบได้น้อยมาก
  
  

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

หลักการออกแบบเว็บไซต์ให้รองรับผู้ที่ตาบอดสี

1. ไม่ใช้สีเป็นองค์ประกอบสื่อสารเพียงอย่างเดียว

• เพิ่ม ไอคอน, ข้อความ หรือ รูปทรง เพื่อเสริมความหมาย
  
  

• เช่น ไม่ใช่แค่ “ปุ่มสีแดง = ยกเลิก” แต่ใส่คำว่า “ยกเลิก” และไอคอน ✖ ร่วมด้วย
  
  

2. ใช้ค่า Contrast Ratio ที่เพียงพอ

• ตามเกณฑ์ WCAG 2.1:
  
  

• ข้อความทั่วไปต้องมี Contrast ≥ 4.5:1
  
  

• ข้อความขนาดใหญ่ ≥ 3:1
  
  

• ใช้เครื่องมือฟรี เช่น WebAIM Contrast Checker
  
  

3. เลือกคู่สีอย่างระมัดระวัง

• หลีกเลี่ยงคู่สีที่สับสนง่าย เช่น แดง–เขียว, น้ำเงิน–ม่วง
  
  

• ใช้สีที่ต่างกันชัดเจนในความสว่าง (brightness) ไม่ใช่แค่เฉด (hue)
  
  

4. ทดสอบกับผู้ใช้หรือเครื่องมือจำลองตาบอดสี

• ใช้ปลั๊กอิน Chrome เช่น “Colorblinding”
  
  

• ทดสอบด้วยกลุ่มเป้าหมายจริงหากมีโอกาส
  
  

กรณีศึกษา: Mareads ปรับ UX ให้เข้าใจง่ายสำหรับทุกกลุ่ม

Mareads เป็นแพลตฟอร์มอ่านนิยายออนไลน์ที่มีผู้ใช้หลากหลายกลุ่ม รวมถึงผู้สูงวัยและผู้ใช้ที่มีภาวะตาบอดสีบางประเภท

ปัญหาที่พบ:

• ปุ่ม “อ่านต่อ” ใช้สีเขียวล้วน
  
  

• ปุ่ม “ลบบท” ใช้สีแดง ไม่มีข้อความกำกับ
  
  

• ผู้ใช้บางรายกดผิดหรือมองไม่ออกว่าปุ่มไหนใช้งานอย่างไร
  
  

แนวทางที่ Senna Labs แนะนำ:

• เพิ่มไอคอน ✚ (อ่านต่อ) และ 🗑 (ลบ) ในปุ่ม
  
  

• ใส่ข้อความกำกับ “อ่านต่อ” และ “ลบบท” ชัดเจน
  
  

• ปรับคู่สีให้มีความต่างด้านแสงมากขึ้น เช่น เขียวเข้ม–เทาอ่อน
  
  

ผลลัพธ์:

• ผู้ใช้งานเข้าใจปุ่มและใช้งานได้ง่ายขึ้น โดยเฉพาะผู้สูงอายุ
  
  

• ฟีดแบกเชิงบวกจากกลุ่มผู้ใช้ที่มีปัญหาด้านการมองเห็นสี
  
  

• ความพึงพอใจด้าน UX เพิ่มขึ้นจากผลสำรวจภายในระบบ
  
  

สรุป

สีคือองค์ประกอบสำคัญในการออกแบบ แต่หากใช้ไม่เหมาะสมอาจกลายเป็น “อุปสรรค” สำหรับผู้ใช้บางกลุ่มโดยไม่รู้ตัว การออกแบบให้ผู้ที่ตาบอดสีสามารถใช้งานได้ จึงเป็นส่วนหนึ่งของการสร้าง เว็บไซต์ที่เข้าถึงได้จริง (Accessible Web) และช่วยให้ UX ดีขึ้นสำหรับผู้ใช้ทุกคน