การช่วยเหลือพิเศษด้วยสีและคอนทราสต์

Dave Gash

Meggin Kearney

Rachel Andrew

Rob Dodson

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

หลักเกณฑ์ของ WebAIM แนะนำอัตราส่วนคอนทราสต์ AA (ขั้นต่ำ) ที่ 4.5:1 สำหรับข้อความทั้งหมด แต่มีข้อยกเว้นสำหรับข้อความขนาดใหญ่มาก (ใหญ่กว่าข้อความเนื้อหาเริ่มต้น 120-150%) ซึ่งอัตราส่วนอาจลดลงเป็น 3:1 โปรดสังเกตความแตกต่างของ อัตราส่วนคอนทราสต์ที่แสดงที่นี่

อัตราส่วนคอนทราสต์ที่ 4.5:1 ได้รับเลือกสำหรับระดับ AA เพราะเป็นการชดเชยค่า ความไวต่อคอนทราสต์ที่มักจะพบโดยผู้ใช้ที่สูญเสียการมองเห็นเทียบเท่ากับการมองเห็นประมาณ 20/40 คนทั่วไปอายุ 20/40 ปีเป็นระดับสายตาปกติ ของคนอายุประมาณ 80 ปี สำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็นหรือสีที่ไม่ชัด เราสามารถเพิ่มคอนทราสต์ได้ถึง 7:1 สำหรับข้อความในเนื้อหา

คุณใช้การตรวจสอบการช่วยเหลือพิเศษใน Lighthouse เพื่อตรวจสอบคอนทราสต์ของสีได้ หากต้องการเรียกใช้รายงาน ให้ทำดังนี้

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกการตรวจสอบ
3. เลือกการช่วยเหลือพิเศษ

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

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

อัลกอริทึมคอนทราสต์ขั้นสูง (APCA)

อัลกอริทึมคอนทราสต์ขั้นสูง (Advanced Perceptual Cสแปม Algorithm หรือ APCA) เป็นวิธีใหม่ในการคำนวณคอนทราสต์จากการวิจัยสมัยใหม่เกี่ยวกับการรับรู้สี

เมื่อเปรียบเทียบกับหลักเกณฑ์ของ AA และ AAA APCA นั้นอิงตามบริบทมากกว่า

ความคมชัดจะคำนวณตามคุณลักษณะต่อไปนี้

• คุณสมบัติเชิงพื้นที่ (น้ำหนักตัวอักษรและขนาดข้อความ)
• สีข้อความ (ความแตกต่างที่รับรู้ได้ระหว่างข้อความและพื้นหลัง)
• บริบท (แสงแวดล้อม สภาพแวดล้อม และจุดประสงค์ของข้อความ)

Chrome มีฟีเจอร์ทดลองเพื่อแทนที่หลักเกณฑ์เกี่ยวกับอัตราส่วนคอนทราสต์ AA/AAA ด้วย APCA

ห้ามถ่ายทอดข้อมูลด้วยสีเพียงอย่างเดียว

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

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

เช็กลิสต์ของ WebAIM ระบุไว้ในส่วนที่ 1.4.1 ว่า "ไม่ควรใช้สีเป็นวิธีเดียวในการถ่ายทอดเนื้อหาหรือแยกแยะองค์ประกอบภาพ" นอกจากนี้ โปรดทราบด้วยว่า "ไม่ควรใช้สีอย่างเดียวเพื่อแยกความแตกต่างของลิงก์จากข้อความที่อยู่โดยรอบ" เว้นแต่จะเป็นไปตามข้อกำหนดด้านความคมชัดบางประการ รายการตรวจสอบแนะนำให้เพิ่มตัวบ่งชี้อื่นๆ แทน เช่น ขีดล่าง (โดยใช้พร็อพเพอร์ตี้ CSS text-decoration) เพื่อระบุว่าลิงก์ใช้งานได้เมื่อใด

วิธีพื้นฐานในการแก้ไขตัวอย่างก่อนหน้านี้คือใส่ข้อความเพิ่มเติมลงในช่องเพื่อประกาศว่าข้อความไม่ถูกต้องและเพราะเหตุใด

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

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

• ตาบอดสีแดง: มองไม่เห็นแสงสีแดง
• ตาบอดสีเขียว: มองไม่เห็นแสงสีเขียว
• ตาบอดสีน้ำเงิน: ไม่สามารถรับรู้แสงสีฟ้าได้
• ตาบอดสี: ไม่สามารถรับรู้สีใดๆ ยกเว้นเฉดสีเทา (พบได้น้อยมาก)

โหมดคอนทราสต์สูง

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

ระบบปฏิบัติการอย่าง Mac OSX และ Windows มีโหมดคอนทราสต์สูงที่เปิดใช้ได้สำหรับทุกอย่างในระดับระบบ

วิธีที่มีประโยชน์คือการเปิดการตั้งค่าคอนทราสต์สูงและยืนยันว่า UI ทั้งหมดในแอปยังคงมองเห็นได้และใช้งานได้

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

ในทำนองเดียวกัน ในตัวอย่างก่อนหน้านี้ เส้นใต้สีแดงในช่องหมายเลขโทรศัพท์ที่ไม่ถูกต้องอาจแสดงเป็นสีน้ำเงิน/เขียวซึ่งดูไม่โดดเด่น

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