ตรวจสอบคอนทราสต์สี
ทดสอบการปฏิบัติตามคอนทราสต์ WCAG 2.1 AA/AAA สำหรับการออกแบบเว็บที่เข้าถึงได้
ตรวจสอบคอนทราสต์สี
ตัวอย่างแบบสด
ทางเลือกที่เข้าถึงได้
ทุกระดับคอนทราสต์ผ่าน! ไม่จำเป็นต้องมีคำแนะนำ
ข้อกำหนด WCAG 2.1
| ระดับ | ปกติ | ใหญ่ |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
คุณสมบัติ
ปฏิบัติตาม WCAG 2.1
ทดสอบระดับ AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่ตามแนวทาง WCAG 2.1 อย่างเป็นทางการ
ตัวอย่างแบบสด
ดูการผสมสีของคุณแบบเรียลไทม์พร้อมข้อความตัวอย่างในขนาดต่างๆ
คำแนะนำอัจฉริยะ
รับทางเลือกสีที่เข้าถึงได้โดยอัตโนมัติเมื่อการผสมของคุณไม่ผ่านข้อกำหนดคอนทราสต์
ความเป็นส่วนตัวเป็นอันดับแรก
การคำนวณทั้งหมดทำในเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์
วิธีใช้?
เลือกสี
ป้อนสีพื้นหน้า (ข้อความ) และสีพื้นหลังโดยใช้ตัวเลือกสีหรือช่อง HEX
ตรวจสอบผลลัพธ์
ดูอัตราส่วนคอนทราสต์และสถานะการปฏิบัติตาม WCAG AA/AAA สำหรับข้อความปกติและข้อความใหญ่
ใช้คำแนะนำ
หากคอนทราสต์ไม่ผ่าน คลิกที่ทางเลือกสีที่เข้าถึงได้ที่แนะนำเพื่อใช้ทันที
คำถามที่พบบ่อย
ตรวจสอบคอนทราสต์สีคืออะไร?
เครื่องมือที่บอกว่าสีข้อความและพื้นหลังของคุณเป็นไปตามมาตรฐานการเข้าถึง WCAG 2.1 หรือไม่ เลือกสองสีแล้วดูทันทีว่าผ่านระดับ AA และ AAA หรือเปล่า ถ้าไม่ผ่าน เครื่องมือจะแนะนำสีทางเลือกที่เข้าถึงได้ ใช้ได้ด้วยคลิกเดียว
ทำไมคอนทราสต์จึงสำคัญ
คอนทราสต์สีที่ต่ำเป็นปัญหาการเข้าถึงที่พบบ่อยที่สุดบนเว็บ ส่งผลต่อคนที่มีปัญหาทางสายตา ตาบอดสี และแม้แต่ผู้ใช้ที่อยู่กลางแดด การปฏิบัติตาม WCAG ไม่ใช่แค่แนวปฏิบัติที่ดี แต่มักเป็นข้อกำหนดทางกฎหมาย
วิธีใช้งาน
ป้อนสีพื้นหน้าและพื้นหลังด้วยรหัส HEX หรือตัวเลือกสี เครื่องมือจะคำนวณอัตราส่วนคอนทราสต์ทันทีและแสดงผ่านหรือไม่ผ่านสำหรับแต่ละระดับ WCAG ถ้าคอนทราสต์ต่ำ ดูส่วนคำแนะนำ
เคล็ดลับสำหรับนักออกแบบ
ทดสอบพาเลทสีตั้งแต่เริ่มกระบวนการออกแบบ ไม่ใช่หลังจากเว็บเสร็จ ข้อความเข้มบนพื้นอ่อนมักจะใช้ได้ดี หลีกเลี่ยงการใช้สีเพียงอย่างเดียวในการสื่อสารข้อมูล
ความเป็นส่วนตัว
ทุกอย่างทำงานในเบราว์เซอร์ ไม่มีข้อมูลสีถูกส่งไปยังเซิร์ฟเวอร์ ไม่ต้องมีบัญชี ไม่มีการติดตาม