Χρησιμοποιώντας υψηλή αντίθεση χρώματος για πιο προσβάσιμο σχέδιο
Ένα υψηλό ποσοστό εγκατάλειψης προκαλείται συχνά από την κακή οπτική προσβασιμότητα ενός ιστότοπου. Όταν οι γραμματοσειρές είναι πολύ μικρές ή είναι δύσκολο να γίνουν ευανάγνωστες, όταν υπάρχουν πάρα πολλές αποσπάσεις της προσοχής ή δεν υπάρχουν αρκετά κενά, πολλοί άνθρωποι απλά αφήστε το χώρο χωρίς δεύτερη σκέψη.
Ένας από τους συνηθέστερους λόγους για πρόωρη εγκατάλειψη είναι ο κακώς επιλεγμένος σχέδια χρωμάτων που μειώνουν την αναγνωσιμότητα του περιεχομένου.
Σύμφωνα με τις στατιστικές της ΠΟΥ, υπάρχουν περίπου 285 εκατομμύρια άνθρωποι με προβλήματα όρασης σε όλο τον κόσμο, πολλοί από τους οποίους είναι μερικώς ή πλήρως τυφλοί. Τα άτομα με οπτικά μειονεκτήματα βλέπουν τα χρώματα διαφορετικά αποφεύγοντας τη χαμηλή χρωματική αντίθεση στα σχέδιά μας είναι αναπόφευκτη αν θέλουμε να παρέχουμε στους πελάτες μας έναν προσβάσιμο και φιλικό προς το χρήστη ιστότοπο.
Πρότυπα ιστού για χρωματική αντίθεση
Έγχρωμος λόγος αντίθεσης μετρά τη διαφορά στην αντίθεση μεταξύ δύο χρωμάτων. Όσο μεγαλύτερη είναι η τιμή, τόσο πιο εύκολο είναι να διακρίνετε το αντικείμενο (κείμενο, εικόνα, γραφικό) στο προσκήνιο από το φόντο.
Τα χρώματα μπορούν να αντιπαραβληθούν με πολλούς διαφορετικούς τρόπους, όπως το απόχρωση, αξία και κορεσμός. Ο λόγος αντίθεσης χρώματος υπολογίζεται από έναν τύπο που παρέχεται από το W3C, τον κύριο διεθνή οργανισμό τυποποίησης για τον Παγκόσμιο Ιστό.
Μπορεί να πάρει μια τιμή μεταξύ 1: 1 (δεν υπάρχει καμία αντίθεση, το προσκήνιο και το φόντο έχουν το ίδιο χρώμα) και 21: 1 (τη μέγιστη αντίθεση που υπάρχει μόνο μεταξύ μαύρου και λευκού χρώματος).
Οι πιο πρόσφατες οδηγίες προσβασιμότητας περιεχομένου του Web (WCAG) του W3C (WCAG) 2.0 παρέχουν στους υπεύθυνους ανάπτυξης ιστοσελίδων και στους δημιουργούς περιεχομένου σημεία αναφοράς για την ελάχιστη (Επίπεδο ΑΑ) και την ενισχυμένη (Επίπεδο ΑΑΑ).
Το επίπεδο ΑΑ απαιτεί τουλάχιστον Αναλογία 4,5: 1 για κανονικό κείμενο, και 3: 1 για μεγάλο κείμενο. Είναι πολύ πιο εύκολο να διαβάσετε μεγάλο κείμενο όπως τους υπότιτλους, γι 'αυτό χρειάζεται μια χαμηλότερη χρωματική αντίθεση.
Αν θέλετε να φτάσετε στο επίπεδο ΑΑΑ που είναι το ενισχυμένο επίπεδο, θα πρέπει να σχεδιάσετε το χρώμα σας με μεγαλύτερη προσοχή, καθώς απαιτεί τουλάχιστον Αναλογία αντίθεσης 7: 1 για κανονικό κείμενο, και 4,5: 1 για μεγάλο. Εάν ένα κείμενο αποτελεί μέρος λογότυπου ή εμπορικού σήματος, δεν υπάρχει ελάχιστη απαίτηση αντίθεσης χρώματος σε επίπεδο WCAG.
Μπορούμε να καλέσουμε έναν ιστότοπο οπτικά προσβάσιμο μόνο αν το η αναλογία αντίθεσης χρώματος μεταξύ κάθε αντικειμένου του προσκηνίου και του φόντου του φτάνει τουλάχιστον στο Επίπεδο ΑΑ.
Πλεονεκτήματα του υψηλού αναλογικού συντελεστή αντίθεσης χρωμάτων
Με τη διασφάλιση καλύτερης αναγνωσιμότητας, δεν εμπλέκονται μόνο χρήστες με προβλήματα όρασης, αλλά και άτομα που διαβάζουν το περιεχόμενό σας σε μικρές οθόνες όπως σε smartphone ή smartwatch, μεταξύ κακές συνθήκες φωτισμού, και επάνω παρακολούθησης χαμηλότερης ποιότητας.
Οι άνθρωποι διαβάζουν επίσης ταχύτερα όταν υπάρχει μεγαλύτερη αντίθεση μεταξύ του κειμένου και του φόντου, οπότε πιθανότατα θα πάρει περισσότερο χρόνο για να βαρεθούν με το περιεχόμενο του ιστότοπου.
Εάν ανησυχείτε ότι η εφαρμογή υψηλότερου λόγου αντίθεσης θα έχει αρνητικό αντίκτυπο στην αισθητική του σχεδιασμού σας, θα πρέπει να ελέγξετε το έργο web Rebellion web, το οποίο αποδεικνύει, με παραδείγματα πραγματικής ζωής, ότι η τήρηση των κανόνων υψηλής αντίθεσης σε ελκυστικά και δροσερά σχέδια.
Εφαρμογές για τον έλεγχο της αντίθεσης χρωμάτων
Υπάρχουν πολλά μεγάλα δωρεάν εργαλεία σε όλο τον ιστό που μπορούν να βοηθήσουν τους σχεδιαστές να ελέγξουν την αναλογία χρώματος αντίθεσης της ιστοσελίδας τους.
Ο ευκολότερος τρόπος δοκιμής του σχεδιασμού σας για αντίθεση χρώματος είναι να επιλέξετε τα κύρια χρώματα είτε με το Photoshop είτε με μια κατάλληλη επέκταση προγράμματος περιήγησης όπως αυτή για τον Firefox και αντιγράψτε τις τιμές σε μία από τις παρακάτω εφαρμογές.
Το πιο σημαντικό πράγμα που πρέπει να θυμάστε είναι ότι πρέπει πάντα να το κάνετε συγκρίνετε το χρώμα του προσκηνίου, όπως το χρώμα κειμένου με τη γύρω περιοχή (χρώμα φόντου).
1. Έλεγχος αντίθεσης χρωμάτων WebAim
WebAim (Web Accessibility In Mind) είναι ένας οργανισμός που προωθεί την προσβασιμότητα στον ιστό που προσφέρει στους προγραμματιστές έναν απλό αλλά αξιόπιστο έλεγχο χρώματος μεταξύ πολλών άλλων μεγάλων εργαλείων προσβασιμότητας όπως το Wave, μια γενική εφαρμογή αξιολόγησης προσβασιμότητας που μπορεί να σας βοηθήσει να αξιολογήσετε γρήγορα τα θέματα προσβασιμότητας του ιστότοπού σας.
Ο Έλεγχος αντίθεσης χρώματος του WebAim σας λέει αν τα χρώματα σας περάσουν τις δοκιμές WCAG AAA και AAA, τόσο για κανονικά όσο και για μεγάλα κείμενα.
2. Snook Έλεγχος χρώματος αντίθεσης
Ο Jonathan Snook, ο οποίος εργάζεται επί του παρόντος ως πρωτοπόρος προγραμματιστής στο Shopify, έχει φιλοξενήσει το εύχρηστο εργαλείο ελέγχου χρώματος για περισσότερο από μια δεκαετία. Η εφαρμογή του Snook σας επιτρέπει να κάνετε αλλάξτε τις τιμές HSL και RGB του χρώματος του προσκηνίου και του φόντου ένα προς ένα με τη χρήση βολικά ρυθμιστικά εύρους μέχρι να φτάσετε ένα αποτέλεσμα που συμμορφώνεται με τους δείκτες αναφοράς WCAG 2.0.
CheckMyColours
Το CheckMyColours που δημιουργήθηκε από τον Giovanni Scala σάς επιτρέπει να ελέγχετε τον λόγο αντίθεσης χρώματος για όλους τους συνδυασμούς χρωμάτων φόντου προσκηνίου σε έναν ζωντανό ιστότοπο.
Υπολογίζει αναλογία αντίθεσης φωτεινότητας, διαφορά φωτεινότητας, και διαφορά χρώματος, και σας παρέχει μια πλήρη αναφορά σχετικά με τα αποτελέσματα. Η αναφορά του CheckMyColours μπορεί να διευκολύνει σημαντικά την κατανόησή σας για το πώς μπορείτε να βελτιώσετε την οπτική προσβασιμότητα του ιστότοπού σας.
Σχέδιο χρωμάτων
Ο σχεδιασμός χρωμάτων δεν είναι ιδιαίτερα ένας έλεγχος αντίθεσης χρώματος, αλλά ένα εργαλείο για σχεδιάζοντας πλήρη σχέδια χρωμάτων.
Το συμπεριλαμβάνουμε σε αυτή τη συλλογή, επειδή διαθέτει μια λειτουργία που σας επιτρέπει να δείτε πώς γίνεται αντιληπτό το χρώμα σας από άτομα με διαφορετικούς τύπους οπτικών αναπηριών. Μπορείτε να δοκιμάσετε τα χρώματα σας για πλήρη τύφλωση, protanopy, deuteranopy και πολλές άλλες οπτικές διαταραχές. Η εφαρμογή έχει μια νεότερη έκδοση που ονομάζεται Paletton, η οποία καθιστά δυνατή ακόμα πιο εξελιγμένη προσομοίωση όρασης (μπορείτε επίσης να δοκιμάσετε για πράγματα όπως η έντονη οθόνη LED ή η ασθενής οθόνη CRT).
Το W3C σας παρέχει επίσης μια τεράστια λίστα εργαλείων αξιολόγησης προσβασιμότητας στον ιστό, όπου μπορείτε να βρείτε πολλά άλλα εργαλεία αντίθεσης χρωμάτων, όπως αυτή η χρήσιμη Wheel Color Wheel.
Συμβουλές για τη δημιουργία οπτικά προσβάσιμων ιστότοπων
Εάν θέλετε να δημιουργήσετε έναν οπτικά προσβάσιμο ιστότοπο, είναι πάντα καλή ιδέα να το κάνετε αποφύγετε τη χρήση μόνο του χρώματος για να μεταβιβάσετε λειτουργικότητα ή νόημα. Εικονίδια που αλλάζουν το χρώμα τους με βάση την τρέχουσα κατάσταση τους είναι τυπικά παραδείγματα για αυτό.
Αν είναι δυνατόν, πάντα Σχεδιάστε πρόσθετα οπτικά σημάδια που βοηθούν τους ανθρώπους που βλέπουν τα χρώματα διαφορετικά στην κατανόηση της λειτουργικότητας.
Ποτέ μην ξεχνάτε δώστε ιδιαίτερη προσοχή στην αντίθεση χρώματος κουμπιών, συνδέσμων και μενού, καθώς αποτελούν το μέσο πλοήγησης στον ιστότοπό σας. Εάν οι χρήστες δεν μπορούν να πλοηγηθούν εύκολα στον ιστότοπό σας, θα τους χάσετε γρήγορα. Προσβάσιμα χρώματα για κουμπιά παρότρυνσης για δράση είναι επίσης κρίσιμη για τα καλά ποσοστά μετατροπής.
Είναι μια καλή πρακτική ροής εργασίας για να δοκιμάσετε το λόγο αντίθεσης χρώματος όσο το δυνατόν νωρίτερα στη διαδικασία σχεδιασμού, καθώς θα είναι δύσκολο να πείσετε τον πελάτη σας να αλλάξει το χρωματικό σχήμα του site αργότερα κάτω από τη διαδικασία σχεδιασμού.
Διαβάστε τώρα: Πρακτική προσέγγιση για την επιλογή του Χρώματος Ιστοσελίδας
