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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

โปรดดูบทแนะนำทำให้เว็บไซต์อ่านง่ายขึ้นเพื่อรับประสบการณ์การเรียนรู้ด้วยตนเอง

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