จำลองการตาบอดสี

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

จำลองการตาบอดสี ทำงานอย่างไร

Color Blindness Simulator ใช้ color-transformation matrices กับภาพของคุณเพื่อแสดงว่าภาพดูอย่างไรสำหรับผู้ที่มีภาวะ protanopia (ตาบอดสีแดง), deuteranopia (ตาบอดสีเขียว), tritanopia (ตาบอดสีน้ำเงิน) หรือ achromatopsia (ตาบอดสีสมบูรณ์) matrices ถูกใช้กับทุกพิกเซลโดยใช้ Canvas.getImageData() และ Canvas.putImageData() ในเบราว์เซอร์ ไม่มีข้อมูลภาพถูกส่งไปยังเซิร์ฟเวอร์

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

เขียนโดย Bastien Sulyan

วิธีใช้ จำลองการตาบอดสี ทีละขั้นตอน

วางภาพลงบนพื้นที่อัปโหลดหรือคลิกเพื่อเรียกดู
เลือกประเภทความบกพร่องทางการมองเห็นสีจากเมนู: protanopia, deuteranopia, tritanopia หรือ achromatopsia
ดูผลลัพธ์ที่จำลองควบคู่กับต้นฉบับในแผงเปรียบเทียบ
สลับระหว่างประเภทการจำลองเพื่อเปรียบเทียบว่าแต่ละสภาวะส่งผลต่อภาพอย่างไร
ใช้มุมมองเคียงข้างกันเพื่อระบุพื้นที่ที่สีเพียงอย่างเดียวถ่ายทอดข้อมูลที่อาจสูญหาย

กรณีการใช้งานที่พบบ่อย

นักออกแบบ UI ตรวจสอบว่าตัวบ่งชี้สถานะแดง-เขียวสามารถแยกแยะได้สำหรับผู้ใช้ที่มี deuteranopia ก่อนส่งมอบฟีเจอร์
ผู้เขียนการแสดงข้อมูลตรวจสอบว่าแผนภูมิหลายเส้นที่มีซีรีส์เข้ารหัสสียังคงอ่านได้ในการจำลอง protanopia
นักออกแบบแบรนด์ประเมินว่าโลโก้ที่มีสีแบบ gradient อ่านได้อย่างไรภายใต้ achromatopsia เพื่อให้แน่ใจว่ายังคงรูปร่างและความคมชัดที่จดจำได้
นักพัฒนาเกมทดสอบว่าโซนแผนที่ที่เข้ารหัสสีสามารถแยกแยะได้สำหรับผู้เล่นที่มี tritanopia และเพิ่ม pattern fills เพื่อเสริมการเข้ารหัสสี

คำถามที่พบบ่อย

การจำลองตาบอดสีมีความแม่นยำเพียงใด?

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

เครื่องมือครอบคลุมตาบอดสีทุกประเภทหรือไม่?

ประเภททั้งสี่ที่ครอบคลุมเป็นรูปแบบที่พบบ่อยที่สุดของความบกพร่องทางการมองเห็นสีและตาบอดสีสมบูรณ์ Anomalous trichromacy ประเภท (protanomaly, deuteranomaly, tritanomaly) ซึ่งแสดงถึงความบกพร่องบางส่วน ไม่ได้รับการสร้างแบบแยกต่างหากในเวอร์ชันปัจจุบัน

ภาพของฉันถูกวิเคราะห์บนเซิร์ฟเวอร์เพื่อสร้างการจำลองหรือไม่?

ไม่ การแปลง color matrix คำนวณในเครื่องโดยใช้ Canvas.getImageData() เพื่ออ่านอาร์เรย์พิกเซลและ Canvas.putImageData() เพื่อเขียนผลลัพธ์ การประมวลผลทั้งหมดเกิดขึ้นภายในแท็บเบราว์เซอร์และข้อมูลภาพอยู่ในอุปกรณ์ของคุณ

ฉันสามารถใช้เครื่องมือนี้เพื่อตรวจสอบอัตราส่วนความคมชัดของสีได้หรือไม่?

เครื่องมือนี้แสดงวิธีที่สีปรากฏต่อผู้ที่มีความบกพร่องทางการมองเห็นสีแต่ไม่คำนวณอัตราส่วนความคมชัด WCAG เป็นตัวเลข สำหรับการตรวจสอบความคมชัดเป็นตัวเลข ให้ใช้เครื่องมือ Color Converter ซึ่งมี WCAG contrast checker

เครื่องมือทำงานกับภาพที่มีข้อความหรือไม่?

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

เครื่องมือที่เกี่ยวข้อง

เก็บทุกอย่างไว้ในเครื่อง, สำรวจเครื่องมือเสริม

เครื่องมือรูปภาพทั้งหมด

จำลองการตาบอดสี