กำลังทดสอบคอนทราสต์ของสีของการออกแบบเว็บ

ภาพรวมของเครื่องมือและเทคนิค 3 อย่างสำหรับการทดสอบและยืนยันคอนทราสต์ของสีที่เข้าถึงได้ในการออกแบบของคุณ

Adam Argyle
Charlie Gleason

สมมติว่าคุณมีข้อความบนพื้นหลังสีอ่อน ดังนี้

วลี "The quick brown fox jumps over the lazy dog again" ปรากฏขึ้น โดยแต่ละคำหรือคู่คำเป็นสีฟ้าอ่อน เหนือคำแต่ละส่วนที่ค่อยๆ จางลงจะมีคะแนนอัตราส่วนคอนทราสต์ คำ 2-3 คำสุดท้ายอ่านได้ยากมากเนื่องจากมีคอนทราสต์ต่ำ

แม้ว่าคุณจะอ่านตัวอย่างทั้งหมดได้ แต่ก็ไม่ได้หมายความว่าทุกคนจะอ่านได้

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

WCAG และคอนทราสต์ของสี

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

ความสัมพันธ์ระหว่างสี 2 สีใน WCAG 2.1 อธิบายได้ด้วยอัตราส่วนคอนทราสต์ ซึ่งก็คือตัวเลขที่คุณได้รับเมื่อเปรียบเทียบความสว่างของสี 2 สี ความสว่างเป็นวิธีอธิบายว่าสีหนึ่งๆ ใกล้เคียงกับสีดำ (0%) หรือสีขาว (100%) มากเพียงใด WCAG กำหนดกฎและอัลกอริทึมการคำนวณบางอย่างเกี่ยวกับอัตราส่วนคอนทราสต์ที่จำเป็นเพื่อให้เข้าถึงเว็บได้ อย่างไรก็ตาม การคำนวณนี้มีปัญหาที่ทราบอยู่แล้ว ในที่สุดก็จะมีการนำวิธีที่เชื่อถือได้มากกว่ามาใช้ แต่ในปัจจุบัน WCAG เป็นวิธีที่ดีที่สุดที่เรามี

กฎมีอะไรบ้าง

AA AAA
ข้อความเนื้อหา (< 24px) 4.5 7
ข้อความขนาดใหญ่ (> 24 พิกเซล) 3 4.5
UI (ไอคอน กราฟ ฯลฯ) 3 ไม่ได้กำหนด

อัตราส่วนคอนทราสต์ที่สูงขึ้นจะได้รับคะแนนสูงขึ้น เช่น 4.5 หรือ 7 แทนที่จะเป็น 3 หากต้องการทำความคุ้นเคยกับตารางการให้คะแนนมากขึ้น โปรดดูเครื่องมือตรวจสอบคอนทราสต์ของ Polypane

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

การทดสอบคอนทราสต์ระหว่างสี

เมื่อทราบแล้วว่าเรากำลังมองหาอะไร ต่อไปเราจะทดสอบเรื่องนี้ได้อย่างไร ต่อไปนี้คือเครื่องมือฟรี 3 รายการที่จะช่วยคุณตรวจสอบ แก้ไข และวัดคอนทราสต์ของเว็บไซต์ เราจะอธิบายจุดแข็งและจุดอ่อนของแต่ละวิธีเพื่อให้คุณทดสอบการช่วยเหลือพิเศษของสีและเนื้อหาในเว็บไซต์ได้อย่างมั่นใจด้วยวิธีต่างๆ

  1. Pika
    แอป MacOS ที่มีความสามารถเฉพาะตัวในการแสดงคอนทราสต์ของสีใดก็ได้บนทั้งหน้าจอ สีในการไล่ระดับสี สีที่มีความโปร่งใส และอื่นๆ ความตั้งใจนั้นชัดเจน ผู้ใช้เลือกพิกเซลที่จะเปรียบเทียบด้วยตนเอง แม้จะทำงานอัตโนมัติน้อยลงเล็กน้อย แต่ก็มีฟีเจอร์เพิ่มขึ้นอย่างมาก
  2. VisBug
    ส่วนขยายข้ามเบราว์เซอร์ที่สามารถแสดงการวางซ้อนคอนทราสต์ได้มากกว่า 1 รายการพร้อมกัน แต่บางครั้งก็ตรวจจับความตั้งใจไม่ได้เหมือนกับเครื่องมือสำหรับนักพัฒนาเว็บ
  3. เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
    เครื่องมือสำหรับนักพัฒนาเว็บมีอยู่ใน Chrome และมีวิธีต่างๆ มากมายในการตรวจสอบ แก้ไข และแก้ไขข้อบกพร่องเกี่ยวกับสี แต่มีข้อบกพร่องเมื่อตรวจสอบการไล่ระดับสีและสีกึ่งโปร่งใส และบางครั้งก็ตรวจจับความตั้งใจไม่ได้

Pika (แอปพลิเคชัน macOS)

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

ดาวน์โหลด Pika

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

  • เปรียบเทียบสี 2 สี ไม่ว่าจะอยู่ในเบราว์เซอร์หรือไม่ก็ตาม หากเห็นสีนั้นบนหน้าจอ คุณก็ทดสอบได้
  • การเปรียบเทียบสีที่มีความโปร่งใส
  • กำลังเปรียบเทียบสีภายในการไล่ระดับสี
  • การเปรียบเทียบสีที่ใช้โหมดผสม เช่น mix-blend-mode ใน CSS

การเปรียบเทียบสี 2 สี

เปรียบเทียบข้อความกับสีพื้นหลัง

เปรียบเทียบสีเทา 2 สีแบบคู่กัน โดยมีอัตราส่วนคอนทราสต์ 13.01 และผ่านเป้าหมาย AA และ AAA

เปรียบเทียบสีเส้นขอบและสีเติมของภาพกราฟิกเวกเตอร์

เปรียบเทียบสีม่วง 2 สีจากไอคอนแบบ 2 โทนสี โดยมีอัตราส่วนคอนทราสต์อยู่ที่ 1.63 และไม่เป็นไปตามเป้าหมาย WCAG ใดๆ

กำลังเปรียบเทียบสีที่มีความโปร่งใส

เปรียบเทียบสีข้อความกับพิกเซลตัวอย่างพื้นหลังที่หลากหลาย ในที่นี้ สีเทาอ่อนที่สุดจากเอฟเฟกต์กระจกฝ้าจะใช้เป็นสีเปรียบเทียบพื้นหลัง

เปรียบเทียบสี 2 สีที่ดูเหมือนสีเทาแต่จริงๆ แล้วเป็นสีม่วงที่อิ่มตัวน้อยมากจากรูปภาพที่มีคำบรรยายภาพกึ่งโปร่งใสแบบเบลอ โดยมีอัตราส่วนคอนทราสต์ 4.65 และผ่านเป้าหมาย AA

การเปรียบเทียบสีกับการไล่ระดับสี

เปรียบเทียบข้อความบนการไล่ระดับสีหรือบนรูปภาพ ในตัวอย่างนี้ ตัวอักษร L จากคำว่า "Lasso" จะเปรียบเทียบกับสีฟ้าอ่อนของรูปภาพ

ภาพหน้าจอจากรายการทีวีมีชื่อรายการอยู่ด้านบน โดยมีการเปรียบเทียบตัวอักษร L สีขาวและสีน้ำเงินที่อยู่ด้านหลัง โดยมีอัตราส่วนคอนทราสต์เท่ากับ 8 และผ่านเป้าหมาย AA และ AAA

VisBug

VisBug เป็นเครื่องมือที่ได้รับแรงบันดาลใจจาก FireBug สำหรับนักออกแบบและนักพัฒนาซอฟต์แวร์เพื่อตรวจสอบ แก้ไขข้อบกพร่อง และทดลองใช้การออกแบบเว็บไซต์ด้วยภาพ โดยมีจุดประสงค์เพื่อลดอุปสรรคในการเข้าถึงมากกว่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ด้วยการจำลอง UI และ UX ของเครื่องมือออกแบบที่ผู้คนรู้จักและชื่นชอบ

ลองใช้ VisBug หรือติดตั้งใน Chrome, Firefox, Edge, Brave หรือ Safari

หนึ่งในเครื่องมือที่มีให้คือเครื่องมือตรวจสอบการช่วยเหลือพิเศษ

ภาพหน้าจอของแถบเครื่องมือ VisBug ทางด้านซ้ายของหน้าว่าง ไอคอนเครื่องมือช่วยเหลือพิเศษเป็นสีชมพูและมีป๊อปโอเวอร์แสดงขึ้นซึ่งให้วิธีการใช้เครื่องมือ

ตรวจสอบในเบราว์เซอร์ต่างๆ (และแม้แต่ในอุปกรณ์เคลื่อนที่)

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

คอมโพเนนต์ที่มีชื่อและไอคอนจะแสดงพร้อมกรอบล้อมรอบสีชมพูรอบๆ โดยมีเคล็ดลับเครื่องมือการช่วยเหลือพิเศษของ VisBug ชี้ไปที่กล่องสีชมพูพร้อมรายงานการเปรียบเทียบสีของข้อความและพื้นหลัง อัตราส่วนคือ 13.86 และผ่านทั้งเป้าหมาย AA และ AAA

ตรวจสอบ 1 รายการหรือหลายรายการ

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

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

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

หากคุณติดตั้ง Chrome ไว้ คุณก็จะมีเครื่องมือทดสอบคอนทราสต์มากมายอยู่แล้ว ดังนี้

ตัวเลือกสีของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

ในตัวอย่างต่อไปนี้ ตัวเลือกสีจะเปิดขึ้นสำหรับค่าสีของคุณสมบัติที่กำหนดเอง คะแนนอัตราส่วนคอนทราสต์จะรายงานเป็น 15.79 และมีเครื่องหมายถูกสีเขียว 2 อัน ซึ่งบ่งบอกว่าคะแนนผ่านข้อกำหนด AA และ AAA WCAG 2.1

ภาพหน้าจอของแผงองค์ประกอบเครื่องมือสำหรับนักพัฒนาเว็บ ในรูปแบบที่แสดงตัวเลือกสี และตรงกลางจะรายงานอัตราส่วนคอนทราสต์ของสีที่ 4.98

การแก้ไขอัตโนมัติของตัวเลือกสี

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

หากคุณไม่ได้เจาะจงเรื่องสี ฟีเจอร์การแก้ไขอัตโนมัติเป็นวิธีที่ยอดเยี่ยมในการปฏิบัติตามหลักเกณฑ์ด้านการช่วยเหลือพิเศษและไม่ต้องทำงานหนักเกินไปเพื่อให้งานเสร็จ

เคล็ดลับเครื่องมือการตรวจสอบ

เครื่องมือเลือกองค์ประกอบมีฟีเจอร์พิเศษระหว่างการวางเมาส์เหนือหน้าเว็บซึ่งจะรายงานข้อมูลแบบอักษร สี และการช่วยเหลือพิเศษทั่วไป เครื่องมือเลือกองค์ประกอบคือไอคอนทางด้านซ้ายในภาพหน้าจอต่อไปนี้ ซึ่งเป็นกล่องที่มีเคอร์เซอร์ลูกศรอยู่เหนือมุมขวาล่าง นอกจากนี้ คุณยังเลือกเครื่องมือนี้ได้โดยใช้แป้นพิมพ์ลัด Control+Shift+C (หรือ Command+Shift+C ใน MacOS)

ภาพหน้าจอของไอคอนกล่องและลูกศรในเครื่องมือสำหรับนักพัฒนาเว็บที่เรียกใช้เครื่องมือเลือกองค์ประกอบ

เมื่อเปิดใช้งานแล้ว ไอคอนจะเปลี่ยนเป็นสีน้ำเงิน และการชี้ไปที่สิ่งใดก็ตามในหน้าเว็บจะแสดงเคล็ดลับเครื่องมือตรวจสอบด่วนต่อไปนี้

ภาพหน้าจอของภาพซ้อนทับที่คล้ายกับ VisBug มาก โดยแสดงข้อมูลสไตล์บางอย่างและส่วนการช่วยเหลือพิเศษที่แสดงคะแนนคอนทราสต์ 15.79 ซึ่งผ่านเป้าหมาย AA

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

Bump bump 'til you pass 🎶

ฉันมักจะตรวจสอบคู่สีด้วยเครื่องมือตรวจสอบด่วนนี้ และพบว่าคู่สีนั้นมีอัตราส่วนไม่ถึงเกณฑ์ที่กำหนดเพียงเล็กน้อย แทนที่จะใช้ฟีเจอร์การแก้ไขอัตโนมัติของตัวเลือกสี (เพราะฉันเป็นคนจู้จี้จุกจิก) ฉันจะปรับช่องสีใน CSS และดูจนกว่าจะผ่านอัตราส่วนที่ต้องการ ฉันเรียกกระบวนการนี้ว่า "bump bump til you pass" เพราะฉันจะเพิ่มตัวเลขช่องสีไปเรื่อยๆ จนกว่าจะผ่าน WCAG 2.1

ขั้นตอนมีดังต่อไปนี้ และต้องดำเนินการตามลำดับที่ถูกต้อง

  1. ตั้งค่าโฟกัสของแป้นพิมพ์ภายในสีในแผงรูปแบบ
  2. เปิดใช้งานเครื่องมือตรวจสอบองค์ประกอบด้วยแป้นพิมพ์ลัด Control+Shift+C (หรือ Command+Shift+C ใน MacOS)
  3. ชี้ไปที่เป้าหมาย
  4. กดขึ้น/ลงบนแป้นพิมพ์เพื่อเปลี่ยนตัวเลขในค่าสี

วิธีนี้ได้ผลเนื่องจากค่าสไตล์ CSS ยังคงมีโฟกัสของแป้นพิมพ์อยู่ ขณะที่เมาส์ช่วยให้คุณชี้ไปที่เป้าหมายได้ โปรดอย่าคลิกเป้าหมาย ไม่เช่นนั้นโฟกัสจะย้ายออกจากพื้นที่ค่าสีและไม่ให้คุณปรับค่าอีกต่อไปจนกว่าจะโฟกัสใหม่

ภาพรวม CSS

จนถึงตอนนี้ เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีวิธีดูการจับคู่สีทีละคู่ แต่ภาพรวม CSS สามารถทำการ Crawl ทั้งหน้าเว็บและแสดงการจับคู่ที่เข้าถึงไม่ได้ทั้งหมดพร้อมกันได้ ดังนี้

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

อ่านข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์นี้ได้ในโพสต์ภาพรวม CSS: ระบุการปรับปรุง CSS ที่เป็นไปได้ หรือดู Jecelyn Yeen บน YouTube ในซีรีส์เคล็ดลับเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บที่สอนวิธีระบุการปรับปรุง CSS ที่เป็นไปได้ด้วยแผงภาพรวม CSS

ประภาคาร

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

ผลลัพธ์เหล่านั้นอาจมีลักษณะดังนี้

ภาพหน้าจอของการประเมิน Lighthouse ซึ่งแสดงผลลัพธ์ของข้อความที่มีคอนทราสต์ต่ำของคู่สี 2 คำ

คอนโซล JS

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

ภาพหน้าจอของช่องทำเครื่องหมายที่เปิดใช้: &quot;เปิดใช้การรายงานปัญหาคอนทราสต์อัตโนมัติผ่านแผงปัญหา&quot;

จากนั้นเปิดแผงปัญหาและดูว่าพบปัญหาใดหรือไม่ ซึ่งหากมี ก็จะมีลักษณะดังนี้

ภาพหน้าจอของแผงปัญหาภายในคอนโซล ซึ่งรายงานข้อผิดพลาด 6 รายการเกี่ยวกับคอนทราสต์

การจำลองตาบอดสี

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

ภาพหน้าจอของตัวเลือกใน DevTools การจำลองสำหรับการจำลองความบกพร่องทางการมองเห็น: ไม่มีการจำลอง, ภาพเบลอ, ตาบอดสีแดง, ตาบอดสีเขียว, ตาบอดสีน้ำเงิน, ตาบอดสีทุกสี

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

การจำลองค่ากำหนดของระบบสำหรับคอนทราสต์ของสี

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

ภาพหน้าจอของตัวเลือกใน DevTools การจำลองสำหรับการจำลอง prefers-contrast ของคิวรี่สื่อ CSS: ไม่มีการจำลอง, มากขึ้น, น้อยลง, กำหนดเอง

ลองใช้ WCAG 3.0 APCA

การทดสอบอีกอย่างหนึ่งที่ควรลองคือการทดสอบการจับคู่สีด้วยระบบการให้คะแนนอัตราส่วนสี APCA เวอร์ชันทดลอง เมื่อเปิดใช้ผ่านการตั้งค่า > การทดสอบ ระบบจะแทนที่ระบบอัตราส่วน WCAG 2.1 ด้วยอัลกอริทึมเครื่องมือตรวจสอบคอนทราสต์ที่ใหม่กว่าและได้รับการปรับปรุง ซึ่งช่วยให้คุณดูตัวอย่างผลลัพธ์ได้เมื่อข้อเสนอทำงานตามมาตรฐาน

ภาพหน้าจอของช่องทำเครื่องหมายที่เปิดใช้: &quot;เปิดใช้ Advanced Perceptual Contrast Algorithm (APCA) ใหม่เพื่อแทนที่อัตราส่วนคอนทราสต์และหลักเกณฑ์ AA/AAA ก่อนหน้านี้&quot;

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

เคล็ดลับเครื่องมือตรวจสอบองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บแสดงคะแนนคอนทราสต์ -100.2% สำหรับองค์ประกอบ dd

บทสรุป

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