ตรวจสอบคอนทราสต์ด้วยเครื่องมือฟรี

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

เครื่องมือตรวจสอบความเปรียบต่างของ WebAIM เป็นเครื่องมือมาตรฐาน เพียงวางค่าสีพื้นหน้าและสีพื้นหลัง แล้วเครื่องมือจะแสดงอัตราส่วน พร้อมเครื่องหมายผ่านระดับ AA และ AAA

เครื่องมือที่ดีจะแสดงผลแต่ละรายการว่า ผ่าน หรือไม่ผ่าน โดยแยกข้อความปกติและข้อความขนาดใหญ่ เพื่อให้คุณทราบอย่างแน่ชัดว่าผ่านเกณฑ์ระดับใด

ในเบราว์เซอร์โดยตรง ตัวเลือกสีของ DevTools จะแสดงอัตราส่วนความเปรียบต่างแบบเรียลไทม์ และแสดงเส้นบอกจุดตัดระดับ AA ขณะที่คุณปรับสี

DevTools อ่านสีและสีพื้นหลังที่ คำนวณแล้ว ตามที่แสดงผลจริง ดังนั้นคุณจึงทดสอบพิกเซลจริง ไม่ใช่ค่าที่คุณคาดหวังไว้

เรียกใช้ axe DevTools หรือ Lighthouse เพื่อสแกนทั้งหน้าได้ในครั้งเดียว เครื่องมือเหล่านี้จะแจ้งองค์ประกอบที่มีความเปรียบต่างต่ำทั้งหมด แทนที่จะตรวจทีละคู่

เครื่องมือตรวจสอบจำนวนมากมี ตัวดูดสี ให้ใช้ คุณจึงสุ่มเก็บสีจากเว็บไซต์ที่กำลังแสดงผลหรือภาพจำลองได้โดยตรง โดยไม่ต้องค้นหารหัสเลขฐานสิบหก

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

เครื่องมือตรวจสอบคู่สีทึบเพียงคู่เดียว หากเป็น การไล่ระดับสีหรือรูปภาพ ให้ทดสอบจุดที่แย่ที่สุดด้วยตนเอง เพราะความเปรียบต่างของข้อความอาจไม่ผ่านเพียงบางส่วน

เครื่องมือตรวจสอบส่วนใหญ่ให้คุณ ขยับปรับสีจนกว่าจะผ่าน และจะได้รหัสเลขฐานสิบหกที่เป็นไปตามข้อกำหนด ซึ่งคุณสามารถคัดลอกกลับไปใส่ใน CSS ได้ทันที

ป้อน ค่าฐานสิบหกที่แน่นอนจากไฟล์สไตล์ชีตลงในเครื่องมือตรวจสอบ เพื่อยืนยันว่าคู่นี้ผ่านอัตราส่วน 4.5:1 ก่อนนำไปใช้งานจริง

คุณได้รู้จัก เครื่องมือใช้ฟรีอย่าง WebAIM, DevTools และ axe ซึ่งเปลี่ยนความเปรียบต่างให้เป็นผลผ่านหรือไม่ผ่านที่ชัดเจน วัดสีจริงและแก้ไขปัญหาก่อนเปิดใช้งาน ✅