เครื่องตรวจสอบเมทริกซ์ความเปรียบต่างสี

ทำไมต้องตรวจสอบทุกชุดสีพร้อมกัน ไม่ใช่ทีละคู่?

หลักเกณฑ์การเข้าถึง WCAG กำหนดให้ต้องมีอัตราส่วนความเปรียบต่างขั้นต่ำระหว่างสีข้อความและสีพื้นหลัง มิฉะนั้นผู้ใช้ที่มีสายตาเลือนรางหรือตาบอดสีอาจอ่านข้อความไม่ออก ในทางปฏิบัติ เว็บไซต์ส่วนใหญ่มักผสมผสานสีแบรนด์ สีพื้นหลัง และสีสถานะหลายสีเข้าด้วยกัน —หัวข้อสีหลักบนการ์ดสีเทาอ่อน สีเตือนบนพื้นขาว ข้อความสีเข้มบนพื้นหลังมีสี— การตรวจสอบแต่ละคู่ด้วยมือทีละคู่จึงเกิดข้อผิดพลาดหรือตกหล่นได้ง่าย เครื่องมือนี้ให้คุณวางสีทั้งหมดที่ใช้จริงลงไป แล้วระบบจะคำนวณอัตราส่วนความเปรียบต่างของทุกคู่ที่เป็นไปได้ทันที แสดงผลเป็นเมทริกซ์เดียว —ไม่ต้องตรวจสอบทีละคู่อีกต่อไป

อัตราส่วนคำนวณอย่างไร — ตัวอย่างที่เป็นรูปธรรม

WCAG 2.1 กำหนดอัตราส่วนความเปรียบต่างเป็น (L1 + 0.05) / (L2 + 0.05) โดย L1 และ L2 คือ "ความสว่างสัมพัทธ์" ของสีทั้งสอง ค่ายิ่งสูงยิ่งใกล้เคียงสีขาว ตัวอย่างเช่น สีดำล้วน #000000 กับสีขาวล้วน #FFFFFF ได้คะแนนเต็ม 21:1 แต่สีเทาอ่อน #999999 กับสีขาวได้เพียง 2.85:1 —ต่ำกว่าเกณฑ์ขั้นต่ำ 4.5:1 ที่กำหนดสำหรับข้อความปกติมาก ข้อความปกติ (ต่ำกว่า 18px หรือตัวหนาต่ำกว่า 14px) ต้องมี AA ≥ 4.5:1 หรือ AAA ≥ 7:1 สำหรับมาตรฐานที่เข้มงวดกว่า ส่วนข้อความขนาดใหญ่ (ตัวหนา 18px ขึ้นไป หรือ 24px ขึ้นไป) มีเกณฑ์ที่ผ่อนปรนกว่าคือ AA ≥ 3:1

วิธีอ่านเมทริกซ์ผลลัพธ์

แต่ละเซลล์ในเมทริกซ์แสดงอัตราส่วนความเปรียบต่างระหว่างสีของแถวนั้นกับสีของคอลัมน์นั้น โดยใช้สีบ่งชี้ —เขียว (ผ่าน AAA) เหลือง (ผ่านเฉพาะ AA) แดง (ไม่ผ่าน)— ทำให้มองเห็นคู่สีที่มีปัญหาได้ในทันทีโดยไม่ต้องคำนวณเองทีละคู่

ค่าความเปรียบต่างคำนวณจากค่า RGB ของสีเท่านั้น ไม่ได้คำนึงถึงความหนาของฟอนต์ การลบรอยหยัก (anti-aliasing) หรือการซ้อนทับแบบโปร่งแสงในการแสดงผลจริง ควรตรวจสอบซ้ำบนอุปกรณ์จริงก่อนเผยแพร่ใช้งานจริงเสมอ