การออกแบบสำหรับผู้ที่ตาบอดสี

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

กฎข้อเดียวที่สำคัญที่สุด

อย่าใช้สีเป็นวิธีเดียวในการสื่อข้อมูล

นี่คือหลักเกณฑ์ WCAG 1.4.1 (Use of Color) และเป็นพื้นฐานของทุกอย่างที่ตามมา ทุกครั้งที่คุณสื่อความหมายด้วยสี ให้เพิ่มช่องทางที่สองเข้าไปด้วย ได้แก่

ข้อความ — ป้ายกำกับ ข้อความแสดงสถานะ
ไอคอน — เครื่องหมายถูก เครื่องหมายอัศเจรีย์ กากบาท
รูปแบบ — เส้นประ แรเงา ลายจุด
ตำแหน่ง — ลำดับที่คงที่และคาดเดาได้
รูปทรง — เส้นขอบ ความหนา ความโค้ง

ความต่างของความสว่าง

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

เกณฑ์ขั้นต่ำตาม WCAG 2.2

ข้อความปกติ: อัตราส่วน 4.5:1
ข้อความขนาดใหญ่ (18pt หรือ 14pt ตัวหนา): 3:1
องค์ประกอบส่วนติดต่อและกราฟิก: 3:1
ระดับ AAA สำหรับข้อความปกติ: 7:1

หากสองสีผ่านเกณฑ์ความต่างของความสว่าง สีเหล่านั้นมักจะยังแยกออกจากกันได้แม้ผู้ใช้จะแยกเฉดสีไม่ได้ เครื่องมือตรวจสอบความต่างของสี ของเราคำนวณอัตราส่วนเหล่านี้ได้ทันที

คู่สีที่มีปัญหา

หลีกเลี่ยงการใช้คู่สีเหล่านี้เป็นตัวแยกความหมายเพียงอย่างเดียว

หลีกเลี่ยง	เหตุผล
แดง / เขียว	สับสนในภาวะโปรตะและดิวตะ (ราว 8% ของผู้ชาย)
เขียว / น้ำตาล	สับสนในภาวะแดง-เขียว
น้ำเงิน / ม่วง	ทั้งคู่ดูเป็นน้ำเงินในภาวะโปรตะโนเปีย
เขียว / น้ำเงิน	สับสนในภาวะไตรตะ
เหลืองอ่อน / ขาว	ความต่างของความสว่างต่ำสำหรับทุกคน
เขียว / เทา	สับสนในภาวะดิวเทอราโนเปีย

คู่ที่ปลอดภัยกว่าโดยทั่วไป คือ น้ำเงิน / ส้ม และ น้ำเงิน / เหลือง ซึ่งยังคงแยกออกได้ในภาวะแดง-เขียวเกือบทุกรูปแบบ

ชุดสีที่ปลอดภัยสำหรับข้อมูล

สำหรับกราฟและแผนภูมิ ให้ใช้ชุดสีที่ออกแบบมาเพื่อการนี้โดยเฉพาะ

ชุดของ Okabe–Ito — ชุดแปดสีที่ออกแบบมาให้แยกออกได้ในภาวะบกพร่องการมองเห็นสีทุกประเภทที่พบบ่อย
ColorBrewer — ชุดสีที่มีตัวกรอง “colorblind safe” สำหรับข้อมูลเชิงลำดับ เชิงแยกประเภท และแบบสองทิศทาง
Viridis / Cividis — ชุดสีต่อเนื่องที่เพิ่มความสว่างขึ้นอย่างสม่ำเสมอ อ่านได้ดีในระดับสีเทาด้วย

Cividis ได้รับการปรับให้เหมาะกับผู้มีภาวะบกพร่องการมองเห็นสีโดยเฉพาะ และเป็นตัวเลือกที่ดีเมื่อการเข้าถึงเป็นข้อกำหนดหลัก

รูปแบบที่พบบ่อยและวิธีแก้

ข้อความแสดงข้อผิดพลาดในแบบฟอร์ม

❌ ทำให้ขอบช่องกรอกเป็นสีแดง ✅ ขอบสีแดง + ไอคอนแจ้งเตือน + ข้อความอธิบายข้อผิดพลาดใต้ช่อง

ตัวชี้วัดสถานะ

❌ จุดสีเขียวหมายถึงออนไลน์ จุดสีแดงหมายถึงออฟไลน์ ✅ จุดสีพร้อมป้ายข้อความ หรือรูปทรงต่างกัน (วงกลมทึบ / วงกลมกลวง)

กราฟเส้น

❌ เส้นห้าเส้นที่ต่างกันด้วยสีเท่านั้น ✅ รูปแบบเส้นต่างกัน (ทึบ ประ จุด) + ป้ายกำกับที่ปลายเส้นแทนคำอธิบายแยก

ลิงก์ในเนื้อความ

❌ ลิงก์เป็นสีน้ำเงินโดยไม่ขีดเส้นใต้ ✅ ขีดเส้นใต้ลิงก์ในเนื้อความ (นี่คือเหตุผลที่การขีดเส้นใต้ลิงก์ยังคงมีความสำคัญ)

แผนที่และแผนภาพความร้อน

❌ ไล่ระดับจากแดงไปเขียว ✅ ไล่ระดับที่เปลี่ยนความสว่างด้วย (เช่น น้ำเงินเข้มไปเหลืองอ่อน) + ป้ายค่าตัวเลข

การทดสอบงานออกแบบของคุณ

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

รายการตรวจสอบฉบับย่อ

ไม่มีข้อมูลใดที่สื่อด้วยสีเพียงอย่างเดียว
ข้อความทั้งหมดผ่านอัตราส่วนความต่าง 4.5:1 (3:1 สำหรับข้อความใหญ่)
องค์ประกอบส่วนติดต่อและขอบเขตกราฟิกผ่าน 3:1
ลิงก์ในเนื้อความขีดเส้นใต้หรือแยกด้วยวิธีอื่นนอกจากสี
แผนภูมิใช้รูปแบบหรือป้ายกำกับควบคู่กับสี
สถานะข้อผิดพลาดและความสำเร็จมีข้อความและไอคอน
งานออกแบบยังอ่านได้เมื่อแปลงเป็นระดับสีเทา
ตรวจสอบด้วยตัวจำลองอย่างน้อยสามประเภท

คำตอบโดยย่อ