ตัวตรวจสอบคอนทราสต์สี

วิธีใช้ ตัวตรวจสอบคอนทราสต์สี

ตรวจสอบทันทีว่าคอนทราสต์ของข้อความและ UI ผ่านเกณฑ์ AA และ AAA ของ WCAG 2.1 หรือไม่ ทำงานทั้งหมดในเบราว์เซอร์ ใส่สีสองสีแล้วอัตราส่วนจะคำนวณในเครื่อง — ข้อมูลไม่ออกจากอุปกรณ์

1. พิมพ์หรือวางสีข้อความลงช่อง Foreground Color ด้วยรูปแบบที่รองรับ เช่น HEX หรือ RGB
2. กรอกช่อง Background Color ด้วยสีพื้นหลังของข้อความ เพื่อคำนวณอัตราส่วนคอนทราสต์
3. ดูอัตราส่วนที่ได้ พร้อมป้ายผ่านเกณฑ์ AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่
4. ปรับสีฝั่งใดฝั่งหนึ่งจนอัตราส่วนเกิน 4.5:1 สำหรับเนื้อความ หรือ 3:1 สำหรับข้อความใหญ่และส่วนประกอบ UI
5. สลับค่า Foreground Color กับ Background Color เพื่อทดสอบคู่กลับด้าน เช่น ข้อความสว่างบนธีมมืด

AAA (7:1) เป็นเป้าหมายที่ดีสำหรับการอ่านยาว ๆ แต่ 4.5:1 (AA) คือเกณฑ์ขั้นต่ำที่แนวปฏิบัติด้านการเข้าถึงส่วนใหญ่กำหนด