ตัวตรวจคอนทราสต์สี WCAG 2.2

WCAG 2.2 Color Contrast Checker วัดอัตราส่วนคอนทราสต์ระหว่างสีพื้นหน้าและสีพื้นหลัง แล้วรายงานผลผ่านหรือไม่ผ่านสำหรับข้อความระดับ AA และ AAA (เกณฑ์ 1.4.3 และ 1.4.6) และสำหรับคอมโพเนนต์ UI และวัตถุกราฟิก (เกณฑ์ 1.4.11) รองรับ HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() และชื่อสี CSS แสดงตัวอย่างคู่สีเป็นข้อความและตัวควบคุม และแนะนำสีที่เข้าถึงได้ซึ่งใกล้ที่สุดเมื่อคู่สีไม่ผ่าน

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

แต่ละสีจะถูกแปลงเป็น sRGB และคำนวณความสว่างสัมพัทธ์ด้วยสูตรของ WCAG (เกณฑ์การแปลงเชิงเส้น 0.04045) อัตราส่วนคือ (L1 + 0.05) / (L2 + 0.05) ค่าที่แสดงปัดเป็นทศนิยมสองตำแหน่ง แต่การตัดสินผ่าน/ไม่ผ่านทุกครั้งใช้ค่าที่ยังไม่ปัด ดังนั้น 4.499:1 จะไม่ผ่าน AA แม้จะแสดงเป็น 4.50:1 สีพื้นหน้าโปร่งแสงจะผสมทับสีพื้นหลัง และสีพื้นหลังโปร่งแสงจะผสมทับสีรองพื้น (ค่าเริ่มต้นคือสีขาว) ทีละช่องสี sRGB แบบเดียวกับที่เบราว์เซอร์วาด สีที่อยู่นอก sRGB เช่นค่า Display P3 หรือ OKLCH ที่สดมาก จะถูกตัดเข้า sRGB ก่อนวัด และเครื่องมือจะแจ้งให้ทราบ

เครื่องมือนี้วัดสีทีละหนึ่งคู่ ไม่ประเมินการแสดงผลฟอนต์ ข้อความบนภาพหรือไล่สี หรือเกณฑ์ WCAG อื่น ๆ ใช้ Web Accessibility Checker เพื่อตรวจสอบทั้งหน้า ใน WCAG 2.2 ข้อความขนาดใหญ่คืออย่างน้อย 18 พอยต์ หรือ 14 พอยต์ตัวหนา (ประมาณ 24px หรือ 18.66px ตัวหนา) สีจะถูกประมวลผลในเบราว์เซอร์ และคู่สีล่าสุดจะบันทึกไว้เฉพาะในพื้นที่จัดเก็บภายในของเบราว์เซอร์นี้