เครื่องจำลองการตาบอดสี
ผู้ชายประมาณ 8% และผู้หญิง 0.5% มีภาวะบกพร่องในการมองเห็นสีบางรูปแบบ โดยพบบ่อยที่สุดในแกนสีแดง-เขียว อัปโหลดงานออกแบบ ภาพหน้าจอ หรือภาพประกอบ เลือกโหมดจำลองหนึ่งโหมด แล้วเปรียบเทียบภาพต้นฉบับกับผลลัพธ์จำลองแบบเคียงข้างกัน เหมาะสำหรับตรวจว่าแผนภูมิ แผนที่ หรือ UI ยังอ่านเข้าใจได้เมื่อไม่ได้พึ่งสีเพียงอย่างเดียว
เครื่องจำลองทำงานอย่างไร
-
1
วางลงในรูปภาพ
PNG, JPG, WebP หรือ SVG ประมวลผลในเบราว์เซอร์, ไม่มีการอัปโหลดเลย
-
2
เลือกโหมดจำลอง
เลือก protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia หรือ achromatomaly
-
3
ดูตัวอย่างแบบเคียงข้างกัน
เบราว์เซอร์ใช้การแปลงแบบเมทริกซ์และแสดงภาพต้นฉบับข้างผลจำลองที่เลือก
-
4
ส่งออกภาพจำลอง
ดาวน์โหลดผลจำลองที่เลือกเป็น PNG หรือถ่ายภาพหน้าจอเปรียบเทียบเพื่อรีวิวการออกแบบ
รูปแบบของการมองเห็นสีบกพร่อง
| สภาพ | ความชุก | ลักษณะเฉพาะ |
|---|---|---|
| ดิวเทอโรมาลี | ~5% ของผู้ชาย | ความผิดปกติของสีแดง-เขียว เกิดจาก M-cone เลื่อน |
| โปรโตโนมาลี | ~1% ของผู้ชาย | ความผิดปกติของสีแดง-เขียว เกิดจาก L-cone เลื่อน |
| ดิวเทอเรโนเปีย | ~1% ของผู้ชาย | ขาด M-cone, สีแดง-เขียว แทบแยกไม่ออก |
| โพรโทเปีย | ~1% ของผู้ชาย | ไม่พบกรวย L, การรับรู้สีแดงเปลี่ยนไป |
| ไทรทาโนเปีย | หายากมาก | ขาดกรวย S, แกนสีน้ำเงิน-เหลืองยุบ |
| ไทรทันโนมาลี | หายากมาก | S-cone ขยับ, สูญเสียสีน้ำเงิน-เหลืองเล็กน้อย |
| อะโครมาโทเปีย | หายากมาก | ตาบอดสีโดยสมบูรณ์ มองเห็นเป็นโทนสีเทาเท่านั้น |
นักออกแบบส่วนใหญ่มักเริ่มจาก deuteranopia และ protanopia เพราะภาวะสีแดง-เขียวพบได้บ่อยที่สุด จากนั้นจึงเพิ่มโหมดความผิดปกติแบบอ่อนและแกนสีน้ำเงิน-เหลืองเพื่อการตรวจที่ครอบคลุมขึ้น
ความหมายของการออกแบบ
- อย่าใช้สีแดง/เขียวเพียงอย่างเดียวในการแยกแยะสถานะ ตัวบ่งชี้ข้อผิดพลาด/ความสำเร็จจำเป็นต้องมีรูปร่าง ไอคอน หรือป้ายข้อความ นอกเหนือจากสี เครื่องหมาย X สีแดงและเครื่องหมายถูกสีเขียวนั้นแยกแยะได้ชัดเจน แต่วงกลมสีแดงและสีเขียวกลับแยกไม่ออก
- แผนภูมิ: ใช้การเติมรูปแบบ ป้ายกำกับโดยตรง หรือชุดสีที่แตกต่างกันในการรับรู้ (ColorBrewer, Viridis) หลีกเลี่ยงจานสัญญาณไฟจราจรสำหรับการแสดงข้อมูล
- แผนที่: ขอบเขตและการแรเงาเพื่อแยกแยะภูมิภาค สีเพียงอย่างเดียวไม่เพียงพอ
- ไฮเปอร์ลิงก์: อย่ากำหนดสไตล์ด้วยสีเพียงอย่างเดียว การขีดเส้นใต้หรือเพิ่มน้ำหนักตัวอักษรช่วยได้ทุกคน รวมถึงผู้ที่มีการมองเห็นสีปกติ
- ช่องแบบฟอร์มที่ต้องกรอก: เครื่องหมายดอกจันสีแดงบวกป้ายกำกับ “ต้องระบุ” หรือขอบสีแดงบวกข้อความตัวช่วย “จำเป็น”
- ตัวบ่งชี้สถานะ: ไฟจราจรสีแดง/สีเหลืองอำพัน/เขียวทำหน้าที่เป็นตัวเสริม ไม่ใช่เป็นสัญญาณเพียงอย่างเดียว
ชุดจานสีที่ดีสำหรับการออกแบบที่ปลอดภัยต่อตาบอดสี
- Viridis (ใช้เป็นค่าเริ่มต้นใน matplotlib, D3): สีม่วงถึงเหลือง สม่ำเสมอในการรับรู้
- ColorBrewer เชิงคุณภาพ: 8 เฉดสีที่แตกต่างกัน ออกแบบมาให้ยังคงสามารถแยกแยะได้ในรูปแบบ CVD ทั่วไป
- Okabe-Ito: ชุดสี 8 สี ออกแบบมาโดยเฉพาะสำหรับคนตาบอดสี
เครื่องมือและการทดสอบ
- ตัวอย่างเครื่องมือจำลอง (เครื่องมือนี้), ตรวจสอบด้วยภาพอย่างรวดเร็ว
- ตัวตรวจสอบคอนทราสต์ WCAG, ช่วยให้มั่นใจว่าข้อความยังคงสามารถอ่านได้โดยไม่คำนึงถึงการรับรู้สี
- การทดสอบโดยผู้ใช้จริง, ไม่มีอะไรมาแทนที่การแสดงการออกแบบของคุณต่อผู้ใช้ที่ตาบอดสีจริงได้
เรื่องน่าสนุก
ตัวจำลองการมองเห็นสีสมัยใหม่ใช้การประมาณแบบเมทริกซ์เพื่อแปลงการตอบสนองของเซลล์รูปกรวยไปเป็น RGB ให้มองผลลัพธ์นี้เป็นตัวช่วยตรวจงานออกแบบ ไม่ใช่การวินิจฉัยทางการแพทย์หรือภาพแทนการรับรู้ของบุคคลใดบุคคลหนึ่งอย่างสมบูรณ์
คำถามที่พบบ่อย
เป็นการประมาณที่มีประโยชน์ แต่การรับรู้สีจริงแตกต่างกันไปในแต่ละคน ภาวะบกพร่องสีแดง-เขียวส่วนใหญ่อยู่บนช่วงตั้งแต่อ่อนถึงรุนแรง จึงควรใช้ภาพตัวอย่างเป็นสัญญาณประกอบการออกแบบ ไม่ใช่การวินิจฉัย
Deuteranomaly ครอบคลุมผู้ใช้ที่ตาบอดสีส่วนใหญ่ (ประมาณ 5% ของผู้ชาย) การทดสอบกับ deuteranopia (รูปแบบที่รุนแรง) เป็นการตรวจสอบแบบอนุรักษ์นิยม หากการออกแบบได้ผลที่นั่น ก็จะได้ผลกับความผิดปกติที่อ่อนกว่าด้วย
ใช่ แม้จะพบได้น้อยกว่ามาก (~0.5%) อาการขาดสีแดง-เขียวคือ X-linked recessive ดังนั้นผู้ชาย (XY) จึงต้องการ X ที่ได้รับผลกระทบเพียงตัวเดียว ผู้หญิง (XX) ต้องการทั้งสองอย่าง Tritanopia เป็น autosomal และส่งผลต่อเพศอย่างเท่าเทียมกัน
ไม่ใช่ในเครื่องมือนี้โดยตรง แต่เป็นการจำลองการมองเห็นเลือนรางทั่วไป ซึ่งเกี่ยวข้องกับความพร่ามัวและการลดคอนทราสต์ด้วย สำหรับการจำลองการเข้าถึงเต็มรูปแบบ เครื่องมือเฉพาะ เช่น Lighthouse ของ Chrome หรือ NoCoffee จะครอบคลุมสิ่งเหล่านั้น
เครื่องมือที่เกี่ยวข้อง
ตัวเลือกสี Material Design
สำรวจพาเลตสีของ Material Design คัดลอกเฉดสีใดก็ได้ (ตั้งแต่ 50 ถึง A700) ในรูปแบบ HEX, RGB หรือ HSL เพียงแตะครั้งเดียว
เครื่องสร้างบาร์โค้ด
สร้างบาร์โค้ด Code 128, EAN-13, UPC, ITF-14 และรูปแบบเชิงเส้นอื่นอีกเจ็ดแบบ ข้อมูลอยู่ในเบราว์เซอร์และดาวน์โหลดเป็น SVG หรือ PNG ได้
เครื่องมือสร้าง QR Code
สร้าง QR Code จากข้อความหรือ URL ในเบราว์เซอร์ แล้วดาวน์โหลดเป็น PNG
สร้างเกียรติบัตร
สร้างเกียรติบัตรรางวัล การเข้าร่วม หรือการจบหลักสูตรสำหรับพิมพ์ พร้อมข้อความ โลโก้ รูปแบบ และขนาดกระดาษของคุณ ไม่ใช่ใบรับรอง TLS/SSL
แปลง WebP เป็น JPG
แปลงรูปภาพ WebP เป็น JPG/JPEG ได้โดยตรงในเบราว์เซอร์ เลือกคุณภาพ ผสานความโปร่งใสเข้ากับสีพื้นหลัง แล้วดาวน์โหลดโดยไม่ต้องอัปโหลดไฟล์
เครื่องมือสร้างมีม
อัปโหลดรูป JPG, PNG หรือ WebP ใส่ข้อความด้านบนและด้านล่าง ปรับฟอนต์ สี และเส้นขอบ แล้วดาวน์โหลดมีมเป็น PNG โดยประมวลผลในเบราว์เซอร์