ทำให้แผนภูมิเข้าถึงได้สำหรับผู้ที่ตาบอดสี

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

ปัญหาหลัก: คำอธิบายสัญลักษณ์ที่พึ่งพาสี

แผนภูมิส่วนใหญ่ใช้รูปแบบเดียวกัน คือมีคำอธิบายสัญลักษณ์ด้านข้างที่จับคู่สีกับชื่อชุดข้อมูล ผู้อ่านต้องทำสองอย่าง คือจดจำสีจากคำอธิบาย แล้วจับคู่กับเส้นหรือแท่งในกราฟ

หากผู้อ่านแยกสีเขียวจากสีแดงไม่ได้ ขั้นตอนที่สองก็ล้มเหลว และไม่มีวิธีกู้คืน

วิธีแก้ที่ดีที่สุด: ติดป้ายโดยตรง วางชื่อของชุดข้อมูลไว้ติดกับเส้นหรือแท่งของมันเอง วิธีนี้ขจัดการจับคู่ทั้งหมด และยังอ่านง่ายขึ้นสำหรับทุกคนด้วย

เลือกชุดสีที่ปลอดภัย

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

ชุดของ Okabe–Ito — แปดสีที่แยกออกได้ในภาวะบกพร่องการมองเห็นสีทุกประเภทที่พบบ่อย

ดำ #000000
ส้ม #E69F00
ฟ้าอ่อน #56B4E9
เขียวอมน้ำเงิน #009E73
เหลือง #F0E442
น้ำเงิน #0072B2
แดงอมส้ม #D55E00
ชมพูอมม่วง #CC79A7

สำหรับข้อมูลต่อเนื่อง ให้ใช้ Viridis หรือ Cividis ทั้งสองเพิ่มความสว่างขึ้นอย่างสม่ำเสมอตลอดช่วง จึงยังอ่านได้แม้พิมพ์เป็นขาวดำ

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

เพิ่มความต่างที่ไม่ใช่สี

ตามชนิดของแผนภูมิ

กราฟเส้น

ใช้ รูปแบบเส้น ต่างกัน: ทึบ ประ จุด ประ-จุด
ใช้ เครื่องหมายจุด ต่างกัน: วงกลม สี่เหลี่ยม สามเหลี่ยม ข้าวหลามตัด
แปรผัน ความหนาของเส้น สำหรับชุดข้อมูลที่สำคัญที่สุด

แผนภูมิแท่ง

ใช้ ลวดลายแรเงา สำหรับแท่งที่ซ้อนกัน (เส้นทแยง จุด ตาราง)
แสดง ค่าตัวเลข บนหรือในแท่ง
ใช้ ช่องว่าง และการจัดกลุ่มเพื่อแยกหมวดหมู่

แผนภูมิวงกลมและโดนัท

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

แผนภาพความร้อน

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

แผนภาพกระจาย

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

ความต่างสำหรับองค์ประกอบที่ไม่ใช่ข้อความ

WCAG 2.2 กำหนดอัตราส่วนความต่างขั้นต่ำ 3:1 สำหรับองค์ประกอบกราฟิกที่จำเป็นต่อการเข้าใจ ซึ่งครอบคลุมถึง

เส้นในกราฟเส้นเทียบกับพื้นหลัง
ขอบเขตระหว่างส่วนที่อยู่ติดกัน
ตัวชี้วัดในสถานะโฟกัส
เส้นตารางที่จำเป็นต่อการอ่านค่า

เส้นตารางที่จางมากจนเห็นแทบไม่ออกเป็นปัญหาที่พบบ่อย ให้เพียงพอต่อการอ่าน แต่ไม่เด่นจนแย่งความสนใจจากข้อมูล

อย่าลืมข้อความอธิบาย

แผนภูมิที่เข้าถึงได้ควรมาพร้อมกับ

ชื่อเรื่องที่บอกข้อสรุป ไม่ใช่แค่หัวข้อ — “ยอดขายเพิ่มขึ้น 40% ในไตรมาส 3” ดีกว่า “ยอดขายรายไตรมาส”
ข้อความอธิบายทางเลือก ที่สรุปแนวโน้มหลักสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ
ตารางข้อมูล เป็นทางเลือกสำหรับผู้ที่ต้องการค่าที่แน่นอน

ข้อมูลเดียวกันในสองรูปแบบไม่ใช่ความซ้ำซ้อน แต่คือการเข้าถึง

ขั้นตอนการทดสอบ

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

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

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

คำตอบโดยย่อ