Thai Color Blindness
Simulator Checker
อัปโหลดรูป แล้วเห็นทันทีว่าคนตาบอดสีแต่ละประเภทมองเห็นอย่างไร — เทียบ Original vs Simulated ด้วยสไลเดอร์ ดาวน์โหลดรูปจำลองไปเช็คงานออกแบบได้เลย
จำลองการมองเห็น
ลากสไลเดอร์เทียบ · ปรับความรุนแรงได้
ลากรูปมาวาง หรือคลิกเพื่อเลือก
รองรับ JPG PNG WEBP · วางรูปด้วย Ctrl+V
Protan/Deutan = แดง-เขียว (พบบ่อย 8% ชาย) · Tritan = น้ำเงิน-เหลือง · Achromatopsia = เห็นขาวดำทั้งหมด
มีผลกับ Protanomaly / Deuteranomaly / Tritanomaly เท่านั้น — โหมด opia อื่นปรับแล้วไม่เปลี่ยน
เช็คคู่สี · ใช้ได้เลยไม่ต้องอัปโหลด
WCAG contrastจำลองด้วย matrix แบบ Brettel/ Brettel-inspired แยกตามประเภท cone ที่ขาด — ไม่ใช่แค่ hue-shift ทั่วไป
พรีวิว · ลากสไลเดอร์เทียบ
อัปโหลดรูปเพื่อเริ่มยังไม่มีรูป
ลากรูปมาวาง หรือกด “ลองรูปตัวอย่าง” เพื่อดูการจำลองทันที รองรับ JPG/PNG/WEBP สูงสุด 12MB
คำอธิบายโหมด
เทียบสไลด์แบบโปร
ลากสไลเดอร์ 0–100% เพื่อเทียบภาพจริงกับภาพจำลองแบบพิกเซลต่อพิกเซล พร้อมโหมดเทียบข้างและเต็มจอ — เห็นความต่างของป้าย/กราฟทันที
8 โหมดตามหลัก Brettel
Protan/Deutan/Tritan ทั้งแบบเต็ม (opia) และอ่อน (anomaly ปรับความรุนแรงได้) + ขาวดำล้วน — ไม่ใช่แค่ฟิลเตอร์ hue-shift ธรรมดา
เช็คคู่สี + ปลอดภัย 100%
พิมพ์โค้ดสีเช็ค contrast ได้โดยไม่ต้องอัปโหลดรูป · ทุกอย่างรันบน canvas ในเครื่อง ไม่ส่งรูปขึ้นเซิร์ฟเวอร์ ปิดแท็บคือลบ
คำถามที่พบบ่อย
ตาบอดสีมีกี่แบบ เครื่องนี้จำลองแบบไหนบ้าง?
หลัก ๆ มี Protan (แดง) ขาด cone แดง, Deutan (เขียว) ขาด cone เขียว — สองแบบนี้รวมกันคือตาบอดสีแดง-เขียวพบบ่อย ~8% ในผู้ชาย, Tritan (น้ำเงิน-เหลือง) หายากกว่า, Achromatopsia เห็นขาวดำล้วนหายากมาก เครื่องนี้จำลองครบ 8 โหมด: Protanopia/Protanomaly, Deuteranopia/Deuteranomaly, Tritanopia/Tritanomaly, Achromatopsia (ใช้ matrix แบบ Brettel) โดย Anomaly ปรับความรุนแรง 0–100% ได้
อัปโหลดรูปแล้วปลอดภัยไหม เก็บรูปไว้หรือเปล่า?
ปลอดภัย 100% — รูปอ่านด้วย FileReader และประมวลผลด้วย canvas บนเบราว์เซอร์ของคุณเท่านั้น ไม่มีการอัปโหลดไปเซิร์ฟเวอร์ ไม่เก็บ log ไม่ฝังลายน้ำ ปิดแท็บหรือกด ลบรูป/ล้างทั้งหมด รูปหายทันที ใช้เช็คงานลูกค้าที่เป็นความลับได้สบายใจ
เช็คคู่สี (เช่น ปุ่มกับพื้นหลัง) ยังไงให้ผ่านคนตาบอดสี?
ใส่โค้ดสี 2 สีในกล่อง เช็คคู่สี — ระบบจะแสดงพรีวิวต้นฉบับ vs จำลองตามโหมดที่เลือกพร้อมคำนวณ WCAG contrast ให้ หลักคืออย่าพึ่งสีอย่างเดียว เพิ่มไอคอน เส้นขอบ ตัวหนา หรือแพทเทิร์นช่วยด้วย หลีกเลี่ยงคู่เขียว-แดงหรือน้ำเงิน-เหลืองที่ brightness ใกล้กัน แล้วกดดาวน์โหลดรูปจำลองไปส่งให้ทีมดูได้เลย
ทำไมต้องมีสไลเดอร์เทียบ Original ↔ Simulated?
เพราะดูรูปจำลองล้วนอย่างเดียวมักดูไม่ออกว่าจุดไหนเพี้ยน สไลเดอร์ให้คุณลากครึ่งซ้ายเป็นต้นฉบับครึ่งขวาเป็นจำลอง เห็นความต่างแบบพิกเซลต่อพิกเซลทันที ใช้เช็คป้ายราคา กราฟ แผนที่ heatmap หรือ UI ที่ต้องแยกสีเพื่อสื่อความหมาย ไม่ต้องสลับตาไปมา
ดาวน์โหลดรูปจำลองไปใช้งานต่อได้ไหม?
ได้ — กด ดาวน์โหลดรูปจำลอง จะได้ PNG ขนาดเท่ารูปต้นฉบับที่ผ่าน matrix แล้ว หรือกด ดาวน์โหลดเทียบ จะได้ภาพแบ่งครึ่งซ้ายต้นฉบับขวาจำลองพร้อมป้ายชื่อโหมด เหมาะส่งให้ designer หรือลูกค้าดูก่อนอนุมัติงานพิมพ์หรือสไลด์