ทำให้เว็บไซต์อ่านง่ายขึ้น

โซเฟีย เอมิเลียโนวา
Sofia Emelianova
GitHub

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

ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อทำสิ่งต่อไปนี้

สำรวจข้อความคอนทราสต์ต่ำ

วิธีค้นหาข้อความคอนทราสต์ต่ำ

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าเว็บ ในบทแนะนำนี้ คุณใช้หน้าการสาธิตนี้ได้

  2. ดูรายการปัญหาคอนทราสต์ทั้งหมดโดยใช้แผง 1 ใน 3 รายการต่อไปนี้

ปัญหาคอนทราสต์ในแผงภาพรวม CSS

วิธีดูภาพรวม

  1. เปิดภาพรวมของ CSS
  2. บันทึกภาพรวม
  3. เปิดส่วนสี จากนั้นเลื่อนไปที่ปัญหาคอนทราสต์ แล้วคลิกปัญหา หากมี

  4. ในตารางปัญหาคอนทราสต์ ให้วางเมาส์เหนือองค์ประกอบแล้วคลิกลิงก์ข้างองค์ประกอบ

    รายการปัญหาคอนทราสต์ในภาพรวม CSS

  5. แก้ไขปัญหาตามที่อธิบายไว้ในส่วนแก้ไขข้อความคอนทราสต์ต่ำ

(ตัวอย่าง) ปัญหาคอนทราสต์ในแท็บ "ปัญหา"

วิธีดูรายการปัญหา

  1. เปิดใช้การรายงานปัญหาคอนทราสต์ในแท็บปัญหา ดังนี้
    1. เปิดการตั้งค่า > ทดลอง
    2. ค้นหา contrast issue ในแถบตัวกรอง
    3. เลือกเปิดใช้การรายงานปัญหาคอนทราสต์อัตโนมัติผ่านแผงปัญหา เปิดใช้การรายงานปัญหาคอนทราสต์
    4. คลิกโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำในข้อความแจ้งด้านบน
  2. เปิดแท็บ "ปัญหา"

  3. ขยายปัญหาเกี่ยวกับคอนทราสต์ที่พบจากเครื่องมือสำหรับนักพัฒนาเว็บ จากนั้นจึงขยายตารางองค์ประกอบ แล้วคลิกลิงก์ข้างองค์ประกอบ

    ตารางองค์ประกอบที่มีปัญหาคอนทราสต์ในแท็บ "ปัญหา"

  4. แก้ไขปัญหาตามที่อธิบายไว้ในส่วนแก้ไขข้อความคอนทราสต์ต่ำ

ปัญหาคอนทราสต์ในรายงาน Lighthouse

วิธีเรียกใช้รายงาน

  1. ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้เปิด แท็บอื่นๆ แท็บเพิ่มเติม > Lighthouse
  2. สร้างรายงาน Lighthouse ด้วยการตั้งค่าต่อไปนี้
    • โหมด: การนำทาง (ค่าเริ่มต้น)
    • หมวดหมู่: การช่วยเหลือพิเศษ
    • อุปกรณ์: เดสก์ท็อป รายงาน Lighthouse พร้อมการตั้งค่าการนำทาง การช่วยเหลือพิเศษ และเดสก์ท็อป
  3. คลิกวิเคราะห์การโหลดหน้าเว็บและรอให้ Lighthouse สร้างรายงาน
  4. เลื่อนลงไปที่ส่วนคอนทราสต์และคลิกลิงก์ไปยังองค์ประกอบที่ได้รับผลกระทบในรายการองค์ประกอบ ส่วนคอนทราสต์ของรายงาน Lighthouse ซึ่งมีรายการองค์ประกอบที่มีปัญหาคอนทราสต์
  5. แก้ไขปัญหาตามที่อธิบายไว้ในส่วนแก้ไขข้อความคอนทราสต์ต่ำ

แก้ไขข้อความคอนทราสต์ต่ำ

วิธีแก้ไขปัญหาคอนทราสต์ต่ำ

  1. ค้นหาปัญหาคอนทราสต์แล้วคลิกลิงก์ไปยังองค์ประกอบที่ได้รับผลกระทบในแผงภาพรวมของ CSS แท็บปัญหา หรือรายงาน Lighthouse เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังแผงองค์ประกอบและเลือกองค์ประกอบที่เกี่ยวข้อง องค์ประกอบที่มีปัญหาคอนทราสต์ที่เลือกไว้ในแผงองค์ประกอบ ตัวอย่างเช่น ในหน้าสาธิตนี้ องค์ประกอบแรกที่ได้รับผลกระทบคือ h1.line1

  2. คลิก ตรวจสอบ ตรวจสอบที่มุมขวาบนของเครื่องมือสำหรับนักพัฒนาเว็บ แล้ววางเมาส์เหนือองค์ประกอบในวิวพอร์ต เครื่องมือสำหรับนักพัฒนาเว็บแสดงเคล็ดลับเครื่องมือสำหรับองค์ประกอบนี้

    เคล็ดลับเครื่องมือจะแสดงป้ายคำเตือนถัดจากค่าคอนทราสต์

    สังเกตสัญลักษณ์คำเตือน คำเตือน ข้างค่าอัตราส่วนคอนทราสต์ในเคล็ดลับเครื่องมือ อัตราส่วนคอนทราสต์จะวัดความแตกต่างของความสว่างระหว่างสีพื้นหน้า (สีข้อความ) และสีพื้นหลัง

  3. เปิดตัวเลือกสีถัดจากการประกาศสีข้อความขององค์ประกอบ และในตัวเลือกสี ให้ขยายส่วนอัตราส่วนคอนทราสต์

    ส่วนอัตราส่วนคอนทราสต์ของตัวเลือกสี

    ตัวเลือกสีจะแจ้งให้คุณทราบว่าอัตราส่วนคอนทราสต์ไม่ตรงกับระดับ AA หรือ AAA ของหลักเกณฑ์ WebAIM

  4. คลิกปุ่ม ใช้สีที่แนะนำ ใช้สีที่แนะนำ ข้างระดับ AAA ตัวเลือกสีจะใช้สีข้อความที่สอดคล้องกับหลักเกณฑ์เกี่ยวกับอัตราส่วนคอนทราสต์

    สีที่ใช้สอดคล้องกับหลักเกณฑ์

  5. หรือหากต้องการเลือกสีด้วยตนเอง คุณสามารถลากวงกลมในตัวอย่างเฉดสี หากต้องการอยู่ในระดับ AA หรือ AAA ให้เลือกสีที่อยู่ด้านล่างบรรทัดบนสุดหรือล่างสุดตามลำดับ

    เลือกเฉดสีใต้เส้นล่างเพื่อให้อยู่ในระดับ AAA

  6. ในทำนองเดียวกัน ให้แก้ไขปัญหาคอนทราสต์ทั้งหมดที่พบในแผงภาพรวมของ CSS, แท็บปัญหา หรือรายงาน Lighthouse

บันทึกการเปลี่ยนแปลง

วิธีบันทึกการเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บ

ขั้นตอนถัดไปคือ

ดูข้อมูลเพิ่มเติม: