จำลองตาบอดสี — มองสีแบบผู้อื่น
ป้อนรหัสสี hex และเปรียบเทียบแบบเคียงข้างกันว่าสีนั้นปรากฏอย่างไรสำหรับผู้ที่มีภาวะตาบอดสีแดง-เขียว (ดิวทีรานอเปีย โปรทานอเปีย) ตาบอดสีน้ำเงิน-เหลือง (ทริทานอเปีย) และตาบอดสีทั้งหมด (อะโครมาทอปเซีย) แต่ละตัวอย่างแสดงค่า hex และ RGB ที่จำลอง
วิธีการทำงาน
ตาบอดสีในตัวเลข
ความบกพร่องในการมองเห็นสีส่งผลกระทบต่อประมาณ 300 ล้านคนทั่วโลก — ประมาณ 8% ของผู้ชายและ 0.5% ของผู้หญิงที่มีเชื้อสายยุโรปเหนือ ประเภทแดง-เขียวพบบ่อยที่สุด: ดิวทีรานอเปียและดิวทีรานอมาลี (ความอ่อนแอสีเขียว) รวมกันส่งผลต่อผู้ชายประมาณ 5% ในขณะที่โปรทานอเปียและโปรทานอมาลี (ความอ่อนแอสีแดง) ส่งผลต่อประมาณ 2.5% ทริทานอเปีย (น้ำเงิน-เหลือง) พบได้น้อยมาก โดยเกิดขึ้นน้อยกว่า 1 ใน 10,000 คน อะโครมาทอปเซียทั้งหมดพบได้น้อยยิ่งกว่า — 1 กรณีต่อ 30,000
ตัวเลขเหล่านี้หมายความว่าจากผู้ชาย 12 คนที่เยี่ยมชมเว็บไซต์หรือแอปของคุณ ประมาณหนึ่งคนไม่สามารถแยกแยะการผสมสีบางอย่างตามที่คุณตั้งใจ ผลิตภัณฑ์ที่มีการเข้าชมสูงต้องคำนึงถึงผู้ใช้กลุ่มนี้ การจำลองสิ่งที่ผู้ใช้เหล่านั้นเห็นคือก้าวแรกสู่การออกแบบแบบอินคลูซีฟ
วิธีการทำงานของการจำลอง
ตามนุษย์มีเซลล์รับแสงรูปกรวยสามประเภทที่ไวต่อความยาวคลื่นยาว (แดง) กลาง (เขียว) และสั้น (น้ำเงิน) ตาบอดสีเกิดขึ้นเมื่อกรวยหนึ่งประเภทขึ้นไปขาดหายหรือมีความไวสเปกตรัมที่เปลี่ยนแปลง นักวิจัยสร้างแบบจำลองนี้ในพื้นที่สี LMS ซึ่งตรงกับการตอบสนองของกรวยโดยตรง และหาเมทริกซ์การแปลงที่คาดการณ์ว่าตาที่บกพร่องในการมองเห็นสีจะรับรู้ค่า RGB ที่กำหนดอย่างไร
โปรแกรมจำลองนี้ใช้เมทริกซ์ Machado 2009 แบบง่ายที่ใช้โดยตรงในพื้นที่ sRGB วิธีนี้สูญเสียความแม่นยำทางสรีรวิทยาเล็กน้อยเพื่อความเร็วและความเรียบง่าย — ความแตกต่างในการรับรู้ไม่มีนัยสำคัญสำหรับงานออกแบบ ค่าเอาต์พุตทั้งหมดถูกจำกัดไว้ในช่วง 0–255 การจำลองอะโครมาทอปเซียรวมทุกช่องเข้าสู่ค่าความสว่างมาตรฐาน (0.299R + 0.587G + 0.114B) เลียนแบบการไม่มีการรับรู้สีโดยสิ้นเชิง
เคล็ดลับการออกแบบสำหรับการเข้าถึงสำหรับผู้ตาบอดสี
เทคนิคที่มีประสิทธิภาพสูงสุดคือไม่ใช้สีเพียงอย่างเดียวในการสื่อข้อมูล ผสมสีกับรูปร่าง รูปแบบ หรือป้ายกำกับข้อความ แผนภาพวงกลมไม่ควรแยกแยะด้วยสีเพียงอย่างเดียว — เพิ่มป้ายกำกับโดยตรงหรือรูปแบบการเติมที่แตกต่างกัน ข้อผิดพลาดในการตรวจสอบแบบฟอร์มไม่ควรระบุด้วยการทำขอบเป็นสีแดงเท่านั้น — เพิ่มไอคอนและข้อความแสดงข้อผิดพลาดที่ชัดเจน หลักการเหล่านี้ปรากฏในเกณฑ์ความสำเร็จ WCAG 2.1 1.4.1 (การใช้สี)
เมื่อเลือกชุดสี ทดสอบคู่พื้นหน้าและพื้นหลังด้วยตัวตรวจสอบคอนทราสต์ (WCAG กำหนดอัตราส่วนขั้นต่ำ 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความขนาดใหญ่) นอกจากคอนทราสต์ ให้เลือกการผสมสีที่ยังคงแยกแยะได้ภายใต้การจำลองดิวทีรานอเปีย คู่สีน้ำเงิน-ส้มทำงานได้ดี ในขณะที่คู่สีแดง-เขียวมีปัญหา
คำถามที่พบบ่อย
›ดิวทีรานอเปียคืออะไร?
ดิวทีรานอเปียเป็นรูปแบบหนึ่งของตาบอดสีแดง-เขียวที่เกิดจากการขาดเซลล์รับแสงรูปกรวยความยาวคลื่นกลาง (ไวต่อสีเขียว) ผู้ที่มีภาวะดิวทีรานอเปียมีปัญหาในการแยกแยะสีแดงและสีเขียว ซึ่งปรากฏเป็นเฉดสีเหลือง น้ำตาล หรือเทา เป็นประเภทที่พบบ่อยที่สุดของความบกพร่องในการมองเห็นสี ส่งผลต่อผู้ชายประมาณ 1%
›ความแตกต่างระหว่างดิวทีรานอเปียและโปรทานอเปียคืออะไร?
ทั้งสองเป็นตาบอดสีแดง-เขียว แต่ส่งผลต่อกรวยประเภทต่างกัน โปรทานอเปียเกี่ยวข้องกับการขาดกรวยความยาวคลื่นยาว (ไวต่อสีแดง) ดิวทีรานอเปียเกี่ยวข้องกับการขาดกรวยความยาวคลื่นกลาง (ไวต่อสีเขียว) ในทางปฏิบัติ สีแดงดูมืดกว่ามากในโปรทานอเปียเมื่อเทียบกับดิวทีรานอเปีย
›มีคนตาบอดสีกี่คนทั่วโลก?
ประมาณ 300 ล้านคนทั่วโลกมีความบกพร่องในการมองเห็นสีในรูปแบบใดรูปแบบหนึ่ง ประมาณ 8% ของผู้ชายและ 0.5% ของผู้หญิงที่มีเชื้อสายยุโรปเหนือได้รับผลกระทบ ประเภทแดง-เขียวเป็นส่วนใหญ่ของกรณี
›ตาบอดสีพบบ่อยกว่าในผู้ชายหรือ?
ใช่ ยีนที่เข้ารหัสโฟโตพิกเมนต์ของกรวยความยาวคลื่นยาวและกลาง (OPN1LW และ OPN1MW) อยู่บนโครโมโซม X เนื่องจากผู้ชายมีโครโมโซม X เพียงตัวเดียว อัลลีลที่บกพร่องตัวเดียวก็เพียงพอที่จะทำให้เกิดตาบอดสี ผู้หญิงมีสองโครโมโซม X ดังนั้นทั้งสองสำเนาต้องมีข้อบกพร่อง
›อะโครมาทอปเซียคืออะไร?
อะโครมาทอปเซีย (โมโนโครมาทิซึมของแท่ง) เป็นภาวะที่กรวยทั้งสามประเภทไม่ทำงาน ทำให้การมองเห็นพึ่งพาเซลล์แท่งโดยสิ้นเชิง ผู้ที่ได้รับผลกระทบเห็นโลกในเฉดสีเทา มีความคมชัดในการมองเห็นต่ำมากในแสงสว่าง และมักไวต่อแสงอย่างมาก พบได้น้อยมาก ส่งผลต่อประมาณ 1 ใน 30,000 คน
›การจำลองตาบอดสีมีความแม่นยำเพียงใด?
การจำลองใช้เมทริกซ์การแปลงเชิงเส้นที่ได้รับการยืนยัน (Machado 2009) ซึ่งสอดคล้องอย่างใกล้ชิดกับข้อมูลการทดลองเกี่ยวกับสีที่รับรู้โดยผู้ที่มีการมองเห็นแบบสองสี สำหรับการออกแบบและการทดสอบการเข้าถึง ความแม่นยำมากกว่าพอ มีความแตกต่างระหว่างบุคคล ดังนั้นให้ถือว่าการจำลองเป็นมุมมองกรณีเลวร้ายที่สุดแบบอนุรักษ์นิยม
›จะออกแบบสำหรับตาบอดสีโดยไม่ต้องออกแบบใหม่ทั้งหมดได้อย่างไร?
เริ่มต้นด้วยการตรวจสอบชุดสีที่มีอยู่ด้วยโปรแกรมจำลองนี้ สำหรับคู่ตัวอย่างใดๆ ที่ดูเหมือนกันในมุมมองดิวทีรานอเปียหรือโปรทานอเปีย ให้ถามว่าผู้ใช้สามารถเข้าใจเนื้อหาของคุณโดยไม่มีความแตกต่างของสีหรือไม่ เพิ่มไอคอน ป้ายกำกับ หรือรูปแบบตามต้องการ เลือกสีที่ตัดกันซึ่งยังคงแยกแยะได้ — สีน้ำเงินและสีส้มแทนสีแดงและสีเขียว
›เครื่องมือนี้ทำงานกับชื่อสี CSS หรือค่า HSL ได้หรือ?
เครื่องมือนี้รับเฉพาะรหัส hex (#RRGGBB หรือ #RGB) เท่านั้น หากต้องการใช้ชื่อสี CSS หรือค่า HSL ให้แปลงเป็น hex ก่อนโดยใช้เครื่องแปลงสีของเรา แล้ววางผลลัพธ์ที่นี่
เครื่องมือที่เกี่ยวข้อง
อัปเดตล่าสุด: