คุณเคยลองอ่านข้อความบนหน้าจอแล้วพบว่ายากต่อการอ่านเนื่องจากรูปแบบสีหรือไม่ค่อยเห็นหน้าจอในสภาพแวดล้อมที่มีแสงจ้าหรือแสงน้อยหรือไม่ หรือคุณอาจจะมีปัญหาด้านการมองเห็นสีถาวรมากกว่า เช่น คนตาบอดสี 300 ล้านคนหรือคน 253 ล้านคนที่มีสายตาเลือนราง
ในฐานะนักออกแบบหรือนักพัฒนาซอฟต์แวร์ คุณต้องเข้าใจว่าผู้คนมีสีและคอนทราสต์อย่างไร ไม่ว่าจะเป็นแบบชั่วคราว ตามสถานการณ์ หรือถาวร วิธีนี้จะช่วยให้คุณสนับสนุน ความต้องการด้านภาพของเด็กๆ ได้ดีที่สุด
โมดูลนี้จะแนะนำให้คุณรู้จักกับพื้นฐานด้านสีและคอนทราสต์ที่สามารถเข้าถึงได้
กำลังรับรู้สี
คุณรู้ไหมว่าวัตถุไม่มีสีแต่จะแสดงความยาวคลื่นของแสง เมื่อเห็นสี ตาของคุณจะรับและประมวลผลช่วงคลื่นเหล่านั้นและแปลงเป็นสี
![ตากำลังดูวงล้อสี](https://web.dev/static/learn/accessibility/color-contrast/image/an-eye-viewing-color-whe-358cdaa2d25c.png?authuser=6&hl=th)
เมื่อพูดถึงความสามารถเข้าถึงได้ง่ายแบบดิจิทัล เราจะพูดถึงความยาวคลื่นเหล่านี้ ในแง่ของโทนสี ความอิ่มตัว และความสว่าง (HSL) โมเดล HSL ถูกสร้างขึ้นเพื่อเป็นอีกทางเลือกหนึ่งของโมเดลสี RGB และมีความสอดคล้องกับสีที่มนุษย์จะได้รับมากยิ่งขึ้น
โทนสีเป็นวิธีอธิบายสีในเชิงคุณภาพ เช่น แดง เขียว หรือน้ำเงิน ซึ่งเฉดสีแต่ละสีจะมีจุดเฉพาะบนแถบสีโดยมีค่าตั้งแต่ 0 ถึง 360 และสีแดงอยู่ที่ 0 สีเขียวที่ 120 และสีน้ำเงินที่ 240
ความอิ่มตัวคือความเข้มของสีซึ่งวัดเป็นเปอร์เซ็นต์ตั้งแต่ 0% ถึง 100% สีที่มีความอิ่มตัว (100%) จะสดใสมาก ส่วนสีที่ไม่มีความอิ่มตัว (0%) จะเป็นโทนสีเทาหรือขาวดำ
ความสว่างคืออักขระที่สว่างหรือมืดของสีซึ่งวัดเป็นเปอร์เซ็นต์ตั้งแต่ 0% (สีดำ) จนถึง 100% (สีขาว)
การวัดคอนทราสต์ของสี
กลุ่ม WAI ได้สร้างสูตรคอนทราสต์ของสีเพื่อให้ข้อความมีคอนทราสต์เพียงพอระหว่างข้อความกับพื้นหลังเพื่อช่วยสนับสนุนผู้ที่มีความพิการทางสายตาแบบต่างๆ เมื่อใช้อัตราส่วนคอนทราสต์ของสีเหล่านี้ ผู้ที่มีสายตาเลือนรางระดับปานกลางจะอ่านข้อความบนพื้นหลังได้โดยไม่ต้องใช้เทคโนโลยีความช่วยเหลือพิเศษที่ช่วยเพิ่มคอนทราสต์
ลองดูรูปภาพที่มีชุดสีที่สดใส และเปรียบเทียบว่ารูปภาพจะปรากฏอย่างไรสำหรับบุคคลที่ตาบอดสีรูปแบบใดรูปแบบหนึ่ง
ทางด้านซ้าย รูปภาพแสดงทรายสีรุ้งที่มีสีม่วง แดง ส้ม เหลือง เขียวอควา ฟ้าอ่อน และน้ำเงินเข้ม ทางด้านขวาเป็นลายสีรุ้งที่สว่างขึ้นและหลากสี
ภาวะตาบอดสีเขียว
![ทรายสีรุ้งตามที่คนตาบอดสีเขียวเห็น](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-aea6b53778f67.jpg?authuser=6&hl=th)
![รูปแบบสีรุ้งตามที่บุคคลที่เป็นภาวะตาบอดสีเขียว](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-77926939250f1.jpg?authuser=6&hl=th)
ตาบอดสีเขียว (โดยทั่วไปรู้จักกันในชื่อตาบอดสีเขียว) เกิดในผู้ชาย 1% ถึง 5% และผู้หญิง 0.35% ถึง 0.1%
ผู้ที่เป็นโรคตาบอดสีเขียวมีความไวต่อแสงสีเขียวลดลง ฟิลเตอร์ตาบอดสีนี้จะจำลองลักษณะของโรคตาบอดสีประเภทนี้
ตาบอดสีแดง
![ทรายสีรุ้งตามที่บุคคลที่เป็นโรคตาบอดสีแดง](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-7748879c574cf.jpg?authuser=6&hl=th)
![รูปแบบสีรุ้งตามที่บุคคลที่เป็นโรคตาบอดสีแดง](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-87774aea1888c.jpg?authuser=6&hl=th)
ตาบอดสีแดง (โดยทั่วไปเรียกว่าตาบอดสีแดง) เกิดในผู้ชาย 1.01% ถึง 1.08% และผู้หญิง 0.02% ใน 0.03%
ผู้ที่เป็นโรคตาบอดสีแดงมีความไวต่อแสงสีแดงลดลง ฟิลเตอร์ตาบอดสีนี้จะจำลองลักษณะของโรคตาบอดสีประเภทนี้
ตาบอดสีหรือเห็นสีเดียว
![ทรายสีรุ้งตามที่บุคคลที่เป็นโรคตาบอดสีรุ้ง](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-211c40daaf52a.jpg?authuser=6&hl=th)
![รูปแบบสีรุ้งของคนที่มีภาวะตาบอดสี](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-1ada43bf2cc78.jpg?authuser=6&hl=th)
ภาวะตาบอดสีทุกสีหรือตาบอดสี (หรือตาบอดสีแบบเต็มรูปแบบ) เกิดขึ้นน้อยมาก
ผู้ที่มีอาการตาบอดสีหรือเห็นสีเดียวแทบจะไม่มองเห็นแสงสีแดง เขียว หรือน้ำเงิน ฟิลเตอร์ตาบอดสีนี้จะจำลองลักษณะ ของตาบอดสีประเภทนี้
คำนวณคอนทราสต์ของสี
สูตรคอนทราสต์ของสีใช้ความสว่างสัมพัทธ์ของสีเพื่อช่วยกำหนดคอนทราสต์ซึ่งอาจมีตั้งแต่ 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 สำหรับโหมดมืด
![UI การตั้งค่า Mac](https://web.dev/static/learn/accessibility/color-contrast/image/mac-settings-ui-e918a99520999.png?authuser=6&hl=th)
![ตัวอย่างโค้ดในโหมดสว่าง](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-light-mode-36c15d908ac91.png?authuser=6&hl=th)
![ตัวอย่างโค้ดในโหมดมืด](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-dark-mode-4860136b85b36.png?authuser=6&hl=th)
ต้องการใช้คอนทราสต์
คำค้นหาสื่อ @prefers-contrast
จะตรวจสอบการตั้งค่าระบบปฏิบัติการของผู้ใช้เพื่อดูว่ามีการเปิดหรือปิดคอนทราสต์สูง ดูการเปลี่ยนแปลงของธีมนี้ในการใช้งานจริงโดยเปลี่ยนการตั้งค่าค่ากำหนดคอนทราสต์ แล้วไปที่เบราว์เซอร์ที่รองรับคิวรี่สื่อนี้ (การตั้งค่าโหมดคอนทราสต์ของ Mac และ Windows)
![ตัวอย่างโค้ดในโหมดสว่างที่ไม่มีค่ากำหนดคอนทราสต์](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-light-mode-cf53e5d577358.png?authuser=6&hl=th)
![ตัวอย่างโค้ดในโหมดมืดที่ต้องการคอนทราสต์สูง](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-dark-mode-ef6f55f3ac8c9.png?authuser=6&hl=th)
การเลเยอร์คำค้นหาสื่อ
คุณสามารถใช้คิวรี่สื่อที่เน้นสีได้หลากหลาย เพื่อให้ผู้ใช้มีทางเลือกมากขึ้น ในตัวอย่างนี้ เราจัดกลุ่ม @prefers-color-scheme
และ @prefers-contrast
ไว้ด้วยกัน
![โหมดสว่าง คอนทราสต์ปกติ](https://web.dev/static/learn/accessibility/color-contrast/image/light-mode-regular-contr-7fe03bdb6aba3.png?authuser=6&hl=th)
![โหมดมืด คอนทราสต์ปกติ](https://web.dev/static/learn/accessibility/color-contrast/image/dark-mode-regular-contra-803d4faa3b4.png?authuser=6&hl=th)
![โหมดสว่าง คอนทราสต์สูง](https://web.dev/static/learn/accessibility/color-contrast/image/light-mode-high-contrast-ad3670a5d6f63.png?authuser=6&hl=th)
![โหมดมืด คอนทราสต์สูง](https://web.dev/static/learn/accessibility/color-contrast/image/dark-mode-high-contrast-5e00d4e617fa8.png?authuser=6&hl=th)
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับสีและคอนทราสต์
สีเพียงอย่างเดียวไม่เพียงพอสำหรับตัวระบุ สิ่งใดอีกบ้างที่จะช่วยให้ผู้อ่านระบุองค์ประกอบของ UI ได้