เครื่องมือตรวจสอบคอนทราสต์สี WCAG ฟรี: ทดสอบข้อความและสีพื้นหลังเพื่อให้สอดคล้องกับ AA และ AAA ในเบราว์เซอร์ของคุณ ป้อนค่าเลขฐานสิบหกหรือ RGB ดูอัตราส่วนคอนทราสต์และผ่าน/ไม่ผ่านทันที ไม่มีการเข้าสู่ระบบ ไม่มีการอัพโหลด
โดยจะคำนวณอัตราส่วนคอนทราสต์ WCAG 2.x ระหว่างสีพื้นหน้า (ข้อความ) และสีพื้นหลังโดยใช้ความสว่างสัมพันธ์ sRGB คุณจะได้รับอัตราส่วนตัวเลข (เช่น 4.52:1) บวกผ่าน/ไม่ผ่านสำหรับเกณฑ์ WCAG AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่ เป็นตัวช่วยด้านการออกแบบ QA ไม่ใช่การตรวจสอบการเข้าถึงอัตโนมัติเต็มรูปแบบสำหรับทั้งไซต์ของคุณ
เลขฐานสิบหก (#RGB, #RRGGBB, #RRGGBBAA), rgb() และ rgba() วางค่าจานสีของแบรนด์จากโทเค็น Figma, ตัวแปร CSS หรือเอกสารการออกแบบ เลขฐานสิบหกแบบสั้น เช่น #fff จะขยายเป็น #ffffff ก่อนที่จะคำนวณความสว่าง
AA คือหลักเกณฑ์ทางกฎหมายทั่วไปและผลิตภัณฑ์: 4.5:1 สำหรับข้อความปกติ, 3:1 สำหรับข้อความขนาดใหญ่ AAA เข้มงวดกว่า: ปกติ 7:1, ใหญ่ 4.5:1 ไซต์การตลาดหลายแห่งกำหนดเป้าหมาย AA สำหรับข้อความเนื้อหา และ AAA สำหรับพาดหัวข่าว Hero หรือ UI ที่มีความเสี่ยงสูงเท่านั้น เครื่องมือนี้จะแสดงทั้งสองอย่างเพื่อให้คุณสามารถเลือกเป้าหมายที่สามารถป้องกันได้ด้วยการออกแบบ
ข้อความขนาดใหญ่มีน้ำหนักปกติอย่างน้อย 18 พอยต์ (24 CSS พิกเซล) หรือตัวหนาอย่างน้อย 14 พอยต์ (ประมาณ 18.66 CSS พิกเซล) ปุ่ม คำบรรยาย และการพิมพ์แบบละเอียดมักจะล้มเหลว AA แม้ว่าส่วนหัวจะผ่านก็ตาม โปรดตรวจสอบทุกขนาดที่คุณจัดส่ง ไม่ใช่แค่ตัวอย่าง H1
ไม่ การแยกวิเคราะห์และการคำนวณความสว่างจะทำงานทั้งหมดในเบราว์เซอร์ของคุณ การทดลองจานสีที่ยังไม่เผยแพร่และสี NDA ของไคลเอนต์จะยังคงอยู่ในอุปกรณ์ของคุณ ล้างฟิลด์บนเครื่องที่ใช้ร่วมกันเมื่อเสร็จสิ้น
ค่า rgba และ #RRGGBBAA จะถูกแยกวิเคราะห์ แต่คอนทราสต์จะถูกประเมินบนช่อง sRGB แบบทึบ ตัวตรวจสอบจะไม่ใช้ข้อความอัลฟ่าคอมโพสิตบนพื้นหลังภาพถ่าย สำหรับข้อความบนรูปภาพ ให้สุ่มตัวอย่างสีที่ใช้งานจริงด้านหลังสำเนาหรือใช้การซ้อนทับทึบก่อน จากนั้นจึงตรวจสอบอีกครั้ง
ใช่. ฟรีโดยไม่ต้องเข้าสู่ระบบสำหรับอัตราส่วนคอร์และเส้นทางผ่าน/ไม่ผ่าน