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

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

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

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

กำลังรับรู้สี

คุณทราบหรือไม่ว่าวัตถุไม่มีสี แต่สะท้อนความยาวคลื่นของ ไฟ? เมื่อคุณเห็นสี ดวงตาของคุณจะได้รับและประมวลผลความยาวคลื่นเหล่านั้น และ ให้แปลงเป็นสี

สายตากำลังดูวงล้อสี

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

โทนสีเป็นวิธีอธิบายสีในเชิงคุณภาพ เช่น แดง เขียว หรือน้ำเงิน โดยที่แต่ละสีจะมีจุดที่เฉพาะเจาะจงบนสเปกตรัมของสี โดยมีค่าต่างๆ ตั้งแต่ จาก 0 ถึง 360 โดยสีแดงที่ 0 สีเขียวอยู่ที่ 120 และสีน้ำเงินที่ 240

ความอิ่มตัวคือความเข้มของสี ซึ่งวัดเป็นเปอร์เซ็นต์ตั้งแต่ 0% เป็น 100% สีที่มีความอิ่มตัวแบบเต็ม (100%) จะสดใสมาก ในขณะที่สี ที่ไม่อิ่มตัว (0%) จะเป็นโทนสีเทาหรือขาวดำ

ความสว่างคืออักขระสว่างหรือมืดของสี ซึ่งวัดเป็นเปอร์เซ็นต์ในช่วง จาก 0% (สีดำ) เป็น 100% (สีขาว)

การวัดคอนทราสต์ของสี

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

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

วันที่ ทรายสีรุ้งแบบเดิม
รูปภาพโดย Alexander Grey จาก Unsplash
รูปแบบสายรุ้งแบบเดิม
รูปภาพโดย Clark Van Der Beken บน Unsplash

ทางด้านซ้าย รูปภาพจะแสดงทรายสีรุ้งโดยมีสีม่วง แดง ส้ม เหลือง เขียวอควา ฟ้าอ่อน และน้ำเงินเข้ม ทางด้านขวาเป็นลวดลายสายรุ้งหลากสีสว่างขึ้น

ภาวะตาบอดสีเขียว

ทรายสีรุ้งในสายตาของผู้มีภาวะตาบอดสีเขียว
รูปแบบสายรุ้งที่บุคคลที่มีอาการตาบอดสีเขียว

ตาบอดสีเขียว (หรือที่เรียกกันโดยทั่วไปว่าตาบอดสีเขียว) เกิดในผู้ชาย 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.5 พิกเซล โลโก้และองค์ประกอบตกแต่งได้รับการยกเว้นจากสีเหล่านี้ ข้อกำหนดคอนทราสต์

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

การใช้สี

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

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

การตรวจสอบผลิตภัณฑ์ดิจิทัลที่มีโทนสีเทาเป็นวิธีที่ดีในการตรวจหาปัญหาสีที่อาจเกิดขึ้นได้อย่างรวดเร็ว

คำค้นหาสื่อที่เน้นสี

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

ตัวอย่างเช่น เมื่อใช้คิวรี่สื่อ @prefers-color-scheme คุณสามารถสร้างธีมมืด ซึ่งเป็นประโยชน์ต่อผู้ที่เป็นอาการกลัวแสงหรือไวต่อแสง คุณยังสร้างธีมคอนทราสต์สูงได้ด้วย @prefers-contrast ซึ่งรองรับผู้ที่มีความบกพร่องสีและความไวคอนทราสต์

ต้องการรูปแบบสี

การรองรับเบราว์เซอร์

  • Chrome: 76
  • ขอบ: 79
  • Firefox: 67
  • Safari: 12.1

แหล่งที่มา

คิวรี่สื่อ @prefers-color-scheme อนุญาตให้ผู้ใช้เลือกหลอดไฟหรือ เว็บไซต์หรือแอปเวอร์ชันธีมสีเข้มที่ผู้ใช้กำลังเข้าชม คุณดูข้อมูลนี้ได้ เปลี่ยนธีมด้วยการเปลี่ยนการตั้งค่ากำหนดสว่าง/มืดและ การไปยังเบราว์เซอร์ที่รองรับคิวรี่สื่อนี้ ตรวจสอบ Mac และ วิธีการของ Windows สำหรับโหมดมืด

วันที่ UI การตั้งค่า Mac
การตั้งค่าทั่วไปของ macOS สำหรับลักษณะที่ปรากฏ
เปรียบเทียบโหมดสว่างและโหมดมืด

วันที่ ตัวอย่างโค้ดในโหมดสว่าง
โหมดสว่าง
ตัวอย่างโค้ดในโหมดมืด
โหมดมืด

ต้องการคอนทราสต์

การรองรับเบราว์เซอร์

  • Chrome: 96.
  • ขอบ: 96
  • Firefox: 101
  • Safari: 14.1

แหล่งที่มา

@prefers-contrast คำค้นหาสื่อจะตรวจสอบการตั้งค่าระบบปฏิบัติการของผู้ใช้เพื่อดูว่ามีการเปิดคอนทราสต์สูงไว้หรือไม่ หรือปิด คุณดูการเปลี่ยนแปลงของธีมนี้ได้ด้วยการเปลี่ยนคอนทราสต์ การตั้งค่ากำหนด และไปยังเบราว์เซอร์ที่สนับสนุนคิวรี่สื่อนี้ (การตั้งค่าโหมดคอนทราสต์ของ Mac และ Windows)

เปรียบเทียบคอนทราสต์สูงและปกติ

วันที่ ตัวอย่างโค้ดในโหมดสว่างที่ไม่มีค่ากำหนดคอนทราสต์
โหมดสว่าง ไม่ต้องเลือกคอนทราสต์
ตัวอย่างโค้ดในโหมดมืดที่มีค่ากำหนดคอนทราสต์สูง
โหมดมืด ต้องการคอนทราสต์สูง

การกำหนดเลเยอร์คิวรี่สื่อ

คุณสามารถใช้คิวรี่สื่อที่เน้นสีได้หลากหลายเพื่อเพิ่ม ตัวเลือกทั้งหมด ในตัวอย่างนี้ เราซ้อน @prefers-color-scheme และ @prefers-contrast

เปรียบเทียบทั้งสีและคอนทราสต์

วันที่ โหมดสว่าง คอนทราสต์ปกติ
โหมดสว่าง ไม่ต้องเลือกคอนทราสต์
โหมดมืด คอนทราสต์ปกติ
โหมดมืด ไม่มีค่ากำหนดคอนทราสต์
วันที่ โหมดสว่าง คอนทราสต์สูง
โหมดสว่าง ต้องการคอนทราสต์สูง
โหมดมืด คอนทราสต์สูง
โหมดมืด ต้องการคอนทราสต์สูง

ตรวจสอบความเข้าใจ

ทดสอบความรู้เรื่องสีและคอนทราสต์

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

รูปแบบ
ยังไม่ใช่ รูปแบบเพียงอย่างเดียวไม่เพียงพอที่จะช่วยให้ผู้ใช้ระบุองค์ประกอบ UI ได้
ข้อความ
ยังไม่ใช่ ข้อความเพียงอย่างเดียวอาจไม่เพียงพอที่จะช่วยให้ผู้ใช้ระบุองค์ประกอบ UI ได้
Icon
ยังไม่ใช่ ไอคอนเพียงอย่างเดียวไม่เพียงพอที่จะช่วยให้ผู้ใช้ระบุองค์ประกอบ UI ได้
ทุกข้อที่กล่าวมา
ได้ ตัวระบุอย่างน้อย 2 ตัวจะช่วยให้ผู้ใช้ระบุองค์ประกอบ UI ได้