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

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

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

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

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

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

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

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

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

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

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

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

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

การใช้สี

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

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

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

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

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

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

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

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

วันที่

เปรียบเทียบโหมดสว่างและโหมดมืด

วันที่

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

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

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

วันที่

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

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

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

วันที่

วันที่

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

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