⌕ ค้นหา

ตรวจ Contrast Ratio ตาม WCAG

ตรวจ Contrast Ratio ตาม WCAG — ใช้สีทึบ WCAG 2.2 AA: ปกติ ≥4.5:1 ใหญ่ ≥3:1; ใหญ่หมายถึง ≥18 pt หรือหนา ≥14 pt ไม่ได้ตรวจ accessibility ทั้งหน้า

ประมวลผลบนอุปกรณ์มีคำอธิบายและตัวอย่างมีนโยบายความเป็นส่วนตัว

ตรวจ Contrast Ratio ตาม WCAG

กรอกข้อมูลหรือเลือกไฟล์ แล้วกดประมวลผล

Local Processing

Result

▤

ผลลัพธ์การคำนวณ

กรอกข้อมูลแล้วกดคำนวณ เพื่อดูผลลัพธ์และรายละเอียดที่นี่

วิธีใช้และการอ่านผล

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

กรอกข้อมูลอย่างไร

เลือกสีตัวอักษรและพื้นหลังที่ใช้งานจริง กดตรวจ แล้วอ่านทั้งค่า ratio และเกณฑ์ข้อความปกติ/ข้อความใหญ่ อย่าดูเฉพาะตัวอย่างสีบนหน้าจอ

อ่านผลและข้อจำกัด

ใช้กับคู่สีทึบเท่านั้น ข้อความใหญ่ตามเกณฑ์คืออย่างน้อย 18 pt หรือ 14 pt เมื่อหนา ไม่ใช่เพียงดูใหญ่ด้วยสายตา ไม่ตรวจรูปพื้นหลัง ความโปร่งใส สถานะ hover/focus คีย์บอร์ด หรือเกณฑ์ WCAG อื่น

หลักการทำงาน

Contrast ratio = (Lสว่าง+0.05)÷(Lมืด+0.05)
แปลง sRGB เป็นแสงเชิงเส้นก่อนหาความสว่างสัมพัทธ์
AA: ข้อความปกติ ≥4.5:1; ข้อความใหญ่ ≥3:1

ตัวอย่างการใช้งาน

ดำ #000000 บนขาว #FFFFFF ได้ 21:1 ผ่านทั้งสองเกณฑ์ ส่วน #777777 บนขาวได้ประมาณ 4.478:1 ไม่ผ่านข้อความปกติ แต่ผ่านข้อความใหญ่ ค่าใกล้ 4.5 ต้องใช้ค่าจริง ไม่ปัดขึ้นเพื่อให้ผ่าน

ข้อมูลและการตรวจสอบ

แหล่งอ้างอิงที่ตรวจสอบได้

แหล่งข้อมูลประกอบหลักการและสูตร ไม่ใช่การรับรองผลลัพธ์จากหน่วยงานอ้างอิง และไม่ใช้แทนคำแนะนำเฉพาะกรณี

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

คำถามที่พบบ่อยเกี่ยวกับ ตรวจ Contrast Ratio ตาม WCAG

สีตัวอักษร หมายถึงอะไร?

ใช้สีข้อความจริง ไม่ใช่สีที่เดาจากขอบตัวอักษรที่ถูกเกลี่ย ใส่ #777777 เพื่อทดสอบกรณีใกล้เกณฑ์ ไม่คำนวณการผสมสีโปร่งใสให้

สีพื้นหลัง หมายถึงอะไร?

ใช้สีพื้นหลังตรงตำแหน่งข้อความ พื้นขาวใช้ #FFFFFF ภาพและ gradient ต้องตรวจหลายบริเวณ

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

แนะนำอัตโนมัติจากหมวดหมู่และ Tags ที่เกี่ยวข้อง

สร้าง Schema Markup แบบ JSON-LD จากแบบฟอร์ม

สร้าง Schema Markup แบบ JSON-LD จากแบบฟอร์ม ใช้ชนิดข้อมูล / ชื่อเว็บไซต์/องค์กร/บทความ / URL หน้าที่อธิบายเป็นข้อมูลหลัก เพื่อคำนวณหรือจัดเตรียมผลลัพธ์ตามเงื่อนไขที่ระบุในหน้านี้

เปิดเครื่องมือ →

สร้างลิงก์ติดตาม UTM

สร้างลิงก์ติดตาม UTM ใช้URL ปลายทาง / utm_source แหล่งที่มา / utm_medium ช่องทางเป็นข้อมูลหลัก เพื่อคำนวณหรือจัดเตรียมผลลัพธ์ตามเงื่อนไขที่ระบุในหน้านี้

เปิดเครื่องมือ →

ตรวจความยาว Title และ Meta Description พร้อมภาพตัวอย่าง

ตรวจความยาว Title และ Meta Description พร้อมภาพตัวอย่าง ใช้URL ตัวอย่าง / Title / Meta descriptionเป็นข้อมูลหลัก เพื่อคำนวณหรือจัดเตรียมผลลัพธ์ตามเงื่อนไขที่ระบุในหน้านี้

เปิดเครื่องมือ →

คำนวณ Conversion Rate และจำนวน Conversion เป้าหมาย

คำนวณ Conversion Rate และจำนวน Conversion เป้าหมาย ใช้จำนวนการเข้าชมหรือคลิก / Conversion ที่เกิดขึ้น / Conversion Rate เป้าหมายเป็นข้อมูลหลัก เพื่อคำนวณหรือจัดเตรียมผลลัพธ์ตามเงื่อนไขที่ระบุในหน้านี้

เปิดเครื่องมือ →

บทความ คู่มือ และคำศัพท์ที่เกี่ยวข้อง

อ่านต่อเพื่อเข้าใจสูตร กรอกข้อมูล และใช้ผลลัพธ์ได้อย่างมั่นใจขึ้น

ดูทั้งหมด →
ภาพประกอบ ตรวจ Contrast Ratio ตาม WCAG: อ่านค่า ratio โดยไม่ปัดก่อนตัดสินผ่าน บทความ

ตรวจ Contrast Ratio ตาม WCAG: อ่านค่า ratio โดยไม่ปัดก่อนตัดสินผ่าน

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

อ่านต่อ →ภาพประกอบ วิธีใช้ตรวจ Contrast Ratio ตาม WCAG คู่มือ

วิธีใช้ตรวจ Contrast Ratio ตาม WCAG

ลองดำบนขาวจะได้ 21:1 จากนั้นลอง #777777 บนขาว จะไม่ผ่านข้อความปกติ AA แม้จะผ่านข้อความใหญ่ ตรวจสีจริงที่ทับพื้นหลัง หากมีภาพหรือความโปร่งใสต้องหาสีที่รวมแล้วก่อน

อ่านต่อ →