คุณเคยลองอ่านข้อความบนหน้าจอแล้วพบว่ายากต่อการอ่านเนื่องจากรูปแบบสีหรือไม่ค่อยเห็นหน้าจอในสภาพแวดล้อมที่มีแสงจ้าหรือแสงน้อยหรือไม่ หรือคุณอาจจะมีปัญหาด้านการมองเห็นสีถาวรมากกว่า เช่น คนตาบอดสี 300 ล้านคนหรือคน 253 ล้านคนที่มีสายตาเลือนราง
ในฐานะนักออกแบบหรือนักพัฒนาซอฟต์แวร์ คุณต้องเข้าใจว่าผู้คนมีสีและคอนทราสต์อย่างไร ไม่ว่าจะเป็นแบบชั่วคราว ตามสถานการณ์ หรือถาวร วิธีนี้จะช่วยให้คุณสนับสนุน ความต้องการด้านภาพของเด็กๆ ได้ดีที่สุด
โมดูลนี้จะแนะนำให้คุณรู้จักกับพื้นฐานด้านสีและคอนทราสต์ที่สามารถเข้าถึงได้
กำลังรับรู้สี
คุณรู้ไหมว่าวัตถุไม่มีสีแต่จะแสดงความยาวคลื่นของแสง เมื่อเห็นสี ตาของคุณจะรับและประมวลผลช่วงคลื่นเหล่านั้นและแปลงเป็นสี
เมื่อพูดถึงความสามารถเข้าถึงได้ง่ายแบบดิจิทัล เราจะพูดถึงความยาวคลื่นเหล่านี้ ในแง่ของโทนสี ความอิ่มตัว และความสว่าง (HSL) โมเดล HSL ถูกสร้างขึ้นเพื่อเป็นอีกทางเลือกหนึ่งของโมเดลสี RGB และมีความสอดคล้องกับสีที่มนุษย์จะได้รับมากยิ่งขึ้น
โทนสีเป็นวิธีอธิบายสีในเชิงคุณภาพ เช่น แดง เขียว หรือน้ำเงิน ซึ่งเฉดสีแต่ละสีจะมีจุดเฉพาะบนแถบสีโดยมีค่าตั้งแต่ 0 ถึง 360 และสีแดงอยู่ที่ 0 สีเขียวที่ 120 และสีน้ำเงินที่ 240
ความอิ่มตัวคือความเข้มของสีซึ่งวัดเป็นเปอร์เซ็นต์ตั้งแต่ 0% ถึง 100% สีที่มีความอิ่มตัว (100%) จะสดใสมาก ส่วนสีที่ไม่มีความอิ่มตัว (0%) จะเป็นโทนสีเทาหรือขาวดำ
ความสว่างคืออักขระที่สว่างหรือมืดของสีซึ่งวัดเป็นเปอร์เซ็นต์ตั้งแต่ 0% (สีดำ) จนถึง 100% (สีขาว)
การวัดคอนทราสต์ของสี
กลุ่ม WAI ได้สร้างสูตรคอนทราสต์ของสีเพื่อให้ข้อความมีคอนทราสต์เพียงพอระหว่างข้อความกับพื้นหลังเพื่อช่วยสนับสนุนผู้ที่มีความพิการทางสายตาแบบต่างๆ เมื่อใช้อัตราส่วนคอนทราสต์ของสีเหล่านี้ ผู้ที่มีสายตาเลือนรางระดับปานกลางจะอ่านข้อความบนพื้นหลังได้โดยไม่ต้องใช้เทคโนโลยีความช่วยเหลือพิเศษที่ช่วยเพิ่มคอนทราสต์
ลองดูรูปภาพที่มีชุดสีที่สดใส และเปรียบเทียบว่ารูปภาพจะปรากฏอย่างไรสำหรับบุคคลที่ตาบอดสีรูปแบบใดรูปแบบหนึ่ง
ทางด้านซ้าย รูปภาพแสดงทรายสีรุ้งที่มีสีม่วง แดง ส้ม เหลือง เขียวอควา ฟ้าอ่อน และน้ำเงินเข้ม ทางด้านขวาเป็นลายสีรุ้งที่สว่างขึ้นและหลากสี
ภาวะตาบอดสีเขียว
ตาบอดสีเขียว (โดยทั่วไปรู้จักกันในชื่อตาบอดสีเขียว) เกิดในผู้ชาย 1% ถึง 5% และผู้หญิง 0.35% ถึง 0.1%
ผู้ที่เป็นโรคตาบอดสีเขียวมีความไวต่อแสงสีเขียวลดลง ฟิลเตอร์ตาบอดสีนี้จะจำลองลักษณะของโรคตาบอดสีประเภทนี้
ตาบอดสีแดง
ตาบอดสีแดง (โดยทั่วไปเรียกว่าตาบอดสีแดง) เกิดในผู้ชาย 1.01% ถึง 1.08% และผู้หญิง 0.02% ใน 0.03%
ผู้ที่เป็นโรคตาบอดสีแดงมีความไวต่อแสงสีแดงลดลง ฟิลเตอร์ตาบอดสีนี้จะจำลองลักษณะของโรคตาบอดสีประเภทนี้
ตาบอดสีหรือเห็นสีเดียว
ภาวะตาบอดสีทุกสีหรือตาบอดสี (หรือตาบอดสีแบบเต็มรูปแบบ) เกิดขึ้นน้อยมาก
ผู้ที่มีอาการตาบอดสีหรือเห็นสีเดียวแทบจะไม่มองเห็นแสงสีแดง เขียว หรือน้ำเงิน ฟิลเตอร์ตาบอดสีนี้จะจำลองลักษณะ ของตาบอดสีประเภทนี้
คำนวณคอนทราสต์ของสี
สูตรคอนทราสต์ของสีใช้ความสว่างสัมพัทธ์ของสีเพื่อช่วยกำหนดคอนทราสต์ซึ่งอาจมีตั้งแต่ 1 ถึง 21 สูตรนี้มักจะย่อเป็น [color value]:1 เช่น สีดำและสีขาวล้วนมีอัตราส่วนคอนทราสต์ของสีสูงสุดที่ 21:1
(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors
ข้อความขนาดปกติรวมถึงรูปภาพข้อความต้องมีอัตราส่วนคอนทราสต์ของสี 4.5:1 จึงจะผ่านข้อกำหนด WCAG ขั้นต่ำสำหรับสี
ข้อความขนาดใหญ่และไอคอนที่จำเป็นต้องมีอัตราส่วนคอนทราสต์ของสีอยู่ที่ 3:1
ข้อความขนาดใหญ่จะมีลักษณะเป็นตัวหนาอย่างน้อย 18pt / 24px หรือ 14pt/18.5px โลโก้และองค์ประกอบตกแต่งจะได้รับการยกเว้นจากข้อกำหนดคอนทราสต์ของสี
โชคดีที่ไม่ต้องใช้คณิตศาสตร์ขั้นสูงเนื่องจากมีเครื่องมือมากมายที่จะช่วยคำนวณคอนทราสต์ของสีให้คุณ เครื่องมือต่างๆ เช่น Adobe Color, Color Contrast Analyzer, Leonardo และตัวเลือกสีของ DevTools ของ Chrome สามารถบอกอัตราส่วนคอนทราสต์ของสีได้อย่างรวดเร็ว และให้คำแนะนำเพื่อช่วยสร้างคู่สีและชุดสีที่มีความครอบคลุมมากที่สุด
ใช้สี
หากไม่มีระดับคอนทราสต์ของสีที่ดี คำ ไอคอน และองค์ประกอบกราฟิกอื่นๆ จะค้นพบได้ยากและคุณจะเข้าถึงการออกแบบได้อย่างรวดเร็ว แต่สิ่งสำคัญอีกอย่างคือต้องให้ความสำคัญกับวิธีใช้สีบนหน้าจอ เนื่องจากคุณไม่สามารถใช้สีเพียงอย่างเดียวในการถ่ายทอดข้อมูล การกระทำ หรือแยกแยะองค์ประกอบภาพได้
เช่น ถ้าคุณพูดว่า "คลิกปุ่มสีเขียวเพื่อดำเนินการต่อ" แต่ไม่ระบุเนื้อหาหรือตัวระบุสำหรับปุ่มเพิ่มเติม ผู้ที่เป็นโรคตาบอดสีบางประเภทจะรู้ได้ยากว่าต้องคลิกปุ่มใด ในทำนองเดียวกัน กราฟ แผนภูมิ และตารางจำนวนมากใช้สีเพียงอย่างเดียวในการถ่ายทอดข้อมูล การเพิ่มตัวระบุอื่น เช่น รูปแบบ ข้อความ หรือไอคอน เป็นสิ่งสำคัญในการช่วยให้ผู้คนเข้าใจเนื้อหา
การตรวจสอบผลิตภัณฑ์ดิจิทัลที่เป็นโทนสีเทาเป็นวิธีที่ดีในการตรวจหาปัญหาสีที่อาจเกิดขึ้นได้อย่างรวดเร็ว
คำค้นหาสื่อที่เน้นสี
นอกจากการตรวจสอบอัตราส่วนคอนทราสต์ของสีและการใช้สีบนหน้าจอแล้ว คุณควรพิจารณาใช้คำค้นหาสื่อที่ได้รับความนิยมเพิ่มมากขึ้นและได้รับการสนับสนุนมากขึ้น เพื่อให้ผู้ใช้ควบคุมสิ่งที่จะแสดงบนหน้าจอได้มากขึ้น
ตัวอย่างเช่น เมื่อใช้คิวรี่สื่อ @prefers-color-scheme คุณจะสร้างธีมมืดซึ่งอาจเป็นประโยชน์สำหรับผู้ที่มีอาการกลัวแสงหรือไวต่อแสงได้ คุณยังสร้างธีมคอนทราสต์สูงได้ด้วย @prefers-contrast ซึ่งรองรับผู้ที่มีสีเพี้ยนและมีความไวคอนทราสต์
ต้องการรูปแบบสี
คำค้นหาสื่อ @prefers-color-scheme ช่วยให้ผู้ใช้เลือกเว็บไซต์หรือแอปเวอร์ชันสว่างหรือธีมสีเข้มที่กำลังเข้าชมได้ คุณสามารถดูการเปลี่ยนแปลงของธีมนี้ได้จริงโดยเปลี่ยนการตั้งค่ากำหนดแสง/มืด แล้วไปยังเบราว์เซอร์ที่รองรับคิวรี่สื่อนี้ ดูวิธีการของ Mac และ Windows สำหรับโหมดมืด
ต้องการใช้คอนทราสต์
คำค้นหาสื่อ @prefers-contrast จะตรวจสอบการตั้งค่าระบบปฏิบัติการของผู้ใช้เพื่อดูว่ามีการเปิดหรือปิดคอนทราสต์สูง ดูการเปลี่ยนแปลงของธีมนี้ในการใช้งานจริงโดยเปลี่ยนการตั้งค่าค่ากำหนดคอนทราสต์ แล้วไปที่เบราว์เซอร์ที่รองรับคิวรี่สื่อนี้ (การตั้งค่าโหมดคอนทราสต์ของ Mac และ Windows)
การเลเยอร์คำค้นหาสื่อ
คุณสามารถใช้คิวรี่สื่อที่เน้นสีได้หลากหลาย เพื่อให้ผู้ใช้มีทางเลือกมากขึ้น ในตัวอย่างนี้ เราจัดกลุ่ม @prefers-color-scheme และ @prefers-contrast ไว้ด้วยกัน
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับสีและคอนทราสต์
สีเพียงอย่างเดียวไม่เพียงพอสำหรับตัวระบุ สิ่งใดอีกบ้างที่จะช่วยให้ผู้อ่านระบุองค์ประกอบของ UI ได้