Άρθρο
Εξαγωγή προσβάσιμης παλέτας χρωμάτων από εικόνα
Μια φωτογραφία ή στοιχείο brand περιέχει συχνά τον σπόρο ενός πλήρους χρωματικού συστήματος. Η εξαγωγή αυτού του σπόρου, η διαμόρφωσή του σε παλέτα που μπορεί να χρησιμοποιηθεί, και η επαλήθευσή του έναντι προτύπων προσβασιμότητας απαιτεί τρία ξεχωριστά βήματα. Αυτό το άρθρο καλύπτει καθένα με σειρά: πώς λειτουργεί η εξαγωγή παλέτας από κάτω, πώς να επιλέξετε και να προσαρμόσετε χρώματα για πρακτική χρήση, πώς να ελέγξετε την αντίθεση έναντι ορίων WCAG, και πώς να εντοπίσετε τα ζεύγη που συγχωνεύονται για χρήστες με αχρωματοψία.
Πώς εξάγεται μια παλέτα: δειγματοληψία pixels και ποσοτικοποίηση χρωμάτων
Κάθε ψηφιακή εικόνα είναι ένα πλέγμα pixels, καθένα από τα οποία φέρει μια χρωματική τιμή σε ένα χώρο όπως το RGB. Ένα πρόγραμμα εξαγωγής παλέτας δεν επιθεωρεί κάθε pixel ξεχωριστά: μια φωτογραφία 2 megapixels περιέχει 2 εκατομμύρια σημεία δεδομένων, που θα ήταν αργά να επεξεργαστούν και θα επέστρεφαν χιλιάδες ελαφρώς διαφορετικές αποχρώσεις αντί για ένα χρήσιμο σύνολο. Αντίθετα, το εργαλείο δειγματοληπτεί το πλέγμα pixels σε τακτά διαστήματα, συλλέγοντας ένα αντιπροσωπευτικό υποσύνολο. Αυτό το υποσύνολο τροφοδοτείται στη συνέχεια σε έναν αλγόριθμο ποσοτικοποίησης χρωμάτων. Η πιο κοινή προσέγγιση ομαδοποιεί παρόμοια χρώματα χρησιμοποιώντας μέθοδο συσταδοποίησης, που μερικές φορές ονομάζεται median-cut ή διαμέριση τύπου k-means. Ο αλγόριθμος τοποθετεί κάθε δειγματοληπτημένο pixel σε έναν από έναν σταθερό αριθμό κάδων βάσει χρωματικής ομοιότητας, και στη συνέχεια υπολογίζει το μέσο χρώμα κάθε κάδου. Το αποτέλεσμα είναι μια μικρή λίστα, συνήθως 4 ως 16 χρώματα, που μαζί αντιπροσωπεύουν τους κυρίαρχους οπτικούς τόνους της εικόνας. Χρώματα που εμφανίζονται μόνο σε μικρές απομονωμένες περιοχές μπορεί να χαθούν, κάτι που είναι αναμενόμενη συμπεριφορά και όχι ελάττωμα.
Από αρχικά κυρίαρχα χρώματα σε χρήσιμη παλέτα
Η αρχική έξοδος ενός προγράμματος εξαγωγής παλέτας είναι μια λίστα χρωμάτων κατά συχνότητα, αλλά η συχνότητα από μόνη της δεν φτιάχνει παλέτα. Μια φωτογραφία δάσους θα επιστρέψει αρκετούς πράσινους τόνους που είναι πολύ παρόμοιοι για να χρησιμοποιηθούν σε UI ως διακριτές τονίσεις. Η πρακτική εργασία είναι η επιλογή και η προσαρμογή. Ξεκινήστε εντοπίζοντας ένα χρώμα ως κύριο: το πιο διακριτό και λιγότερο ουδέτερο. Από τα υπόλοιπα χρώματα, αναζητήστε το πολύ δύο που αντιτίθενται στο κύριο και μεταξύ τους. Αυτά γίνονται οι τονισμοί σας. Όλα τα άλλα, συμπεριλαμβανομένων των αποκορεσμένων τόνων που επιστρέφει συχνά ο εξαγωγέας από σκιές και μεσαίους τόνους, μπορούν να χρησιμεύσουν ως ουδέτερα για φόντα και περιγράμματα. Μόλις έχετε αυτή τη χονδρική δομή, πιθανότατα θα χρειαστεί να προσαρμόσετε μεμονωμένες τιμές. Το εργαλείο color-converter σας επιτρέπει να εξετάσετε κάθε χρώμα σε hex, RGB και HSL. Το HSL είναι ιδιαίτερα χρήσιμο εδώ: μπορείτε να κρατάτε την απόχρωση σταθερή και να μετατοπίζετε τη φωτεινότητα ή τον κορεσμό για να δημιουργήσετε μια πιο σφιχτή ή χαλαρή οικογένεια χωρίς να αλλάξετε την ίδια οικογένεια χρωμάτων.
Έλεγχος αντίθεσης: κατώφλια WCAG για ευανάγνωστο κείμενο
Μόλις έχετε υποψήφια χρώματα για κείμενο και φόντο, πρέπει να ελέγξετε αν ο συνδυασμός είναι ευανάγνωστος. Οι Web Content Accessibility Guidelines (WCAG) ορίζουν λόγο αντίθεσης για αυτόν τον σκοπό. Ο λόγος συγκρίνει τη σχετική φωτεινότητα δύο χρωμάτων: τιμή 1:1 σημαίνει καθόλου αντίθεση (ίδιο χρώμα σε ίδιο χρώμα), και 21:1 είναι το μέγιστο (μαύρο σε λευκό). Το WCAG 2.1 Επίπεδο AA απαιτεί λόγο τουλάχιστον 4.5:1 για κανονικό μέγεθος σώματος κειμένου, και 3:1 για μεγάλο κείμενο (18pt ή 14pt έντονο). Το Επίπεδο AAA ορίζει υψηλότερα κατώφλια 7:1 και 4.5:1 αντίστοιχα. Δεν χρειάζεται να υπολογίσετε τη φωτεινότητα με το χέρι. Το βασικό στοιχείο είναι ότι ένα ζεύγος χρωμάτων που φαίνεται μια χαρά σε εσάς υπό καλό φωτισμό μπορεί να βρίσκεται κάτω από 4.5:1 στην οθόνη, και η οδηγία υπάρχει ακριβώς για αυτή την περίπτωση. Αφού εξαγάγετε και προσαρμόσετε χρώματα, δοκιμάστε κάθε ζεύγος κειμένου-σε-φόντο που σχεδιάζετε να χρησιμοποιήσετε. Ένα γκρι μεσαίου τόνου που διαβάζεται καλά σε λευκό μπορεί να αποτύχει εντελώς σε ανοιχτό μπεζ φόντο από την εξαγμένη παλέτα σας.
Αχρωματοψία: προσομοίωση εμφάνισης ζευγών σε επηρεαζόμενους χρήστες
Περίπου 1 στους 12 άνδρες και 1 στις 200 γυναίκες έχουν κάποια μορφή διαταραχής όρασης χρωμάτων. Ο πιο συνηθισμένος τύπος είναι η δευτερανωπία (μειωμένη ευαισθησία στο πράσινο), ακολουθούμενη από την πρωτανωπία (μειωμένη ευαισθησία στο κόκκινο). Η τριτανωπία (μειωμένη ευαισθησία στο μπλε-κίτρινο) είναι πιο σπάνια. Για κάθε τύπο, το οπτικό σύστημα αντιστοιχίζει ορισμένα μήκη κύματος στο ίδιο αντιληπτό χρώμα που οι μη επηρεαζόμενοι θεατές βλέπουν ως διακριτά. Το πρακτικό πρόβλημα για μια παλέτα είναι ότι δύο χρώματα που εμφανίζονται σαφώς διαφορετικά υπό κανονική όραση μπορούν να συγχωνευτούν στον ίδιο τόνο για έναν χρήστη με αχρωματοψία, καθιστώντας τα άχρηστα για μεταφορά διάκρισης, για παράδειγμα χρησιμοποιώντας μόνο κόκκινο και πράσινο για σήμανση επιτυχίας και σφάλματος. Η εκτέλεση προσομοίωσης αχρωματοψίας σάς δείχνει πώς φαίνεται η παλέτα όταν τα επηρεαζόμενα κανάλια συμπιέζονται. Τα ζεύγη που συγχωνεύονται σε σχεδόν πανομοιότυπο γκρι ή καφέ είναι αυτά που πρέπει να επανεξεταστούν: είτε αυξήστε τη διαφορά φωτεινότητας μεταξύ τους ώστε η αντίθεση να παραμένει ακόμα και χωρίς τη διάκριση απόχρωσης, είτε προσθέστε δευτερεύον σήμα (σχήμα, ετικέτα, μοτίβο) ώστε το χρώμα να μην είναι το μόνο σήμα.
Τοπική εκτέλεση: color-palette, color-blindness και color-converter
Και τα τρία βήματα που περιγράφονται σε αυτό το άρθρο μπορούν να ολοκληρωθούν χωρίς να αποστείλετε την εικόνα ή τα χρώματα brand σας σε οποιονδήποτε διακομιστή. Το εργαλείο color-palette εκτελείται εξ ολοκλήρου στον browser: ρίχνετε μια εικόνα, δειγματοληπτεί τα pixels τοπικά και επιστρέφει τα κυρίαρχα χρώματα ως τιμές hex. Κανένα αρχείο δεν μεταδίδεται. Το εργαλείο color-converter δέχεται έναν κωδικό hex και δείχνει το ίδιο χρώμα σε RGB και HSL ώστε να μπορείτε να κάνετε στοχευμένες προσαρμογές στη φωτεινότητα ή τον κορεσμό παραμένοντας στην ίδια οικογένεια απόχρωσης. Τόσο το hex όσο και οι μετατραπείσες τιμές υπάρχουν μόνο στη σελίδα. Το εργαλείο color-blindness λειτουργεί αντίστροφα: ρίχνετε μια εικόνα και αποδίδει προσομοιώσεις δευτερανωπίας, πρωτανωπίας και τριτανωπίας αυτής της εικόνας, υπολογισμένες στον browser. Για να ελέγξετε μια παλέτα αντί για φωτογραφία, εξάγετε ή τραβήξτε στιγμιότυπο των δειγμάτων σας ως εικόνα πρώτα, και μετά ρίξτε την στον προσομοιωτή. Χρησιμοποιώντας τα τρία εργαλεία σε σειρά, εξαγωγή από την εικόνα, προσαρμογή στο color-converter, και στη συνέχεια εξαγωγή μιας εικόνας δείγματος και επαλήθευσή της στο color-blindness, καλύπτει την πλήρη ροή εργασίας που περιγράφεται παραπάνω. Η εικόνα σας παραμένει στη συσκευή σας καθ' όλη τη διάρκεια, κάτι που έχει σημασία αν η πηγή φωτογραφία περιέχει αδημοσίευτο brand ή ταυτότητα πελάτη που δεν έχει ακόμα κυκλοφορήσει.
Εργαλεία αυτού του άρθρου
- Εξαγωγέας χρωματικής παλέταςΕξαγωγή κυρίαρχων χρωμάτων από μια εικόνα ως δείγματα HEX. Αντιγράψτε οποιοδήποτε χρώμα. Χωρίς μεταφόρτωση.
- Προσομοιωτής αχρωματοψίαςΠροσομοιώστε πρωτανοπία, δευτερανοπία, τριτανοπία και ολική αχρωματοψία σε μια εικόνα. Χωρίς μεταφόρτωση.
- Μετατροπέας ΧρωμάτωνΜετατρέψτε χρώματα μεταξύ HEX, RGB, HSL, HSV και CMYK. Περιλαμβάνεται έλεγχος αντίθεσης WCAG. Χωρίς μεταφόρτωση.
- Γεννήτρια Χρωματικού ΣχήματοςΔημιουργήστε συμπληρωματικές, ανάλογες, τριαδικές, τετραδικές και μονοχρωματικές παλέτες από ένα βασικό χρώμα. Χωρίς μεταφόρτωση.
Συχνές ερωτήσεις
Πόσα χρώματα επιστρέφει συνήθως ένα πρόγραμμα εξαγωγής παλέτας;
Τα περισσότερα εργαλεία επιστρέφουν από 5 ως 16 χρώματα από προεπιλογή, αν και πολλά επιτρέπουν να ορίσετε τον αριθμό. Η επιστροφή λιγότερων χρωμάτων σημαίνει ότι ο αλγόριθμος πρέπει να ομαδοποιήσει περισσότερα pixels, κάτι που μπορεί να συγχωνεύσει διακριτούς αλλά παρόμοιους τόνους. Η επιστροφή περισσότερων χρωμάτων μπορεί να παράγει σχεδόν διπλότυπα που είναι δύσκολο να χρησιμοποιηθούν διακριτικά. Για παλέτα UI, 6 ως 8 χρώματα είναι συνήθως πρακτικό σημείο εκκίνησης.
Μπορεί μια παλέτα εξαγόμενη από εικόνα να περάσει αυτόματα την αντίθεση WCAG;
Όχι αυτόματα. Τα κυρίαρχα χρώματα σε φωτογραφία είναι συχνά μεσαίοι τόνοι με μέτρια φωτεινότητα, που τείνουν να παράγουν λόγους στην περιοχή 2:1 ως 3:1 μεταξύ τους. Η επίτευξη του κατωφλίου 4.5:1 για κείμενο σώματος απαιτεί συνήθως ανοίγοντας τις τιμές φόντου ή σκουραίνοντας τις τιμές κειμένου πέρα από αυτό που παρέχει η αρχική εξαγωγή. Η εξαγωγή σάς δίνει σημείο εκκίνησης· ο έλεγχος αντίθεσης σας λέει πόση προσαρμογή απαιτείται.
Λαμβάνει υπόψη ο λόγος αντίθεσης WCAG την αχρωματοψία;
Εν μέρει. Ο τύπος φωτεινότητας WCAG βασίζεται στη σχετική φωτεινότητα, όχι στην απόχρωση, οπότε ένα ζεύγος υψηλής αντίθεσης που πληροί 4.5:1 θα παραμείνει γενικά διακριτό ακόμα και σε χρήστες με αχρωματοψία επειδή η διαφορά φωτεινότητας διατηρείται. Ωστόσο, δύο χρώματα με παρόμοια φωτεινότητα αλλά διαφορετικές αποχρώσεις, όπως κόκκινο και πράσινο με την ίδια φωτεινότητα, μπορούν να περάσουν έλεγχο αντίθεσης βάσει φωτεινότητας ενώ παραμένουν αδιάκριτα από δευτερανώπες. Η εκτέλεση προσομοίωσης αχρωματοψίας είναι ο σωστός τρόπος ελέγχου της διαφοροποίησης σε επίπεδο απόχρωσης ξεχωριστά από τον λόγο αντίθεσης.