ไม่มีการอัปโหลด, 100% ในเครื่อง, ไม่มีบัญชี

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

พิมพ์หรือเลือกสองสีแล้วดูอัตราส่วนคอนทราสต์ WCAG ทันที พร้อมป้ายผ่าน AA/AAA สำหรับข้อความปกติและขนาดใหญ่

ตัวตรวจสอบคอนทราสต์ ทำงานอย่างไร

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

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

  1. ป้อนหรือเลือกสีพื้นหน้า (ข้อความ)
  2. ป้อนหรือเลือกสีพื้นหลัง
  3. อ่านอัตราส่วนความคมชัดและป้ายผลลัพธ์ AA/AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และองค์ประกอบส่วนติดต่อที่ไม่ใช่ข้อความ
  4. ใช้ปุ่ม สลับสี เพื่อตรวจสอบคู่สีในทิศทางกลับกัน

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

  • ตรวจสอบสีหลักของแบรนด์เทียบกับสีขาวหรือสีดำ ก่อนเปิดใช้งานคอมโพเนนต์ปุ่ม
  • ยืนยันว่าข้อความสีเทาอ่อนยังผ่านเกณฑ์ AA บนพื้นหลังการ์ดสีอ่อนหรือไม่
  • ยืนยันว่าสีลิงก์ในย่อหน้าถึงเกณฑ์ 4.5:1 สำหรับข้อความปกติหรือไม่
  • ทดสอบว่าหัวข้อขนาดใหญ่ที่มีน้ำหนักเบายังผ่านเกณฑ์ที่ผ่อนปรน 3:1 สำหรับข้อความขนาดใหญ่หรือไม่

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

เครื่องมือนี้ส่งสีของฉันไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ การคำนวณทั้งหมดทำในเบราว์เซอร์ของคุณด้วย JavaScript สิ่งที่คุณป้อนจะไม่ถูกอัปโหลด

ต้องการอัตราส่วนความคมชัดเท่าไรสำหรับ AA หรือ AAA?

WCAG 2.x กำหนดไว้ที่ 4.5:1 สำหรับ AA ข้อความปกติ, 7:1 สำหรับ AAA ข้อความปกติ, 3:1 สำหรับ AA ข้อความใหญ่ และ 4.5:1 สำหรับ AAA ข้อความใหญ่

อะไรถือว่าเป็นข้อความขนาดใหญ่?

อย่างน้อย 24px (18pt) น้ำหนักปกติ หรือประมาณ 18.7px (14pt) ตัวหนา ข้อความที่เล็กกว่านั้นจะใช้เกณฑ์ของข้อความปกติ

ทำไมการสลับสีพื้นหน้ากับพื้นหลังจึงไม่เปลี่ยนอัตราส่วน?

สูตรอัตราส่วนมีความสมมาตร โดยจะเปรียบเทียบเพียงค่าความสว่างที่มากกว่าและน้อยกว่าเท่านั้น ไม่ได้ดูว่าสีใดถูกใช้เป็นข้อความ การสลับสียังคงมีประโยชน์ เพราะช่วยบอกว่าคู่สีนั้นใช้ได้หรือไม่เมื่อสลับบทบาทกัน เช่น ข้อความสีเข้มบนชิปสีอ่อน เทียบกับข้อความสีอ่อนบนชิปสีเข้ม

การผ่านเกณฑ์ AA รับประกันว่าดีไซน์ของฉันเข้าถึงได้หรือไม่?

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

นี่เป็นเครื่องมือทางการของ W3C หรือ WebAIM หรือไม่?

ไม่ใช่ เครื่องมือนี้นำสูตรความคมชัด WCAG 2.x ที่เปิดเผยต่อสาธารณะมาใช้งานเองโดยอิสระ และไม่มีความเกี่ยวข้องกับ W3C หรือองค์กรด้านการเข้าถึงใดๆ