Những màu bạn chọn cho giao diện ứng dụng sẽ ảnh hưởng đến mức độ dễ dàng mà người dùng có thể đọc và hiểu ứng dụng. Độ tương phản màu phù hợp giúp văn bản và hình ảnh dễ đọc và dễ hiểu hơn.
Không chỉ giúp ích cho những người bị suy giảm thị lực ở những mức độ khác nhau, độ tương phản màu phù hợp cũng giúp ích cho tất cả người dùng khi họ xem giao diện trên các thiết bị trong điều kiện ánh sáng khắc nghiệt, chẳng hạn như khi tiếp xúc với ánh nắng trực tiếp hoặc trên màn hình có độ sáng thấp.
Triển khai
Khi triển khai giao diện người dùng của ứng dụng, bạn phải nêu rõ độ tương phản màu phù hợp cho màu nền trước và màu nền sau.
"Tỷ lệ tương phản" là một phép tính sự chênh lệch về độ chói hoặc cường độ của ánh sáng phát ra, giữa hai màu lân cận khi chúng hiển thị trên màn hình. Tỷ lệ này dao động từ 1 đến 21 (thường được viết là từ 1:1 đến 21:1), trong đó số tăng dần có nghĩa là độ tương phản cao hơn. Có rất nhiều công cụ để tính toán tỷ lệ tương phản của hai màu lân cận, chẳng hạn như máy tính tỷ lệ tương phản màu.
Khi sử dụng chế độ TextView để hiển thị văn bản, hãy sử dụng android:textColor và android:background để xác định màu nền trước và màu nền sau với tỷ lệ tương phản cao. Khi sử dụng chế độ Text trong công cụ Compose, hãy dùng thông số màu và Modifier.background để xác định màu nền trước và màu sau có tỷ lệ tương phản cao.
- Ít nhất là 4,5:1 cho văn bản nhỏ (dưới 18 điểm thông thường hoặc 14 điểm đậm)
- Ít nhất là 3,0:1 cho văn bản lớn (18 điểm thông thường trở lên hoặc 14 điểm đậm trở lên)
Lưu ý về độ tương phản màu:
-
Khi sử dụng chế độ
ImageViewhoặcImageđể hiển thị nội dung phản cảm hoặc hình tượng học, đảm bảo độ tương phản giữa màu nền trước và màu nền sau đáp ứng hoặc vượt tỉ lệ được đề xuất. - Tỷ lệ tương phản được tính dựa trên màu biểu kiến của nền trước và nền sau của một phần tử khi được xếp lớp trên các phần tử khác. Nếu xác định màu ở định dạng ARGB (giá trị thập lục phân của #AARRGGBB), thì xin lưu ý rằng màu không chắn sáng (những màu có giá trị kênh alpha ít hơn 255) có thể có một màu biểu kiến khác do pha trộn với nội dung được hiển thị bên dưới màu đó.
- Việc làm mịn phông chữ và khử răng cưa có thể ảnh hưởng đến màu biểu kiến của một số nội dung, đặc biệt là nội dung có độ rộng nét thấp. Để cải thiện khả năng đọc, hãy chọn kết hợp màu với tỷ lệ tương phản lớn hơn hoặc tăng độ rộng nét của nội dung.
Thiết kế
Khi thiết kế giao diện người dùng, hãy cân nhắc chọn bảng màu có độ tương phản màu phù hợp cho những màu liền kề.
- Đối với văn bản và hình tượng học cụ thể, hãy tuân thủ nguyên tắc của W3C để có tỷ lệ tương phản thấp nhất
- Cân nhắc thêm một chủ đề có độ tương phản cao ở dạng một lựa chọn hoặc cho phép người dùng chọn màu cho nội dung chính
Để biết thêm thông tin, hãy tham khảo Nguyên tắc về độ tương phản và màu trong chế độ Hỗ trợ tiếp cận bằng ngôn ngữ Material Design.
Thử nghiệm
Cách kiểm tra độ tương phản màu trong một ứng dụng theo cách thủ công:
- Mở ứng dụng cần xác minh.
- Chụp ảnh màn hình.
- Trong phần mềm xem hoặc chỉnh sửa hình ảnh, hãy sử dụng "công cụ chọn màu" để trích xuất một mẫu màu biểu kiến trong ảnh chụp màn hình.
- Sử dụng máy tính tỷ lệ tương phản để xác định tỷ lệ tương phản của màu liền kề.
- Nếu tỷ lệ phương phản thấp hơn so với quy định của nguyên tắc W3C, thì giao diện có thể được hưởng lợi ích từ độ tương phản màu tăng.
Các công cụ kiểm tra tự động của Android có thể phát hiện nhiều vấn đề về độ tương phản màu. Hãy cân nhắc việc sử dụng Trình quét hỗ trợ tiếp cận cho Android để kiểm tra ứng dụng của bạn trên thiết bị theo cách thủ công. Để tiến hành kiểm tra tự động, hãy bật tính năng kiểm tra khả năng hỗ trợ tiếp cận trong Espresso và Robolectric.