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

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

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

การใช้งาน

เมื่อสร้างอินเทอร์เฟซผู้ใช้ของแอป ให้กำหนดสีพื้นหลังและพื้นหน้าที่มีคอนทราสต์ของสีที่เพียงพอ

"อัตราส่วนคอนทราสต์" คือการคำนวณความแตกต่างด้านความสว่างหรือความเข้มของแสงที่ปล่อยออกมาระหว่างสีข้างเคียง 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

การทดสอบ

วิธีตรวจสอบคอนทราสต์ของสีด้วยตนเองในแอป

1. เปิดแอป
2. จับภาพหน้าจอ
3. ใช้ "เครื่องมือหลอดดูดสี" ในซอฟต์แวร์ที่ใช้ดูหรือแก้ไขภาพเพื่อแยกตัวอย่างสีที่ชัดเจนจากภาพหน้าจอ
4. ใช้เครื่องคำนวณอัตราส่วนคอนทราสต์เพื่อระบุอัตราส่วนคอนทราสต์ของสีที่อยู่ติดกัน
5. หากอัตราส่วนคอนทราสต์น้อยกว่าที่กำหนดไว้ตามหลักเกณฑ์ W3C อินเทอร์เฟซอาจได้รับประโยชน์จากคอนทราสต์ของสีที่เพิ่มขึ้น

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