กฎนี้ตรวจอะไร
ตรวจให้แน่ใจว่าคอนทราสต์ระหว่างสีตัวอักษรกับสีพื้นหลังผ่านเกณฑ์อัตราส่วนคอนทราสต์ขั้นต่ำของ WCAG 2 AA.
ทำไมจึงสำคัญ
WCAG 1.4.3 กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ราคา ป้าย และแบนเนอร์ที่สีจางอ่านยากสำหรับผู้มีสายตาเลือนราง และสำหรับทุกคนเมื่ออยู่ในที่แสงจ้า
วิธีแก้ไข
บนเว็บไซต์ทุกประเภท
- ค้นหาข้อความที่คอนทราสต์ต่ำ แล้วจดสีข้อความและสีพื้นหลังไว้ เครื่องมือตรวจคอนทราสต์หรือเครื่องมือนักพัฒนาของเบราว์เซอร์แสดงได้ทั้งสองค่า
- ปรับสีข้อความหรือสีพื้นหลังใน CSS ของธีมจนอัตราส่วนเป็นอย่างน้อย 4.5:1 (3:1 สำหรับข้อความขนาด 24px ขึ้นไป หรือตัวหนาขนาด 18.66px)
- ให้ความสำคัญเป็นพิเศษกับป้ายลดราคา ข้อความ placeholder ลิงก์ในส่วนท้าย และปุ่มที่วางบนรูปภาพ
บน Shopify
- ค้นหาข้อความที่คอนทราสต์ต่ำ แล้วจดสีข้อความและสีพื้นหลังไว้ เครื่องมือตรวจคอนทราสต์หรือเครื่องมือนักพัฒนาของเบราว์เซอร์แสดงได้ทั้งสองค่า
- ใน Online Store > Themes > Customize > Theme settings > Colors ให้ปรับสีข้อความให้เข้มขึ้น หรือปรับพื้นหลังให้อ่อนลงสำหรับชุดสี (color scheme) ที่ได้รับผลกระทบ จนอัตราส่วนเป็นอย่างน้อย 4.5:1
- ให้ความสำคัญเป็นพิเศษกับป้ายลดราคา ข้อความ placeholder ลิงก์ในส่วนท้าย และปุ่มที่วางบนรูปภาพ
วิธีตรวจสอบการแก้ไข
- สแกนอีกครั้งและยืนยันว่า color-contrast ไม่ปรากฏอีก
- สุ่มตรวจด้วยเครื่องมือตรวจคอนทราสต์โดยใช้ค่าสีที่ตรงกัน
FixReports ตรวจพบอย่างไร
การสแกนของเราเรียกใช้กฎ color-contrast ของ axe-core ในเบราว์เซอร์ Chrome จริงบนทุกหน้าที่ทดสอบ และรายงานองค์ประกอบที่ไม่ผ่านแต่ละรายการพร้อมหน้าที่พบ markup และภาพหน้าจอในกรณีที่มี
การทดสอบอัตโนมัติยืนยันได้ว่าปัญหานี้มีอยู่จริง แต่บอกไม่ได้ว่าส่วนอื่นของหน้าเข้าถึงได้หรือไม่ อุปสรรคบางอย่างจะปรากฏก็ต่อเมื่อมีคนตรวจหน้านั้นเท่านั้น