เกิดอะไรขึ้น
เรามี heading ใน hero ที่เติมสีแบบ gradient จากม่วงไปลาเวนเดอร์อ่อน บนพื้นหลังสีเข้ม plugin เช็ก contrast ที่ใช้ให้ผ่าน เราเลยไปต่อ
ต่อมาตอนรีวิวบนจอแล็ปท็อปจริงในห้องที่สว่าง ปลายฝั่งขวาของ heading อ่านยากชัดเจน เครื่องมือบอกว่าโอเค แต่คนอ่านแล้วไม่สบายตา
ทำไมถึงเป็นแบบนั้น
อัตราส่วน contrast ของ WCAG นิยามระหว่างสองสี คือสีตัวอักษรกับสีพื้นหลัง เครื่องมือส่วนใหญ่จึงรับสีตัวอักษรแค่สีเดียว พอเป็น gradient ก็ไม่มีสีเดียวให้ใช้ เครื่องมือเลยสุ่มจุดเดียวหรือเอาค่าเฉลี่ย ซึ่งบอกอะไรเกี่ยวกับส่วนที่อ่านยากที่สุดแทบไม่ได้
gradient อ่านง่ายได้แค่ระดับจุดที่แย่ที่สุด ถ้าปลายสีอ่อนอยู่บนพื้นหลังเข้มที่ contrast พอ ก็ไม่มีปัญหา แต่ถ้ามี stop ที่เข้าใกล้สีพื้นหลัง ก็อาจตกอย่างหนักทั้งที่สีที่เครื่องมือสุ่มได้ผ่าน และข้อความเล็กยิ่งเข้มงวดกว่า เพราะข้อความปกติต้องการอัตราส่วนสูงกว่าข้อความขนาดใหญ่
ตอนนี้เราทำอย่างไร
ตอนนี้เราเช็กแต่ละปลายของ gradient เป็นสีเดียวเทียบกับพื้นหลังทีละจุด และเช็กจุดกลางด้วยถ้า hue เปลี่ยนมาก ถ้าจุดไหนต่ำกว่าอัตราส่วนที่ต้องใช้สำหรับขนาดตัวอักษรนั้น เราปรับ stop นั้น ไม่เชื่อผลผ่านครั้งเดียว
ส่วนข้อความเล็กหรือข้อความสำคัญ เช่น body, label และปุ่ม เราใช้สีเดียวไปเลย gradient เก็บไว้ใช้กับ display heading ขนาดใหญ่ ซึ่งมีพื้นที่ให้พลาดมากกว่าและเกณฑ์อัตราส่วนต่ำกว่า
เช็กลิสต์สั้น ๆ
- 1เลือก stop ที่อ่อนที่สุดและเข้มที่สุดของ gradient
- 2เช็กแต่ละจุดเป็นสีเดียวเทียบกับพื้นหลังจริง
- 3เช็กจุดกลางด้วย ถ้า gradient เปลี่ยน hue มาก
- 4ใช้สีเดียวกับข้อความเล็กหรือข้อความที่สำคัญ
จำไว้สั้น ๆ
gradient จะผ่าน contrast ก็ต่อเมื่อจุดที่แย่ที่สุดผ่าน ดังนั้นให้เช็กที่ปลายทั้งสองข้าง ไม่ใช่ค่าเฉลี่ย