เคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ: ค้นหาและแก้ไขข้อความคอนทราสต์ต่ำ

Sofia Emelianova
Sofia Emelianova

ข้อความคอนทราสต์ต่ำเป็นปัญหาการช่วยเหลือพิเศษอันดับต้นๆ บนเว็บ ในเดือนกุมภาพันธ์ 2022 หน้าแรก 1 ล้านหน้าแรกมีปัญหานี้ 83.9% ดูข้อมูลเพิ่มเติมได้ที่รายงาน WebAIM Million 2022

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

ดูวิดีโอเพื่อดูวิธีดำเนินการต่อไปนี้

  • ดูอัตราส่วนคอนทราสต์ในเคล็ดลับเครื่องมือของโหมดเครื่องมือตรวจสอบ และค่าอัตราส่วนแนะนำในเครื่องมือเลือกสี

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

  • ในเครื่องมือเลือกสี ให้เลือกสีที่แนะนำหรือเลือกสีใต้เส้นอัตราส่วนคอนทราสต์เพื่อให้เป็นไปตามหลักเกณฑ์ของ WebAIM

    เส้นอัตราส่วนคอนทราสต์ที่แนะนำจะแสดงในตัวอย่างเฉดสีของเครื่องมือเลือกสี

  • ดูปัญหาคอนทราสต์ทั้งหมดในแผงภาพรวม CSS และปัญหา (เวอร์ชันตัวอย่าง)

    ปัญหาเกี่ยวกับคอนทราสต์ที่แสดงในแผงภาพรวม CSS และแท็บปัญหา

  • จำลองภาวะบกพร่องทางการมองเห็นเพื่อทำความเข้าใจว่าหน้าเว็บของคุณมีลักษณะอย่างไรสำหรับผู้ใช้ทุกคน

    เลือกภาพเบลอในแท็บการแสดงผลและจําลองในวิวพอร์ต

ดูบทแนะนำทําให้เว็บไซต์อ่านง่ายขึ้นเพื่อเรียนรู้แบบลงมือปฏิบัติ

ดูข้อมูลเพิ่มเติมได้ที่