Τα χρώματα που θα επιλέξετε για τη διεπαφή της εφαρμογής σας επηρεάζουν τον βαθμό ευκολίας στην ανάγνωση και την κατανόησή της από τους χρήστες. Η επαρκής χρωματική αντίθεση διευκολύνει την ανάγνωση και την κατανόηση κειμένων και εικόνων.
Εκτός από τα οφέλη προς τους χρήστες με μειωμένη όραση, η επαρκής χρωματική αντίθεση βοηθάει όλους τους χρήστες κατά την προβολή μιας διεπαφής σε συσκευές υπό ακραίες συνθήκες φωτισμού, όπως κατά την απευθείας έκθεση στο ηλιακό φως ή σε κάποια οθόνη με χαμηλή φωτεινότητα.
Υλοποίηση
Κατά την υλοποίηση της διεπαφής χρήστη μιας εφαρμογής, προσδιορίστε τα χρώματα παρασκηνίου ή προσκηνίου με επαρκή χρωματική αντίθεση.
Η "αναλογία αντίθεσης" είναι ο υπολογισμός της διαφοράς σε φωτεινότητα ή ένταση του φωτός που εκπέμπεται, ανάμεσα σε δύο γειτονικά χρώματα όταν προβάλλονται σε μια οθόνη. Αυτή η αναλογία κυμαίνεται από 1 έως 21 (συχνά γράφεται ως 1:1 έως 21:1), όπου οι αύξοντες αριθμοί υποδηλώνουν μεγαλύτερη αντίθεση. Υπάρχουν πολλά διαθέσιμα εργαλεία για τον υπολογισμό της αναλογίας αντίθεσης μεταξύ δύο γειτονικών χρωμάτων, όπως το εργαλείο υπολογισμού της αναλογίας χρωματικής αντίθεσης.
Όταν χρησιμοποιείτε το στοιχείο TextView για την προβολή κειμένου, χρησιμοποιήστε τα στοιχεία android:textColor και android:background για να ορίσετε χρώματα παρασκηνίου και προσκηνίου με μεγάλη αναλογία αντίθεσης. Κατά τη χρήση του στοιχείου Text στο Compose, χρησιμοποιήστε την παράμετρο χρώματος και το στοιχείο Modifier.background για να ορίσετε χρώματα παρασκηνίου και προσκηνίου με μεγάλη αναλογία αντίθεσης.
Το W3C συνιστά:
- Τουλάχιστον 4,5:1 για μικρό κείμενο (κάτω από 18pt για κανονική γραμματοσειρά ή 14pt για έντονη γραμματοσειρά)
- Τουλάχιστον 3,0:1 για μεγάλο κείμενο (18pt και πάνω για κανονική γραμματοσειρά ή 14pt και πάνω για έντονη γραμματοσειρά)
Σημειώσεις σχετικά με τη χρωματική αντίθεση:
-
Κατά τη χρήση των στοιχείων
ImageViewήImageγια την απόδοση γραφικού περιεχομένου ή εικονογραφίας, βεβαιωθείτε ότι η αντίθεση μεταξύ των χρωμάτων προσκηνίου και φόντου πληροί ή υπερβαίνει τις προτεινόμενες αναλογίες. - Οι αναλογίες αντίθεσης υπολογίζονται βάσει του φαινομενικού χρώματος του προσκηνίου και παρασκηνίου ενός στοιχείου όταν τοποθετείται σε άλλα στοιχεία. Εάν ορίζετε χρώματα σε μια μορφή ARGB (τιμές hex για #AARRGGBB), λάβετε υπόψη ότι μη αδιαφανή χρώματα (αυτά με τιμή καναλιού alpha μικρότερη από 255) ενδεχομένως να έχουν διαφορετικό φαινομενικό χρώμα λόγω ανάμιξης με περιεχόμενο που έχει αποδοθεί από κάτω τους.
- Η εξομάλυνση γραμματοσειρών μπορεί να επηρεάσει το φαινομενικό χρώμα περιεχομένου, ειδικά στην περίπτωση περιεχομένου με χαμηλή ένταση γραφής. Για να βελτιωθεί η αναγνωσιμότητα, επιλέξτε έναν συνδυασμό χρωμάτων με μεγαλύτερη αναλογία αντίθεσης ή αυξήστε την ένταση γραφής του περιεχομένου.
Σχεδίαση
Όταν σχεδιάζετε μια διεπαφή χρήστη, επιλέξτε μια παλέτα με επαρκή χρωματική αντίθεση για γειτονικά χρώματα.
- Για κείμενο και εικονογραφία συγκεκριμένα, ακολουθήστε τις οδηγίες W3C για ελάχιστες αναλογίες αντίθεσης
- Εξετάστε το ενδεχόμενο να συμπεριλάβετε ένα θέμα υψηλής αντίθεσης ως επιλογή ή να επιτρέψετε στον χρήστη να επιλέξει χρώματα για το κύριο περιεχόμενο
Για περισσότερες πληροφορίες, ανατρέξτε στις οδηγίες χρώματος και αντίθεσης για την Προσβασιμότητα στο Material Design.
Δοκιμή
Για να ελέγξετε μη χειροκίνητα τη χρωματική αντίθεση σε μια εφαρμογή:
- Ανοίξτε την εφαρμογή.
- Κάντε λήψη ενός στιγμιότυπου οθόνης.
- Στο λογισμικό προβολής ή επεξεργασίας εικόνων, χρησιμοποιήστε ένα "εργαλείο σταγονόμετρου" για να εξαγάγετε ένα εμφανές δείγμα χρωμάτων από το στιγμιότυπο οθόνης.
- Χρησιμοποιήστε ένα εργαλείο υπολογισμού της αναλογίας αντίθεσης για να καθορίσετε την αναλογία αντίθεσης γειτονικών χρωμάτων.
- Εάν η αναλογία αντίθεσης είναι μικρότερη από αυτήν που ορίζουν οι οδηγίες W3C, η διεπαφή ενδεχομένως να επωφεληθεί από την αυξημένη χρωματική αντίθεση.
Τα αυτοματοποιημένα εργαλεία δοκιμών του Android μπορούν να εντοπίσουν πολλά ζητήματα χρωματικής αντίθεσης. Εξετάστε το ενδεχόμενο να χρησιμοποιήσετε το Accessibility Scanner για Android για μη αυτόματη δοκιμή της εφαρμογής σας στη συσκευή. Για αυτοματοποιημένες δοκιμές, ενεργοποιήστε τον έλεγχο προσβασιμότητας σε Espresso και Robolectric.