เหตุใดจึงมีอัตราส่วนคอนทราสต์

เมื่ออ่านข้อความ ดวงตาจะเปรียบเทียบว่าตัวอักษรสว่างหรือมืดเพียงใดเมื่อเทียบกับพื้นหลัง ความแตกต่างนั้นคือ คอนทราสต์ 👀

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

อัตราส่วนมีค่าตั้งแต่ 1:1 ถึง 21:1 สีดำบนพื้นขาวมีค่าสูงสุดคือ 21:1 ส่วนสีเดียวกันบนสีเดียวกันมีค่า 1:1 และมองไม่เห็นโดยสิ้นเชิง

การคำนวณอาศัย ความสว่างที่รับรู้ของสี สีสองสีที่มีเฉดแตกต่างกันมากก็ยังแยกจากกันได้ยาก หากมีความสว่างใกล้เคียงกันเกินไป

มีกฎด้านคอนทราสต์เพราะการมองเห็นแตกต่างกัน ผู้มี สายตาเลือนราง ผู้สูงอายุ และผู้อ่านที่เหนื่อยล้าล้วนต้องการความแตกต่างมากกว่านักออกแบบอายุน้อยที่ดูหน้าจอสว่าง

แสงสะท้อนจากดวงอาทิตย์ จอภาพราคาถูก และโทรศัพท์ที่ลดความสว่าง ล้วนลดทอน คอนทราสต์ อัตราส่วนที่ยังอ่านได้ในสภาวะเหล่านี้จะช่วยให้ข้อความอ่านง่ายทุกที่

WCAG กำหนด 4.5:1 สำหรับข้อความปกติเป็นค่าขั้นต่ำที่มีงานวิจัยรองรับ ค่านี้คำนึงถึงสายตาเลือนรางระดับปานกลาง โดยไม่บังคับให้ใช้สีดำสนิทกับสีขาวล้วน

ข้อความขนาดใหญ่อ่านง่ายกว่า ดังนั้นเกณฑ์จึงลดลงเหลือ 3:1 ตัวอักษรที่ใหญ่และหนารองรับความแตกต่างด้านความสว่างที่น้อยกว่าข้อความเนื้อหาขนาดเล็ก

อัตราส่วนเกี่ยวข้องกับสีสองสีที่อยู่ร่วมกันเสมอ สีเทาไม่สามารถอ่านง่ายหรืออ่านยากได้ด้วยตัวมันเอง แต่ต้องพิจารณาเทียบกับพื้นผิวที่วางอยู่

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

สีสองสีนี้มีอัตราส่วนประมาณ 4.6:1 ซึ่งเพิ่งผ่านเกณฑ์ข้อความปกติ ทำให้อ่านได้อย่างสบายตา

มาทดสอบกันว่าเหตุใดจึงต้องมีอัตราส่วนนี้

คุณได้เรียนรู้ว่า อัตราส่วนคอนทราสต์เปลี่ยนความสามารถในการอ่านให้เป็นตัวเลขเดียวที่ตรงไปตรงมา โดยอาศัยความสว่างที่รับรู้ เพื่อให้ข้อความเหมาะกับดวงตาทุกคู่ ต่อไป: ทำให้ผ่านเกณฑ์ AA ✅