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

Sofia Emelianova

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

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

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

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

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

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในหน้าเว็บ

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

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

คุณสามารถทดลองใช้ได้โดยเปิด CodePen ของเรา

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

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

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

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

   

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

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

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

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

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

   

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

ปัญหาเกี่ยวกับคอนทราสต์ในรายงาน Lighthouse

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

1. ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้เปิด แท็บเพิ่มเติม > Lighthouse

2. สร้างรายงาน Lighthouse ด้วยการตั้งค่าต่อไปนี้

   • โหมด: การนำทาง (ค่าเริ่มต้น)
   • หมวดหมู่: การช่วยเหลือพิเศษ
   • อุปกรณ์: เดสก์ท็อป

   

3. คลิกวิเคราะห์การโหลดหน้าเว็บ แล้วรอให้ Lighthouse สร้างรายงาน

4. ไปที่ส่วนความคมชัด คลิกลิงก์ไปยังองค์ประกอบที่ได้รับผลกระทบจากรายการองค์ประกอบ

   

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

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

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

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

   

   ตัวอย่างเช่น ใน CodePen ของเดโมที่เข้าถึงไม่ได้ องค์ประกอบแรกที่ได้รับผลกระทบคือ h1.line1

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

   

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

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

   

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

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

   

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

   

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

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

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

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

ขั้นตอนต่อไปคืออะไร

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

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