Αχρωματοψία και Σχεδιασμός Ιστού: Τι Πρέπει να Ξέρετε

Πιο συχνή από ό,τι νομίζουν οι περισσότεροι σχεδιαστές

Η ανεπάρκεια έγχρωμης όρασης — που συνήθως ονομάζεται αχρωματοψία — επηρεάζει περίπου το 8% των ανδρών και το 0,5% των γυναικών. Αυτό είναι περίπου 1 στους 12 άνδρες και 1 στις 200 γυναίκες, καθιστώντας την πιο διαδεδομένη από τις περισσότερες άλλες αναπηρίες που αντιμετωπίζουν τα πρότυπα προσβασιμότητας ιστού.

Ωστόσο, συστηματικά παραβλέπεται στον σχεδιασμό. Οι ομάδες κάνουν δοκιμές με αναγνώστες οθόνης και πλοήγηση με πληκτρολόγιο, εκτελούν μια αυτοματοποιημένη σάρωση WCAG και θεωρούν την εργασία προσβασιμότητας ολοκληρωμένη — χωρίς ποτέ να ελέγξουν αν η παλέτα χρωμάτων τους είναι ευανάγνωστη για χρήστες με αχρωματοψία.

Η κατανόηση της αχρωματοψίας, και του τι πραγματικά κάνει στις διεπαφές ιστού που σχεδιάζετε, είναι το πρώτο βήμα για τη διόρθωσή της.

Οι τύποι και τι κάνουν

Η ανεπάρκεια έγχρωμης όρασης εμφανίζεται σε διάφορες μορφές, και δεν παράγουν όλες την ίδια εμπειρία.

Ερυθρο-πράσινες ανεπάρκειες (πιο συχνές)

Protanopia — πλήρης απουσία των φωτοϋποδοχέων κώνων του κόκκινου. Το κόκκινο εμφανίζεται σκούρο ή μαύρο. Οι διακρίσεις κόκκινου-πράσινου χάνονται.

Protanomaly — μειωμένη ευαισθησία στο κόκκινο. Το κόκκινο, το πορτοκαλί και το κίτρινο μετατοπίζονται προς το πράσινο, και η συνολική εμπειρία είναι πιο θαμπή, σαν να έχει μειωθεί το κανάλι του κόκκινου.

Deuteranopia — πλήρης απουσία των κώνων υποδοχέων του πράσινου. Η πιο συχνή μορφή αχρωματοψίας. Το πράσινο και το κόκκινο συγχέονται· ο κόσμος φαίνεται σαν να είναι φιλτραρισμένος μέσα από έναν κιτρινο-καφέ φακό.

Deuteranomaly — μειωμένη ευαισθησία στο πράσινο. Παρόμοια με τη deuteranopia αλλά ηπιότερη. Ο πιο διαδεδομένος τύπος συνολικά, επηρεάζοντας περίπου το 5% των ανδρών.

Κυανο-κίτρινες ανεπάρκειες (σπανιότερες)

Tritanopia — απουσία των κώνων υποδοχέων του μπλε. Το μπλε εμφανίζεται πράσινο, και το κίτρινο εμφανίζεται χλωμό ή αόρατο. Σπάνια.

Tritanomaly — μειωμένη ευαισθησία στο μπλε. Το γαλαζοπράσινο και το κοκκινο-μωβ συγχέονται.

Μονοχρωματοψία (πολύ σπάνια)

Achromatopsia — απουσία όλων των κώνων υποδοχέων χρώματος. Γίνεται αντιληπτή μόνο η φωτεινότητα· ο κόσμος εμφανίζεται σε αποχρώσεις του γκρι. Συχνά συνοδεύεται από ευαισθησία στο φως και μειωμένη οπτική οξύτητα.

Πώς η αχρωματοψία διαταράσσει τα κοινά μοτίβα ιστού

Η γνώση των τύπων αφηρημένα είναι λιγότερο χρήσιμη από τη γνώση του ποιες συγκεκριμένες σχεδιαστικές αποφάσεις προκαλούν προβλήματα. Αυτές είναι οι πιο συχνές.

Καταστάσεις σφάλματος που υποδεικνύονται μόνο με κόκκινο

Το να κάνετε κόκκινο το περίγραμμα ενός πεδίου φόρμας για να δείξετε ένα σφάλμα επικύρωσης είναι ένα από τα πιο διαδεδομένα μοτίβα στον σχεδιασμό ιστού. Για χρήστες με ερυθρο-πράσινη ανεπάρκεια, το κόκκινο σε λευκό ή το κόκκινο σε γκρι μπορεί να είναι σχεδόν αόρατο, ή δυσδιάκριτο από μια κανονική μη εστιασμένη κατάσταση.

Αυτό καλύπτεται άμεσα από το WCAG 2.2 1.4.1 Χρήση του Χρώματος (Επίπεδο A): το χρώμα δεν πρέπει να είναι το μόνο μέσο μετάδοσης πληροφορίας, υπόδειξης μιας ενέργειας, πρόκλησης μιας απόκρισης ή διάκρισης ενός οπτικού στοιχείου.

Η διόρθωση είναι απλή: συνδυάστε το χρώμα με έναν δεύτερο οπτικό δείκτη — ένα εικονίδιο, μια ετικέτα κειμένου, μια αλλαγή στο πάχος του περιγράμματος ή οποιοδήποτε άλλο μη χρωματικό σήμα.

<!-- Βασιζόμενο μόνο στο χρώμα: αποτυγχάνει στο 1.4.1 -->
<input type="email" class="field--error">

<!-- Χρώμα συν εικονίδιο συν κείμενο: περνά -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Εισαγάγετε μια έγκυρη διεύθυνση email.
  </p>
</div>

Ανεπαρκής αντίθεση

Η χαμηλή αντίθεση είναι ένα ξεχωριστό ζήτημα από την αχρωματοψία, αλλά διασταυρώνονται. Πολλές παλέτες χρωμάτων που φαίνονται ευανάγνωστες στην τυπική έγχρωμη όραση γίνονται ακόμη πιο δύσκολο να διαβαστούν υπό ανεπάρκεια έγχρωμης όρασης, επειδή η αντιληπτή διαφορά μεταξύ προσκηνίου και φόντου συρρικνώνεται περαιτέρω.

Το WCAG 1.4.3 απαιτεί μια ελάχιστη αναλογία αντίθεσης 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο. Ο έλεγχος της αντίθεσης με ένα εργαλείο όπως ο επιλογέας χρωμάτων του DevTools του προγράμματος περιήγησης ή ένας ειδικός ελεγκτής είναι αδιαπραγμάτευτος — μην βασίζεστε στην οπτική επιθεώρηση.

Οπτικοποίηση δεδομένων που κωδικοποιεί μόνο με χρώμα

Ένα γράφημα πίτας με έξι τμήματα που διαφοροποιούνται μόνο με χρώμα. Ένας χάρτης με μια διαβάθμιση από κόκκινο σε πράσινο. Ένα γραμμικό γράφημα όπου τέσσερα σύνολα δεδομένων διακρίνονται μόνο με απόχρωση.

Για χρήστες με deuteranopia, το κόκκινο και το πράσινο γίνονται δυσδιάκριτα. Το νόημα του γραφήματος καταρρέει εντελώς. Για περισσότερα σχετικά με αυτό, δείτε τον οδηγό μας για την προσβάσιμη οπτικοποίηση δεδομένων.

Σύνδεσμοι που βασίζονται μόνο στο χρώμα για να ξεχωρίζουν από το κυρίως κείμενο

Από προεπιλογή, τα προγράμματα περιήγησης υπογραμμίζουν τους συνδέσμους. Πολλοί σχεδιαστές αφαιρούν αυτή την υπογράμμιση και βασίζονται μόνο στο χρώμα για να διακρίνουν τους συνδέσμους από το περιβάλλον κείμενο. Οι χρήστες με ανεπάρκεια έγχρωμης όρασης — και ειδικά αυτοί που χρησιμοποιούν θέματα χαμηλής αντίθεσης — μπορεί να μην καταφέρουν να εντοπίσουν καθόλου τους συνδέσμους.

Το WCAG 1.4.1 ισχύει και εδώ. Εάν το χρώμα του συνδέσμου είναι ο μόνος οπτικός δείκτης (χωρίς υπογράμμιση, χωρίς έντονη γραφή, χωρίς άλλο διαφοροποιητή), ο σύνδεσμος δεν είναι προσβάσιμος για χρήστες με αχρωματοψία.

Η απλούστερη διόρθωση: επαναφέρετε την υπογράμμιση. Εναλλακτικά, βεβαιωθείτε ότι το χρώμα του συνδέσμου έχει επαρκή αντίθεση τόσο με το χρώμα του κυρίως κειμένου όσο και με το φόντο.

Σχεδιάζοντας με γνώμονα την αχρωματοψία

Χρησιμοποιήστε πλεονάζουσα κωδικοποίηση

Προσθέστε ένα δεύτερο οπτικό κανάλι παράλληλα με το χρώμα. Στα γραφήματα: προσθέστε μοτίβα, υφές ή ετικέτες δεδομένων. Στους δείκτες κατάστασης: προσθέστε εικονίδια. Στις καταστάσεις φόρμας: προσθέστε κείμενο. Ο στόχος είναι ότι κάποιος που αφαιρεί εντελώς το χρώμα από τον σχεδιασμό να μπορεί ακόμη να κατανοήσει τα πάντα.

Δοκιμάστε με εργαλεία προσομοίωσης

Το Chrome DevTools διαθέτει ενσωματωμένη προσομοίωση αχρωματοψίας. Ανοίξτε το DevTools > πίνακας Rendering > “Emulate vision deficiencies.” Μπορείτε να προσομοιώσετε protanopia, deuteranopia, tritanopia και achromatopsia.

Το Figma και άλλα σχεδιαστικά εργαλεία έχουν παρόμοια plugins. Η εκτέλεση μιας προσομοίωσης παίρνει δευτερόλεπτα και συχνά αποκαλύπτει προβλήματα που δεν ήταν ορατά στην τυπική προεπισκόπηση.

Ελέγξτε την παλέτα σας ως σύνολο

Μην δοκιμάζετε μόνο μεμονωμένα ζεύγη στοιχείων. Κοιτάξτε ολόκληρη την παλέτα μαζί: πρωτεύοντα, δευτερεύοντα, χρώματα σφάλματος, επιτυχίας, προειδοποίησης και ενημερωτικά χρώματα. Υπό προσομοίωση deuteranopia, το κόκκινο του σφάλματος και το πράσινο της επιτυχίας φαίνονται παρόμοια; Αν ναι, έχετε πρόβλημα ανεξάρτητα από το αν οι αναλογίες αντίθεσής σας τεχνικά περνούν.

Αποφύγετε προβληματικούς συνδυασμούς

Ιδιαίτερα αναξιόπιστοι για την ανεπάρκεια έγχρωμης όρασης:

• Κόκκινο και πράσινο
• Πράσινο και καφέ
• Μπλε και μωβ
• Πράσινο και γκρι
• Πράσινο και μαύρο

Όταν αυτά τα ζεύγη πρέπει να εμφανιστούν στο ίδιο πλαίσιο, διαφοροποιήστε τα μέσω φωτεινότητας ή μοτίβου αντί για απόχρωση.

Τι καλύπτει και τι δεν καλύπτει το WCAG

Το WCAG καλύπτει την αντίθεση χρωμάτων (1.4.3, 1.4.11) και την απαγόρευση χρήσης του χρώματος ως του μοναδικού μέσου μετάδοσης πληροφορίας (1.4.1). Δεν καθορίζει ποια χρώματα μπορείτε ή δεν μπορείτε να χρησιμοποιήσετε, ούτε απαιτεί ολόκληρη η παλέτα σας να είναι αντιληπτή υπό κάθε τύπο ανεπάρκειας έγχρωμης όρασης.

Αυτό που απαιτεί είναι να μην χάνεται κανένα νόημα όταν αφαιρείται το χρώμα. Αυτή είναι η πρακτική δοκιμή. Αφαιρέστε το χρώμα από τον σχεδιασμό σας. Παραμένει προσβάσιμη κάθε πληροφορία μέσω άλλων μέσων;

Αν η απάντηση είναι ναι, έχετε πληρώσει την απαίτηση. Αν οι καταστάσεις σφάλματος εξαφανίζονται, αν τα δεδομένα των γραφημάτων γίνονται ασαφή, αν οι σύνδεσμοι γίνονται αόρατοι — έχετε δουλειά να κάνετε.

Οι έλεγχοι προσβασιμότητάς μας περιλαμβάνουν την προσβασιμότητα χρωμάτων ως τυπικό μέρος της αξιολόγησης. Αν θέλετε να μάθετε πού βρίσκεται ο τρέχων σχεδιασμός σας, εκτελέστε μια δωρεάν αυτοματοποιημένη σάρωση για να εντοπίσετε τα αυτοματοποιήσιμα ζητήματα ως αφετηρία.