คุณอาจคิดว่าทุกคนรับรู้ถึงสีหรือการอ่านออกง่ายของข้อความเหมือนกับคุณ วิธีที่เรารับรู้สีจะขึ้นอยู่กับสภาพแวดล้อม (แสงน้อยหรือแสงจ้า) และความสามารถในการมองเห็นของเรา คุณหรือผู้ใช้อาจเป็นหนึ่งในคนหลายล้านคนที่ตาบอดสีหรือสายตาเลือนราง
เพื่อสนับสนุนผู้ที่มีความพิการทางสายตาหลากหลายแบบ กลุ่ม WAI ได้สร้างสูตรคอนทราสต์ของสีเพื่อให้ข้อความและพื้นหลังมีความคมชัดเพียงพอ เมื่อใช้อัตราส่วนคอนทราสต์ของสีเหล่านี้ ผู้ที่มีสายตาเลือนรางระดับปานกลางจะอ่านข้อความบนพื้นหลังได้โดยไม่ต้องใช้เทคโนโลยีความช่วยเหลือพิเศษที่ช่วยเพิ่มคอนทราสต์
โปรดสังเกตความแตกต่างของอัตราส่วนคอนทราสต์ที่แสดงในรูปที่ 1
อัตราส่วนคอนทราสต์ 4.5:1 คือค่าขั้นต่ำที่กำหนดซึ่งกำหนดโดยหลักเกณฑ์เกี่ยวกับการเข้าถึงเนื้อหาเว็บ (WCAG) 2.0 การปันส่วนลักษณะนี้ ได้รับการเลือกเพราะเป็นการชดเชยความไวต่อคอนทราสต์ที่สูญเสียไป ซึ่งมักจะเป็น ผู้ใช้ที่สูญเสียการมองเห็น เทียบเท่ากับการมองเห็นประมาณ 20/40
ขอย้ำอีกครั้งว่า 4.5:1 เป็นเพียงอัตราขั้นต่ำ ไปที่ระดับ AAA และสร้างเนื้อหาที่มีคอนทราสต์ 7:1 เพื่อสนับสนุนผู้ใช้ที่มองเห็นเลือนรางหรือตาบอดสีอื่นๆ
คุณตรวจสอบคอนทราสต์ของสีได้ด้วยการตรวจสอบการช่วยเหลือพิเศษของ Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บ
อัลกอริทึมคอนทราสต์การรับรู้ขั้นสูง
อัลกอริทึมคอนทราสต์ขั้นสูง (Advanced Perceptual Cได้ง่ายขึ้น Algorithm หรือ APCA) เป็นวิธีการคำนวณคอนทราสต์ที่อิงตามการวิจัยสมัยใหม่เกี่ยวกับการรับรู้สี
APCA ขึ้นอยู่กับบริบทมากกว่าระดับ AA และ AAA ของ WCAG
ในรูปแบบนี้ ความคมชัดจะคำนวณตามคุณลักษณะต่อไปนี้:
- คุณสมบัติเชิงพื้นที่ (น้ำหนักตัวอักษรและขนาดข้อความ)
- สีข้อความ (ความแตกต่างที่รับรู้ได้ระหว่างข้อความและพื้นหลัง)
- บริบท (แสงแวดล้อม สภาพแวดล้อม และจุดประสงค์ของข้อความ)
Chrome มีฟีเจอร์ทดลองเพื่อแทนที่หลักเกณฑ์เกี่ยวกับอัตราส่วนคอนทราสต์ AA/AAA ด้วย APCA
ถ่ายทอดข้อมูลสำคัญที่มีมากกว่าสี
เมื่อใดก็ตามที่คุณสื่อสารข้อมูลสำคัญให้แก่ผู้ใช้ ให้ใช้ข้อความหรือข้อความแสดงแทนนอกเหนือจากลักษณะของภาพเมื่อแชร์ข้อมูลที่สำคัญ ตัวบ่งชี้ที่เป็นภาพรวมถึงสี รูปแบบ รูปภาพ การจัดรูปแบบแบบอักษร และภาษาที่มีทิศทาง
เช่น คุณอาจมีแบบฟอร์มติดต่อซึ่งระบุข้อมูลที่ไม่ถูกต้องด้วยการขีดเส้นใต้เป็นสีแดง ซึ่งเครื่องหมายสีนี้จะไม่บอกโปรแกรมอ่านหน้าจอหรือ ผู้ใช้ที่มีความบกพร่องทางการมองเห็นสีว่ามีบางสิ่งไม่ทำงาน ผู้ใช้อาจสงสัยว่าทำไมการส่งแบบฟอร์มจึงไม่ได้ผลและเลิกใช้ไป
อย่าลืมแจ้งเตือนผู้ใช้เกี่ยวกับข้อผิดพลาดที่เฉพาะเจาะจงได้หลายวิธี ตัวอย่างเช่น คุณสามารถเพิ่มข้อความแสดงข้อผิดพลาดเพื่อประกาศว่าข้อมูลที่ป้อนนั้นไม่ถูกต้อง และเหตุผล นอกจากนี้ คุณยังสามารถเพิ่มข้อความช่วยเหลือว่าการป้อนข้อมูลที่เหมาะสมควรมีลักษณะอย่างไร
คุณยังคงขีดเส้นใต้อินพุตที่ไม่ถูกต้องเป็นสีแดงได้ ตราบใดที่ยังมีคำแนะนำอื่นๆ ที่ไม่มีภาพ
หากคุณใช้สีในอินเทอร์เฟซเป็นหลัก คุณสามารถดูปัญหาคอนทราสต์ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
เพิ่มคอนทราสต์และสลับสี
ผู้ที่สายตาเลือนราง โหมดคอนทราสต์สูงช่วยให้สำรวจเนื้อหาในหน้าได้ง่ายขึ้น คุณตั้งค่าคอนทราสต์สูงได้หลายวิธี
ทั้ง macOS และ Windows มีวิธีเพิ่มระดับคอนทราสต์ในระบบปฏิบัติการ
ผู้ใช้อาจเลือกสลับสีพื้นหน้าและสีพื้นหลังได้ด้วย (เช่น ใน macOS) ซึ่งมีประโยชน์มากสำหรับเว็บไซต์และแอปที่ไม่รองรับโหมดมืด
ในฐานะนักพัฒนาซอฟต์แวร์ คุณทดสอบเพื่อให้มั่นใจว่าอินเทอร์เฟซจะยังมองเห็นและใช้งานได้โดยเปิดการตั้งค่าเหล่านี้และยืนยันความสามารถในการใช้งานด้วยตนเอง
เช่น แถบนำทางอาจใช้สีพื้นหลังบางๆ เพื่อระบุหน้าที่เลือก หากคุณดูในโหมดคอนทราสต์สูง รายละเอียดดังกล่าวจะหายไปทั้งหมด และจะช่วยให้ผู้อ่านเข้าใจได้ว่าหน้าใดที่ใช้งานอยู่
หากคุณมีคุณสมบัติตรงตามระดับ AA หรือคอนทราสต์ที่สูงกว่า เนื้อหาควรจะยังทำงานได้ตามที่คาดหวังไว้เมื่อมีการกลับสีหรือมีความคมชัดสูง อย่างไรก็ตาม ก็ยังควรทดสอบเพื่อให้มั่นใจว่า ประสบการณ์การใช้งานเป็นไปตามที่คาดไว้