◐

เครื่องตรวจคอนทราสต์สี

ตรวจอัตราส่วนคอนทราสต์ตามมาตรฐาน WCAG ระหว่างสีข้อความและสีพื้นหลัง พร้อมผลลัพธ์ AA/AAA

ไฟล์ของคุณอยู่ในอุปกรณ์นี้

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

ใช้ปุ่มดาวน์โหลดเพื่อบันทึกเครื่องมือนี้เป็นไฟล์ HTML ไฟล์เดียวสำหรับใช้ออฟไลน์

ความเป็นส่วนตัว →

สีข้อความ

พื้นหลัง

เด็กน้อยกินกล้วยน้ำว้าใต้ต้นไม้ใหญ่อย่างเอร็ดอร่อย

ตัวอย่างข้อความขนาดใหญ่

ลองทำตามตัวอย่าง

ตัวอย่าง

ตั้งสีตัวอักษรเป็น #767676 และพื้นหลังเป็น #ffffff อัตราส่วนคือ 4.54:1 ผ่าน AA สำหรับข้อความปกติ ถ้าอ่อนลงหนึ่งระดับเป็น #777777 จะได้ 4.48:1 และไม่ผ่าน เพราะ AA ต้องการอย่างน้อย 4.5:1 สำหรับข้อความปกติ

ข้อควรทราบ

ข้อความขนาดใหญ่ (ราว 24px หรือ 18.7px ตัวหนา) ต้องการเพียง 3:1 สำหรับ AA อัตราส่วนนี้ไม่คำนึงถึงฟอนต์บาง ข้อความบนรูปภาพ และความโปร่งใส จึงควรตรวจงานออกแบบจริงด้วย และอย่าใช้สีเพียงอย่างเดียวเพื่อสื่อความหมาย

เกี่ยวกับเครื่องมือนี้

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

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

ข้อความขนาดใหญ่นับอย่างไร?

WCAG ถือว่าข้อความขนาด 18pt (24px) หรือ 14pt (18.66px) แบบตัวหนาเป็นข้อความขนาดใหญ่ ซึ่งต้องการอัตราส่วนที่ต่ำกว่าคือ 3:1 สำหรับ AA

อัตราส่วนเท่าใดจึงจะผ่าน?

ข้อความปกติต้องการ 4.5:1 สำหรับ AA และ 7:1 สำหรับ AAA ส่วนข้อความขนาดใหญ่ต้องการ 3:1 สำหรับ AA และ 4.5:1 สำหรับ AAA