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

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

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

แม้ว่าตัวอย่างทั้งหมดอาจอ่านเข้าใจได้ แต่ทุกคนก็ไม่ได้เป็นเช่นนั้น

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

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

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

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

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

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

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

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

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

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

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

ดาวน์โหลด Pika

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

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

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

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

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

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

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

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

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

VisBug

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

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

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

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

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

ตรวจสอบอย่างน้อย 1 รายการ

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

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

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

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

• ตัวเลือกสี
• เคล็ดลับเครื่องมือการตรวจสอบ
• ภาพรวมของ CSS
• Lighthouse
• คอนโซล JS
• เครื่องมือจำลองแบบตาบอดสี
• การจำลองค่ากำหนดคอนทราสต์ของสีของระบบ
• การทดสอบ WCAG 3.0 APCA

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

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

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

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

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

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

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

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

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

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

ชนให้สนุกให้สุดเหวี่ยง 🎶

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

ขั้นตอนมีดังนี้

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

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

ภาพรวม CSS

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

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

ประภาคาร

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

ผลการค้นหาดังกล่าวอาจมีลักษณะดังนี้

คอนโซล JS

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

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

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

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

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

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

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

ลองใช้ WCAG 3.0 APCA

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

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

บทสรุป

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