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

Sofia Emelianova

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

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

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

• ค้นหาปัญหาคอนทราสต์ ใช้แผงภาพรวม CSS, แท็บปัญหา (แสดงตัวอย่าง) หรือรายงาน Lighthouse เพื่อดูรายการปัญหาทั้งหมด
• แก้ไขปัญหาคอนทราสต์ ดูปัญหาที่มีเคล็ดลับเครื่องมือในโหมดตรวจสอบและเลือกสีที่ตัวเลือกสีแนะนำเพื่อแก้ไขอัตราส่วนคอนทราสต์
• จำลองภาวะบกพร่องทางการมองเห็น ตรวจสอบเว็บไซต์ในแบบที่ผู้ใช้เห็น

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

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

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

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

   • ภาพรวมของ CSS
   • (แสดงตัวอย่าง) ปัญหา
   • Lighthouse

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

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

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

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

   

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

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

หมายเหตุ: ฟีเจอร์นี้เป็นการแสดงตัวอย่างซึ่งถูกปิดใช้โดยค่าเริ่มต้น

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

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

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

   

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

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

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

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

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

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

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

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

   

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

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

   

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

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

   

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

   

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

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

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

• คัดลอกการเปลี่ยนแปลง CSS ทั้งหมดพร้อมกันแล้ววางลงในโค้ด
• ลองตั้งค่าพื้นที่ทำงานที่ช่วยให้เครื่องมือสำหรับนักพัฒนาเว็บบันทึกไฟล์ลงในแหล่งที่มาได้โดยตรง

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

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

• โดยทั่วไปแล้วเรียนรู้การช่วยเหลือพิเศษ
• สามารถเข้าถึงได้ง่ายสีและคอนทราสต์โดยเฉพาะ