ตัวตรวจสอบความคมชัดของสี
คำนวณอัตราส่วนความคมชัดระหว่างสีสองสีและตรวจสอบว่าผ่านระดับ WCAG 2.1 AA และ AAA สำหรับข้อความปกติและข้อความขนาดใหญ่หรือไม่
21.00:1
AA
ข้อความปกติ
AA
ข้อความขนาดใหญ่
AAA
ข้อความปกติ
AAA
ข้อความขนาดใหญ่
ตัวอย่าง
เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน
เป็นมนุษย์สุดประเสริฐเลิศคุณค่า กว่าบรรดาฝูงสัตว์เดรัจฉาน
วิธีการทำงาน
ตัวตรวจสอบความเปรียบต่างของสีวัดอัตราส่วนความสว่างของสีข้อความและสีพื้นหลังตามแนวทาง WCAG 2.1 ซึ่งเป็นมาตรฐานการเข้าถึงที่ใช้กันทั่วโลก
ป้อนสีข้อความและพื้นหลังในรูปแบบ HEX, RGB หรือ HSL เครื่องมือจะคำนวณความสว่างสัมพัทธ์และอัตราส่วนความเปรียบต่างทันที
ผลลัพธ์ทดสอบตามระดับ WCAG: AA ต้องการ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ AAA ต้องการ 7:1 และ 4.5:1
ความเปรียบต่างต่ำทำให้ผู้ใช้ที่มีความบกพร่องทางการมองเห็นอ่านเนื้อหาได้ยาก
กรณีการใช้งาน
- เลือกสีของแบรนด์ที่สอดคล้องกับการเข้าถึงเมื่อสร้างระบบการออกแบบ
- ตรวจสอบว่าส่วนประกอบ UI ที่มีอยู่ผ่าน WCAG AA หรือ AAA
- พิสูจน์ให้ลูกค้าเห็นว่าการผสมสีเฉพาะไม่เหมาะสำหรับข้อความ
- สอนนักออกแบบและนักพัฒนาเกี่ยวกับการเข้าถึง
- เตรียมเอกสารสำหรับข้อกำหนดการเข้าถึงทางกฎหมาย
คำถามที่พบบ่อย
- WCAG คืออะไร?
- แนวทางการเข้าถึงเนื้อหาเว็บ มาตรฐานที่เผยแพร่โดย W3C ซึ่งกำลังกลายเป็นข้อกำหนดทางกฎหมายในหลายประเทศ
- อัตราส่วนความเปรียบต่างขั้นต่ำควรเป็นเท่าใด?
- ส่วนใหญ่ควรถึง AA อย่างน้อย (4.5:1 สำหรับข้อความปกติ)
- ข้อความขนาดใหญ่มีข้อกำหนดต่างกันหรือไม่?
- ใช่ ข้อความ 18pt ขึ้นไปหรือ 14pt ตัวหนาต้องการเพียง 3:1 (AA)
- ตัวตรวจสอบคำนึงถึงตาบอดสีหรือไม่?
- คะแนนความสว่างอิงการรับรู้ทางคณิตศาสตร์ครอบคลุมตาบอดสีที่พบบ่อย
- วาง HEX โค้ดตรงๆ ได้หรือไม่?
- ได้ วาง #RRGGBB หรือ RRGGBB เครื่องมือรับได้ทั้งสองรูปแบบ