เครื่องมือนี้ใช้สูตร relative luminance ตามมาตรฐาน WCAG อย่างเป็นทางการ ค่าที่ได้จึงตรงกับ WebAIM checker และผลการตรวจสอบด้านการเข้าถึงส่วนใหญ่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ สีที่ป้อนไม่ถูกส่งไปไหน และใช้งานได้ไม่จำกัด
Color Contrast Checker ออนไลน์
ทำงานในเบราว์เซอร์ทั้งหมด ไม่ต้องอัปโหลด ไม่ต้องสมัครสมาชิก
Contrast ratio
ผ่านต้องการ 4.5:1
ผ่านต้องการ 3:1
ไม่ผ่านต้องการ 7:1
ผ่านต้องการ 4.5:1
ขนาดใหญ่ = 18pt (24px) หรือ 14pt (18.66px) ตัวหนา
Contrast ratio checker คืออะไร
Contrast ratio checker คือเครื่องมือที่วัดค่าความต่างของสีระหว่างสีข้อความกับสีพื้นหลัง แล้วบอกว่าผ่านมาตรฐาน WCAG ด้านการเข้าถึงหรือไม่ ค่าที่ได้จะอยู่ในช่วง 1:1 ถึง 21:1 พร้อมแสดงผลผ่าน/ไม่ผ่าน ทั้งระดับ AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่
วิธีใช้งาน
- 1ป้อนสีที่ต้องการ. พิมพ์ค่า hex, rgb() หรือชื่อสี CSS ของสีข้อความและพื้นหลัง หรือเลือกสีจาก color picker
- 2ดูค่า contrast ratio. ค่า contrast ratio อัปเดตแบบเรียลไทม์ พร้อมตัวอย่างข้อความบนพื้นหลังที่กำหนด
- 3ตรวจสอบผลการผ่าน/ไม่ผ่าน. แต่ละ badge แสดงผลว่าผ่านหรือไม่ผ่าน WCAG AA และ AAA ทั้งสำหรับข้อความปกติและข้อความขนาดใหญ่
เหมาะกับใคร
- นักออกแบบ ที่ต้องการทดสอบสีของแบรนด์ก่อนส่งไปยังทีมพัฒนา
- นักพัฒนา front-end ที่ตรวจสอบสีของปุ่ม ลิงก์ และ label ให้ผ่าน WCAG AA
- ผู้ตรวจสอบด้านการเข้าถึง ที่ต้องบันทึกปัญหา contrast พร้อม ratio ที่แม่นยำ
- ทีม content และอีเมล ที่ต้องให้ข้อความอ่านง่ายบนพื้นหลังสี
คำถามที่พบบ่อย
Contrast ratio checker ใช้ฟรีไหม
ฟรี 100% ไม่ต้องสมัครสมาชิกและไม่มีข้อจำกัด ทำงานในเบราว์เซอร์ทั้งหมด
ต้องการ contrast ratio เท่าไรถึงจะผ่าน WCAG AA
WCAG 2.1 ระดับ AA กำหนดให้ contrast ratio อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ระดับ AAA เพิ่มเป็น 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่
ข้อความขนาดใหญ่หมายถึงอะไร
ข้อความขนาดใหญ่คืออย่างน้อย 18pt (ประมาณ 24px) ที่น้ำหนักปกติ หรือ 14pt (ประมาณ 18.66px) เมื่อเป็นตัวหนา ข้อความขนาดใหญ่ยอมให้มีค่า contrast ratio ต่ำกว่าได้ เพราะตัวอักษรที่ใหญ่กว่าอ่านง่ายกว่า
คำนวณ contrast ratio อย่างไร
ใช้สูตร (L1 + 0.05) / (L2 + 0.05) โดย L1 และ L2 คือ relative luminance ของสีที่밝กว่าและสีที่เข้มกว่า ค่า luminance คำนวณจากช่อง red, green, blue ของ sRGB ตามมาตรฐาน WCAG 2.x
รองรับ hex, RGB และชื่อสีไหม
รองรับทั้งหมด ไม่ว่าจะเป็น hex 3, 4, 6 หรือ 8 หลัก ค่า rgb() และ rgba() หรือชื่อสี CSS เช่น 'teal' และยังเลือกสีจาก color picker ได้ด้วย
ทำไม ratio เดียวกันบางทีผ่านบางทีไม่ผ่าน
เกณฑ์ขึ้นอยู่กับขนาดข้อความและระดับที่กำหนด เช่น ratio 3.5:1 ไม่ผ่าน AA สำหรับข้อความปกติ แต่ผ่าน AA สำหรับข้อความขนาดใหญ่ ดังนั้นควรตรวจสอบให้ตรงกับขนาดและระดับที่ใช้จริง