🌗 เครื่องตรวจสอบอัตราส่วนความแตกต่างของสี (WCAG AA / AAA)

เกี่ยวกับ

สูตรอัตราส่วนความแตกต่างของสีตาม WCAG (Web Content Accessibility Guidelines) คำนวณความสว่างสัมพัทธ์ของแต่ละสีโดยใช้มาตรฐาน IEC 61966-2-1 sRGB จากนั้นคำนวณว่าสีหนึ่งสว่างกว่าอีกสีเท่าไร อัตราส่วน 4.5:1 หรือสูงกว่าจะตรงตามมาตรฐาน AA สำหรับข้อความทั่วไป (16 px) ในขณะที่ 7:1 หรือสูงกว่าจะตรงตามมาตรฐาน AAA ข้อความขนาดใหญ่ (24 px หรือ 18.67 px หนา) มีเกณฑ์ที่ผ่อนคลาย: 3:1 สำหรับ AA และ 4.5:1 สำหรับ AAA เครื่องมือนี้ทำงานอัลกอริทึมเต็มรูปแบบของ WCAG 2.x ทั้งหมดในเบราว์เซอร์ของคุณ — ไม่มีเซิร์ฟเวอร์ ไม่มีบัญชี ผลลัพธ์ถูกเก็บไว้ในท้องถิ่น ดังนั้นคู่สีสุดท้ายของคุณจะรอคุณเมื่อคุณกลับมา

วิธีใช้งาน

1. เลือกสีข้อความของคุณโดยใช้ตัวเลือกสี หรือพิมพ์รหัสสีเฮกซ์ (เช่น #1a2b3c) ในช่องสีข้อความ
2. เลือกสีพื้นหลังในช่องสีพื้นหลังในวิธีเดียวกัน ใช้ปุ่มสลับเพื่อสลับสีทั้งสองอย่างรวดเร็ว
3. อ่านอัตราส่วนความแตกต่างที่แสดงในตัวอักษรขนาดใหญ่ และตรวจสอบเครื่องหมายผ่าน/ไม่ผ่าน 4 ตัว: AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่
4. ดูตัวอย่างว่าข้อความของคุณจะปรากฏอย่างไรบนพื้นหลังที่เลือกในส่วน Live Preview ก่อนที่คุณจะสรุปการออกแบบของคุณ

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

เครื่องตรวจสอบความแตกต่างตาม WCAG นี้ใช้ฟรีได้ไหม?

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

มันทำงานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ตหรือทำงานแบบออฟไลน์ได้ไหม?

ใช่ ทุกการคำนวณทำงานทั้งหมดในเบราว์เซอร์ของคุณโดยใช้ JavaScript หลังจากหน้าเว็บโหลดแล้ว คุณสามารถตัดการเชื่อมต่ออินเทอร์เน็ตได้และเครื่องมือยังคงทำงานได้ ไม่มีข้อมูลใดถูกส่งไปยังเซิร์ฟเวอร์ใดๆ

ข้อมูลสีของฉันเป็นส่วนตัวไหม? มีการอัปโหลดข้อมูลใดๆ หรือไม่?

สีของคุณจะไม่ถูกส่งออกจากเบราว์เซอร์ของคุณ ไม่มีการวิเคราะห์สีที่คุณป้อน ไม่มีการอัปโหลด ไม่มีการแบ่งปันกับบุคคลที่สาม คู่สีสุดท้ายของคุณถูกเก็บไว้เพียงใน localStorage ของเบราว์เซอร์ของคุณเท่านั้น

ความแตกต่างระหว่าง WCAG AA และ AAA คืออะไร?

AA เป็นมาตรฐานขั้นต่ำที่จำเป็นตามข้อบังคับส่วนใหญ่ (เช่น ADA, EN 301 549) ข้อความปกติต้องมีอัตราส่วน 4.5:1; ข้อความขนาดใหญ่ (24 px หรือ 18.67 px ที่หนา) ต้องมี 3:1 AAA เป็นการเพิ่มความเข้าถึง: 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ ควรตั้งเป้าหมายให้ได้ AA อย่างน้อยในทุกการออกแบบที่ใช้งานจริง

ฉันสามารถตรวจสอบสีโดยใช้รหัสเฮกซ์แบบย่อ 3 ตัวอักษร เช่น #fff ได้ไหม?

ใช่ เครื่องมือยอมรับทั้งรหัสเฮกซ์แบบย่อ 3 ตัวอักษร (#rgb) และรหัสเต็ม 6 ตัวอักษร (#rrggbb) เพียงแค่พิมพ์หรือวางสีของคุณและเครื่องมือจะขยายและตรวจสอบความถูกต้องอัตโนมัติ

เครื่องมือนี้จะอัปโหลดข้อมูลของฉันหรือไม่?

ไม่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ดังนั้นข้อมูลของคุณจึงไม่เคยออกจากอุปกรณ์ของคุณ — และหลังจากโหลดหน้าแล้วยังใช้งานแบบออฟไลน์ได้ด้วย