หน้าแรกเครื่องมือสำหรับนักออกแบบตัวตรวจสอบคอนทราสต์

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

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

The quick brown fox
Small text sample — 14px regular weight

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

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

วิธีใช้

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

ข้อควรรู้

  • WCAG 2.1 AA กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่
  • WCAG 2.1 AAA กำหนดอย่างน้อย 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่
  • ข้อความขนาดใหญ่หมายถึงตัวปกติอย่างน้อย 18 pt (24 px) หรือตัวหนาอย่างน้อย 14 pt (ประมาณ 18.66 px)
  • อัตราส่วนคอนทราสต์อยู่ระหว่าง 1:1 (สีเดียวกัน) ถึง 21:1 (ดำบนขาว)
  • อัตราส่วนคำนวณจากความส่องสว่างสัมพัทธ์ (relative luminance) ของแต่ละสี ตามสูตรของ WCAG

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

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

อัตราส่วนคอนทราสต์เท่าไรจึงผ่านเกณฑ์การเข้าถึง?

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

ข้อความสีขาวบนพื้นสีเขียวผ่านเกณฑ์ไหม?

ขึ้นอยู่กับเฉดสี สีเขียวสดหลายเฉดไม่ผ่าน AA เมื่อใช้กับข้อความสีขาว ส่วนสีเขียวเข้มมักผ่าน ใส่ค่า hex ที่แน่นอนเพื่อตรวจสอบ

ข้อความขนาดใหญ่ใน WCAG หมายถึงอะไร?

ข้อความที่มีขนาดอย่างน้อย 18 point (24 px) แบบปกติ หรืออย่างน้อย 14 point (ประมาณ 18.66 px) แบบตัวหนา

คอนทราสต์ของ WCAG ใช้กับปุ่มและไอคอนด้วยไหม?

เกณฑ์ความสำเร็จ 1.4.11 ของ WCAG 2.1 กำหนดคอนทราสต์อย่างน้อย 3:1 สำหรับองค์ประกอบส่วนติดต่อผู้ใช้และกราฟิกที่สื่อความหมายเมื่อเทียบกับพื้นรอบข้าง