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

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

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

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

รับรู้สี

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

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

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

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

ความสว่างคือลักษณะสีอ่อนหรือเข้มของสี ซึ่งวัดเป็นเปอร์เซ็นต์ตั้งแต่ 0% (ดำ) ถึง 100% (ขาว)

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

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

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

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

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

ตาบอดสีเขียว (ที่รู้จักกันโดยทั่วไป) เกิดขึ้นในผู้ชาย 1% ถึง 5% และผู้หญิง 0.35% ถึง 0.1%

ผู้ที่เป็นโรคตาบอดสีเขียวจะมีความไวต่อแสงสีเขียวน้อยลง ฟิลเตอร์ภาวะตาบอดสีนี้จำลองลักษณะที่ภาวะตาบอดสีประเภทนี้อาจเป็น

ภาวะตาบอดสีแดง

Protanopia (ที่รู้จักกันโดยทั่วไปว่าตาบอดสีแดง) เกิดขึ้นในผู้ชาย 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, เครื่องมือวิเคราะห์คอนทราสต์ของสี, Leonardo และ เครื่องมือเลือกสีของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะบอกอัตราส่วนคอนทราสต์ของสีและให้คำแนะนำเพื่อช่วย สร้างคู่สีและจานสีที่ครอบคลุมมากที่สุดได้อย่างรวดเร็ว

การใช้สี

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

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

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

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

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

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

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

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

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

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

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

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

เลเยอร์การค้นหาสื่อ

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

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