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