Ένας οδηγός για την προσβασιμότητα χρώματος στο σχεδιασμό του προϊόντος

Υπάρχει πολλή συζήτηση για το προσβάσιμο σχέδιο, αλλά έχετε σκεφτεί ποτέ για την προσβασιμότητα χρώματος;

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

Αυτή η ιστορία είναι από τον Justin Reyna

Ας μάθουμε πώς να φτάσουμε στο χρώμα χρησιμοποιώντας τις αρχές σχεδίασης που ήδη γνωρίζετε.

Γιατί η προσβασιμότητα είναι τόσο σημαντική;

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

Επίσης, η μη δημιουργία προσβάσιμων προϊόντων είναι απλώς αγενής, οπότε μην είστε αγενείς.

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

"Η μη δημιουργία προσβάσιμων προϊόντων είναι απλώς αγενής, οπότε μην είστε αγενής".

Εκτός από την προσβασιμότητα που αποτελεί ηθική βέλτιστη πρακτική, υπάρχουν επίσης πιθανές νομικές επιπτώσεις για τη μη συμμόρφωση με τις κανονιστικές απαιτήσεις σχετικά με την προσβασιμότητα. Το 2017, οι ενάγοντες κατέθεσαν τουλάχιστον 814 ομοσπονδιακές αγωγές σχετικά με φερόμενους μη προσβάσιμους ιστότοπους, συμπεριλαμβανομένων ορισμένων κατηγοριών ενεργειών. Διάφορες οργανώσεις έχουν επιδιώξει να καθορίσουν πρότυπα προσβασιμότητας, ειδικότερα το Συμβούλιο Προσπέλασης των Ηνωμένων Πολιτειών (Τμήμα 508) και το World Wide Web Consortium (W3C). Ακολουθεί μια επισκόπηση των προτύπων αυτών:

  • Το τμήμα 508: 508 συμμόρφωση αναφέρεται στο άρθρο 508 του νόμου περί αποκατάστασης του 1973. Μπορείτε να διαβάσετε το σε βάθος διάταγμα εδώ, αλλά συνοπτικά, το άρθρο 508 απαιτεί ότι ο ιστότοπός σας πρέπει να είναι προσβάσιμος εάν είστε ομοσπονδιακός οργανισμός ή δημιουργείτε ιστότοπους για λογαριασμό μιας ομοσπονδιακής υπηρεσίας (όπως εργολάβοι).
  • W3C: Η Κοινοπραξία World Wide Web (W3C) είναι μια διεθνής, εθελοντική κοινότητα που ιδρύθηκε το 1994 και αναπτύσσει ανοικτά πρότυπα για το διαδίκτυο. Το W3C περιγράφει τις κατευθυντήριες γραμμές τους για την προσβασιμότητα στον Παγκόσμιο Ιστό στο πλαίσιο του WCAG 2.1, το οποίο είναι ουσιαστικά το χρυσό πρότυπο για τις βέλτιστες πρακτικές προσβασιμότητας στο διαδίκτυο.

Βεβαιωθείτε ότι το προϊόν είναι έγχρωμο

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

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

Προσθέστε αρκετή αντίθεση

Για να πληροίτε την ελάχιστη βαθμολογία AA του W3C, ο λόγος αντίθεσης φόντου προς κείμενο πρέπει να είναι τουλάχιστον 4,5: 1. Έτσι, όταν σχεδιάζετε πράγματα όπως κουμπιά, κάρτες ή στοιχεία πλοήγησης, βεβαιωθείτε ότι έχετε ελέγξει την αναλογία αντίθεσης των συνδυασμών χρωμάτων σας.

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

Μην βασίζεστε αποκλειστικά στο χρώμα

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

Επίσης, όταν προβάλλετε πράγματα όπως γραφήματα ή γραφήματα, δίνοντας στους χρήστες την επιλογή να προσθέσουν υφή ή μοτίβα, εξασφαλίζει ότι οι χρωματιστές μπορούν να διακρίνουν μεταξύ τους χωρίς να χρειάζεται να ανησυχούν για το χρώμα που επηρεάζει την αντίληψή τους για τα δεδομένα. Το Trello κάνει μια σπουδαία δουλειά από αυτό με το Colorblind-Friendly Mode.

Αντίθεση κατάστασης εστίασης

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

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

Έγγραφο και κοινωνικοποίηση του συστήματος χρωμάτων

Τέλος, η πιο σημαντική πτυχή της δημιουργίας ενός προσβάσιμου συστήματος χρωμάτων δίνει στην ομάδα σας τη δυνατότητα να την αναφέρει όταν χρειάζεται, οπότε όλοι είναι σαφείς σχετικά με την ορθή χρήση. Αυτό όχι μόνο μειώνει τη σύγχυση και το χτύπημα, αλλά και εξασφαλίζει ότι η προσβασιμότητα είναι πάντα προτεραιότητα για την ομάδα σας. Από την εμπειρία μου, η ρητή κλήση της βαθμολογίας προσβασιμότητας ενός συγκεκριμένου συνδυασμού χρωμάτων σε ένα UI Kit ή Design System είναι πιο αποτελεσματική, ειδικά όταν κοινωνικοποιείτε σε όλη την ομάδα με ένα εργαλείο (όπως το InVision Craft ή το InVision DSM). Ακολουθεί ένα παράδειγμα για τον τρόπο τεκμηρίωσης του φόντου σε συνδυασμούς χρωμάτων κειμένου και της αξιολόγησης προσβασιμότητας κάθε συνδυασμού.

Ας είμαστε προσιτοί

Αυτές είναι μόνο μερικές συμβουλές για να καταστήσετε το προϊόν σας πιο προσιτό, αλλά έχετε κατά νου, αυτά αφορούν μόνο την προσβασιμότητα χρώματος. Για να κατανοήσετε λεπτομερώς τις οδηγίες προσβασιμότητας, συστήνω να εξοικειωθείτε με το WCAG 2.1. Ενώ αυτές οι οδηγίες μπορεί να είναι λίγο αποθαρρυντικές, υπάρχουν τόνοι πόρων εκεί έξω για να σας βοηθήσουν στην πορεία σας, και όταν έχετε αμφιβολίες, μη διστάσετε να απευθυνθείτε στους σχεδιαστές της περιοχής σας (ή μέσω διαδικτύου) για βοήθεια.

Μήπως σας αρέσει αυτή η θέση; Διαβάστε περισσότερα όπως στο Inside Design, ένα νέο ιστολόγιο από την InVision.

Αρχικά δημοσιεύθηκε στο invisionapp.com.