สีที่คุณเลือกให้กับอินเทอร์เฟซของแอปส่งผลต่อความยากง่ายในการอ่านและทำความเข้าใจอินเทอร์เฟซของผู้ใช้ สีที่ตัดกันชัดพอจะช่วยให้ผู้ใช้อ่านและทำความเข้าใจข้อความและรูปภาพได้ง่ายขึ้น
นอกจากคอนทราสต์ของสีที่เพียงพอจะมีประโยชน์แก่ผู้ใช้ที่มีความบกพร่องทางสายตาหลากหลายแบบแล้ว ยังช่วยผู้ใช้ทุกคนในการดูอินเทอร์เฟซบนอุปกรณ์ในสภาวะแวดล้อมที่มีแสงจ้าได้ เช่น เมื่ออยู่กลางแดดหรือการใช้จอแสดงผลที่มีความสว่างน้อย
การใช้งาน
เมื่อสร้างอินเทอร์เฟซผู้ใช้ของแอป ให้กำหนดสีพื้นหลังและพื้นหน้าที่มีคอนทราสต์ของสีที่เพียงพอ
"อัตราส่วนคอนทราสต์" คือการคำนวณความแตกต่างด้านความสว่างหรือความเข้มของแสงที่ปล่อยออกมาระหว่างสีข้างเคียง 2 สีเมื่อแสดงบนจอแสดงผล ซึ่งอัตราส่วนนี้มีช่วงตั้งแต่ 1 ถึง 21 (มักเขียนเป็น 1:1 ถึง 21:1) โดยตัวเลขที่เพิ่มขึ้นหมายถึงคอนทราสต์ที่สูงขึ้น คุณสามารถเครื่องมือมากมายที่จะช่วยคำนวณอัตราส่วนคอนทราสต์ของสีข้างเคียง 2 สี เช่น เครื่องคำนวณอัตราส่วนคอนทราสต์ของสีนี้
เมื่อใช้ TextView เพื่อแสดงข้อความ ให้ใช้ android:textColor และ android:background เพื่อกำหนดสีพื้นหน้าและพื้นหลังที่มีอัตราส่วนคอนทราสต์สูง เมื่อใช้ Text ในการเขียน ให้ใช้พารามิเตอร์สีและ Modifier.background เพื่อกำหนดสีพื้นหน้าและพื้นหลังที่มีอัตราส่วนคอนทราสต์สูง
W3C แนะนำดังนี้
- อย่างน้อย 4.5:1 สำหรับข้อความขนาดเล็ก (ต่ำกว่า 18 จุดสำหรับตัวอักษรปกติ หรือ 14 จุดสำหรับตัวหนา)
- อย่างน้อย 3.0:1 สำหรับข้อความขนาดใหญ่ (ตั้งแต่ 18 จุดขึ้นไปสำหรับตัวอักษรปกติ หรือตั้งแต่ 14 จุดขึ้นไปสำหรับตัวหนา)
หมายเหตุเกี่ยวกับคอนทราสต์ของสี
-
เมื่อใช้
ImageViewหรือImageเพื่อแสดงเนื้อหาแบบกราฟิกหรือระบบการตีความสัญลักษณ์ ให้ตรวจสอบว่าคอนทราสต์ระหว่างสีพื้นหน้าและสีพื้นหลังตรงหรือเกินกว่าอัตราส่วนที่แนะนำ - อัตราส่วนคอนทราสต์วัดจากสีที่เด่นชัดของพื้นหน้าและพื้นหลังขององค์ประกอบเมื่อวางซ้อนบนองค์ประกอบอื่นๆ หากกำหนดสีในรูปแบบ ARGB (เลขฐานสิบหกของ #AARRGGBB) โปรดทราบว่าสีที่ไม่ทึบแสง (สีที่มีค่า Alpha-Channel น้อยกว่า 255) อาจมีสีที่เด่นชัดเป็นสีอื่นเพราะมีการผสมกลมกลืนกับเนื้อหาที่แสดงอยู่ข้างใต้
- การทำให้แบบอักษรเรียบและการลบรอยหยักอาจส่งผลต่อสีที่เด่นชัดของเนื้อหาบางส่วน โดยเฉพาะอย่างยิ่งเนื้อหาที่เส้นขอบมีความกว้างน้อย หากต้องการให้อ่านง่ายขึ้น ให้เลือกการผสมสีที่มีอัตราส่วนคอนทราสต์สูงขึ้นหรือเพิ่มความกว้างของเส้นขอบของเนื้อหา
การออกแบบ
เมื่อออกแบบอินเทอร์เฟซผู้ใช้ ให้พิจารณาเลือกเมนูสีที่มีคอนทราสต์ของสีเพียงพอสำหรับสีที่อยู่ติดกัน
- สำหรับข้อความและระบบการตีความสัญลักษณ์โดยเฉพาะ ให้ทำตามหลักเกณฑ์ของ W3C สำหรับอัตราส่วนคอนทราสต์ขั้นต่ำ
- พิจารณารวมธีมแบบคอนทราสต์สูงเป็นตัวเลือก หรือให้ผู้ใช้เลือกสีสำหรับเนื้อหาหลักได้
สำหรับข้อมูลเพิ่มเติม โปรดดูที่หลักเกณฑ์เกี่ยวกับสีและคอนทราสต์สำหรับความสามารถเข้าถึงได้ง่ายของ Material Design
การทดสอบ
วิธีตรวจสอบคอนทราสต์ของสีด้วยตนเองในแอป
- เปิดแอป
- จับภาพหน้าจอ
- ใช้ "เครื่องมือหลอดดูดสี" ในซอฟต์แวร์ที่ใช้ดูหรือแก้ไขภาพเพื่อแยกตัวอย่างสีที่ชัดเจนจากภาพหน้าจอ
- ใช้เครื่องคำนวณอัตราส่วนคอนทราสต์เพื่อระบุอัตราส่วนคอนทราสต์ของสีที่อยู่ติดกัน
- หากอัตราส่วนคอนทราสต์น้อยกว่าที่กำหนดไว้ตามหลักเกณฑ์ W3C อินเทอร์เฟซอาจได้รับประโยชน์จากคอนทราสต์ของสีที่เพิ่มขึ้น
เครื่องมือทดสอบอัตโนมัติของ Android สามารถตรวจจับปัญหาคอนทราสต์ของสีได้หลายแบบ ลองใช้เครื่องตรวจการเข้าถึงสำหรับ Android เพื่อทดสอบแอปในอุปกรณ์ด้วยตนเอง สำหรับการทดสอบอัตโนมัติ ให้เปิดการตรวจสอบการเข้าถึงใน Espresso และ Robolectric