ตัวตรวจสอบความคมชัดของสี
คำนวณอัตราส่วนความคมชัดระหว่างสีสองสีและตรวจสอบว่าผ่านระดับ WCAG 2.1 AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่หรือไม่
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
วิธีการทำงาน
แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) 2.1 กำหนดอัตราส่วนความคมชัดขั้นต่ำระหว่างข้อความและพื้นหลัง เพื่อให้เนื้อหายังคงอ่านได้สำหรับคนที่มีความบกพร่องทางสายตา เครื่องมือนี้คำนวณอัตราส่วนในสามขั้นตอน: ขั้นแรก แต่ละสีจะถูกแปลงเป็นความส่องสว่างสัมพัทธ์โดยการใช้การแก้ไขแกมมากับช่อง sRGB (ค่าที่ต่ำกว่า 0.03928 จะถูกหารด้วย 12.92 ค่าที่สูงกว่าจะถูกยกกำลัง ((c+0.055)/1.055)^2.4) และรวมผลลัพธ์ด้วย L = 0.2126*R + 0.7152*G + 0.0722*B จากนั้นความส่องสว่างของสีที่สว่างที่สุดและสีที่เข้มที่สุดจะถูกนำมาเป็น L1 และ L2 และอัตราส่วนความคมชัดคือ (L1 + 0.05) / (L2 + 0.05) — ค่าชดเชย 0.05 จำลองพื้นผิวสะท้อนแสงสีดำสนิท ในที่สุดอัตราส่วนจะถูกเปรียบเทียบกับเกณฑ์ WCAG: AA ต้องการ ≥ 4.5:1 สำหรับข้อความปกติ ≥ 3:1 สำหรับข้อความขนาดใหญ่ (18pt+ หรือ 14pt+ ตัวหนา) AAA ต้องการ ≥ 7:1 สำหรับข้อความปกติ และ ≥ 4.5:1 สำหรับข้อความขนาดใหญ่ เครื่องมือแสดงตัวอย่างสดและตราผ่าน/ไม่ผ่านสำหรับแต่ละระดับ WCAG เพื่อให้คุณสามารถปรับพาเลตและเห็นผลลัพธ์ได้ทันที
กรณีการใช้งาน
- เลือกสีของแบรนด์ที่สอดคล้องกับการเข้าถึงเมื่อสร้างระบบการออกแบบ
- ตรวจสอบว่าส่วนประกอบ UI ที่มีอยู่ผ่าน WCAG AA หรือ AAA
- พิสูจน์ให้ลูกค้าเห็นว่าการผสมสีเฉพาะไม่เหมาะสำหรับข้อความ
- สอนนักออกแบบและนักพัฒนาเกี่ยวกับการเข้าถึง
- เตรียมเอกสารสำหรับข้อกำหนดการเข้าถึงทางกฎหมาย