เครื่องมือสี

ตรวจคอนทราสต์สี: WCAG AA และ AAA – ฟรี

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

ข้อความขนาดใหญ่จะอ่านแบบนี้

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

ข้อความขนาดเล็ก: คำบรรยาย 14px

ปุ่ม
อัตราส่วนคอนทราสต์13.08:1
  • ข้อความปกติ, AA: ผ่านข้อความเนื้อหา อย่างน้อย 4.5:1
  • ข้อความปกติ, AAA: ผ่านระดับสูง อย่างน้อย 7:1
  • ข้อความขนาดใหญ่, AA: ผ่าน18pt ขึ้นไป หรือ 14pt ตัวหนาขึ้นไป อย่างน้อย 3:1
  • ข้อความขนาดใหญ่, AAA: ผ่านระดับสูง อย่างน้อย 4.5:1
  • ไอคอนและตัวควบคุม, AA: ผ่านปุ่ม เส้นขอบ เส้นกราฟ: 3:1

ใช้สูตรคอนทราสต์ของ WCAG 2 อัตราส่วนจะไม่ถูกปัดขึ้น 4.49:1 จึงไม่นับเป็น 4.5:1 ตรวจสอบบนอุปกรณ์ของคุณ

ทำไมต้องใช้ ตรวจคอนทราสต์สี

ฟรี 100%
ใช้ได้บ่อยเท่าที่ต้องการ ไม่ต้องสมัครสมาชิก ไม่มีลายน้ำ ไม่ต้องติดตั้งอะไร
ออกแบบมาเพื่อความเป็นส่วนตัว
สิ่งที่คุณพิมพ์จะอยู่ในเบราว์เซอร์ของคุณและจะไม่ถูกส่งมาที่เรา
ใช้ได้กับทุกอุปกรณ์
ทำงานในเบราว์เซอร์บน Windows, Mac, Linux, Android และ iPhone ไม่ต้องลงแอป

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

  1. ใส่สีข้อความและสีพื้นหลัง หรือเลือกสี
  2. ดูอัตราส่วนคอนทราสต์และผลว่าผ่านหรือไม่ผ่าน
  3. ถ้าไม่ผ่าน ให้คลิกสีที่แนะนำซึ่งผ่านเกณฑ์

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

ต้องใช้อัตราส่วนคอนทราสต์เท่าไร
WCAG AA กำหนด 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่และส่วนของอินเทอร์เฟซ เช่น ปุ่มและไอคอน ส่วน AAA กำหนด 7:1 และ 4.5:1
ข้อความขนาดใหญ่คือแค่ไหน
อย่างน้อย 18 พอยต์ (24px) แบบปกติ หรือ 14 พอยต์ (ประมาณ 18.7px) แบบตัวหนา
รองรับสีข้อความแบบโปร่งใสไหม
รองรับ สีข้อความที่โปร่งแสงจะถูกผสมกับพื้นหลังก่อนวัดคอนทราสต์
ทำไม 4.49:1 ถึงไม่ผ่าน
WCAG ระบุว่าห้ามปัดอัตราส่วนขึ้น ค่าใดที่ต่ำกว่า 4.5:1 จึงไม่ผ่าน AA สำหรับข้อความปกติ
ตรวจคอนทราสต์สี ใช้ฟรีไหม
ใช่ ใช้งานได้ฟรี ไม่ต้องสมัครสมาชิกและไม่ต้องติดตั้งอะไร

ความช่วยเหลือและคู่มือการใช้งาน (ภาษาอังกฤษ)

เครื่องมือที่เกี่ยวข้อง