Ο λόγος ενός υψηλού ποσοστού απόρριψης μίας ιστοσελίδας από τους αναγνώστες, είναι ο κακός οπτικός σχεδιασμός της.
Όταν οι γραμματοσειρές είναι πολύ μικρές, ή δεν είναι ευανάγνωστες, ή όταν το colour contrast είναι λάθος, ή όταν υπάρχουν πάρα πολλές αποσπάσεις της προσοχής (διαφημίσεις, φωτεινά μηνύματα κλπ) ή όταν δεν υπάρχουν σωστά κενά (λευκές γραμμές), πολλοί άνθρωποι απλώς εγκαταλείπουν την ιστοσελίδα, χωρίς δεύτερη σκέψη.
Το να φύγουν από μία ιστοσελίδα είναι για τους χρήστες απλά ένα κλικ στο ποντίκι τους.
Ένας από τους πιο συχνούς λόγους για την πρόωρη εγκατάλειψη μίας ιστοσελίδας είναι οι κακώς επιλεγμένοι συνδυασμοί χρωμάτων που μειώνουν την αναγνωσιμότητα του περιεχομένου.
Σύμφωνα με τα στατιστικά στοιχεία του Παγκόσμιου Οργανισμού Υγείας, υπάρχουν περίπου 285 εκατομμύρια άνθρωποι με προβλήματα όρασης σε όλο τον κόσμο, πολλοί από τους οποίους έχουν μερική ή πλήρη αχρωματοψία.
Τα άτομα με ειδικές ανάγκες στην οπτική τους, αντιλαμβάνονται τα χρώματα με διαφορετικό τρόπο, και έτσι η υψηλή χρωματική αντίθεση στα σχέδιά μίας ιστοσελίδας είναι αναπόφευκτη, εάν κάποιος θέλει να παρέχει στους πελάτες του μία προσιτή και φιλική προς το χρήστη ιστοσελίδα.
Πρότυπα Web Για Χρώμα Αντίθεση
Η αναλογία αντίθεσης χρώματος (Colour contrast ratio) μετρά τη διαφορά της αντίθεσης ανάμεσα σε δύο χρώματα. Όσο υψηλότερη είναι η τιμή, τόσο ευκολότερο είναι να διακρίνει κάποιος το αντικείμενο (κείμενο, εικόνα, γραφικά) στο προσκήνιο από το φόντο.
Τα χρώματα μπορούν να έρχονται σε αντίθεση με πολλούς διαφορετικούς τρόπους, όπως σε απόχρωση (hue), σε αξία (value) και τον κορεσμό (saturation). H αναλογία αντίθεσης χρωμάτων υπολογίζεται από τον τύπο που προβλέπεται από το W3C, την κύρια οργάνωση των διεθνών προτύπων για το World Wide Web.
Μπορεί να πάρει μια τιμή μεταξύ 1:1 (όταν δεν υπάρχει αντίθεση και όλο το προσκήνιο και το φόντο έχουν το ίδιο χρώμα) και 21:1 (η ανώτατη αντίθεση που υπάρχει μόνο μεταξύ μαύρου και άσπρου).
Οι τελευταίες οδηγίες του W3C σχετικά με την Προσβασιμότητα Περιεχομένου του Web (WCAG), έκδοση 2.0, παρέχουν στους web developers και στους δημιουργούς περιεχομένου τα σημεία αναφοράς για τη ελάχιστη (Επίπεδο ΑΑ) και τη ενισχυμένη (Επίπεδο ΑΑΑ) αξία της αποδεκτής αναλογίας χρωματικής αντίθεσης.
Το Επίπεδο ΑΑ απαιτεί τουλάχιστον ένα λόγο 4,5:1 για κανονικό κείμενο, και 3:1 για μεγάλο κείμενο. Είναι πολύ πιο εύκολο να διαβάζει ο χρήστης ένα μεγάλο κείμενο, όπως υπότιτλους και γι ‘αυτό χρειάζεται μια χαμηλότερη χρωματική αντίθεση.
Αν θέλει ο σχεδιαστής να φτάσει στο επίπεδο ΑΑΑ, που είναι το βέλτιστο επίπεδο, θα πρέπει να σχεδιάσει το χρώμα σχεδίου του με μεγαλύτερη προσοχή, δεδομένου ότι απαιτεί τουλάχιστον μία αναλογία αντίθεσης 7:1 για κανονικό κείμενο, και 4,5:1 για μεγάλο. Εάν ένα κείμενο είναι μέρος ενός λογότυπου ή ένα εμπορικό σήμα, δεν υπάρχει ελάχιστη απαίτηση στην χρωματική αντίθεση, ούτε στο επίπεδο του WCAG.
Μπορούμε να ονομάσουμε μια ιστοσελίδα οπτικά προσβάσιμη μόνο αν ο δείκτης χρωματικής αντίθεσης μεταξύ κάθε αντικείμενου που βρίσκεται στο προσκήνιο και του παρασκηνίου του φθάνει τουλάχιστον στο Επιπέδο ΑΑ.
Οφέλη της υψηλής αναλογίας αντίθεσης χρώματος
Με την εξασφάλιση καλύτερης αναγνωσιμότητας, στην οποία δεν εμπλέκονται μόνο οι χρήστες με προβλήματα όρασης, αλλά και οι άνθρωποι που διαβάζουν το περιεχόμενό σας σε ένα μικρές οθόνες, όπως σε ένα smartphone ή ένα SmartWatch, με ίσως κακές συνθήκες φωτισμού, και σε οθόνες χαμηλής ποιότητας.
Οι άνθρωποι διαβάζουν επίσης γρηγορότερα όταν υπάρχει μεγαλύτερη αντίθεση μεταξύ του κειμένου και του φόντου, οπότε το πιθανότερο είναι ότι θα χρειαστεί περισσότερος χρόνος για να βαρεθείτε με το περιεχόμενο ενός site.
Αν ανησυχείτε ότι η εφαρμογή μίας υψηλής αναλογίας αντίθεσης χρώματος θα έχει αρνητικές επιπτώσεις στην αισθητική του σχεδιασμού σας, θα πρέπει να διαβάσετε την web ιστοσελίδα Cοntrast Rebellion που αποδεικνύει, με παραδείγματα από την πραγματική ζωή, ότι η τήρηση των κανόνων υψηλού λόγου αντίθεσης μπορεί ακόμη να οδηγήσει σε ελκυστικά και ευχάριστα σχέδια.
Εφαρμογές για τον έλεγχο της Αντίθεσης Χρώματος
Υπάρχουν πολλά καλά και δωρεάν εργαλεία στο διαδίκτυο που μπορούν να βοηθήσουν τους σχεδιαστές να ελέγξουν την αναλογία αντίθεσης χρώματος της ιστοσελίδας τους.
Ο πιο εύκολος τρόπος για τον έλεγχο του σχεδιασμού για χρωματική αντίθεση είναι να επιλέξει τα κύρια χρώματα είτε με το Photoshop ή με μία κατάλληλη επέκταση του προγράμματος περιήγησης, όπως αυτό για τον Firefox, και να αντιγράψει τις τιμές σε μία από τις παρακάτω εφαρμογές.
Το πιο σημαντικό πράγμα που πρέπει να θυμάται ο σχεδιαστής είναι ότι θα πρέπει πάντα να συγκρίνει το χρώμα του προσκηνίου (όπως το χρώμα κειμένου) με τη γύρω περιοχή (χρώμα φόντου).
1. WebAIM Colour Contrast Checker
WebAim (από το Web Accessibility In Mind) είναι μια οργάνωση που προωθεί την προσβασιμότητα στον Ιστό και προσφέρει στους προγραμματιστές ένα απλό αλλά αξιόπιστο ελεγκτή αντίθεσης χρώματος (colour cοntrast checker) ανάμεσα σε πολλά άλλα μεγάλα εργαλεία προσβασιμότητας, όπως το Wave, μια γενική εφαρμογή της αξιολόγησης της προσβασιμότητας που μπορεί να βοηθήσει τον σχεδιαστή να αξιολογήσει γρήγορα τα ζητήματα προσβασιμότητας του δικτυακού του τόπου.
Το Colour Cοntrast Checker της WebAIM εξετάζει και αναφέρει εάν τα χρώματα περνάνε τις δοκιμές AA και AAA του WCAG, τόσο για τα κανονικά όσο και για τα μεγάλα κείμενα.
2. Snook Colour Cοntrast Check
Ο Jonathan Snook, που σήμερα εργάζεται ως επικεφαλής front-end developer στο Shopify, έχει μοιράσει το πρακτικό εργαλείο ελέγχου χρωματικής αντίθεσης, για πάνω από μια δεκαετία. Η εφαρμογή του Snook επιτρέπει να αλλάξει κάποιος τις τιμές HSL και RGB και του χρώματος του προσκηνίου και του χρώματος του παρασκηνίου, ένα πρός ένα, χρησιμοποιώντας τα εύχρηστα ρυθμιστικά συρόμενα κουμπιά μέχρι να φτάσει σε ένα αποτέλεσμα που να είναι συμβατό με τα κριτήρια αξιολόγησης του WCAG 2.0.
3. CheckMyColours
Το CheckMyColours δημιουργήθηκε από τον Giovanni Scala και επιτρέπει να ελέγξει ο σχεδιαστής την αναλογία της χρωματικής αντίθεσης όλων των χρωματικών συνδυασμών προσκήνιου-παρασκήνιου σε μια online ιστοσελίδα.
Υπολογίζει την αναλογία αντίθεσης φωτεινότητας (luminosity cοntrast ratio), την διαφορά στην φωτεινότητα (brightness difference), και την διαφορά στο χρώμα (colour difference), και παρέχει μια πλήρη έκθεση σχετικά με τα αποτελέσματα. Η έκθεση του CheckMyColours μπορεί να διευκολύνει σημαντικά την κατανόηση του σχεδιαστή για το πώς μπορεί να βελτιώσει την οπτική της προσβασιμότητας ενός site.
4. Color Scheme Designer
Το Color Scheme Designer δεν είναι ιδιαίτερα ένας ελεγκτής χρωματικής αντίθεσης, αλλά ένα εργαλείο για το πλήρη σχεδιασμό συνδυασμών χρωμάτων.
Το έχουμε συμπεριλάβει σε αυτή τη συλλογή, γιατί έχει ένα χαρακτηριστικό που σας επιτρέπει να δείτε πώς το χρώμα ενός σχεδίου γίνεται αντιληπτό από ανθρώπους με διαφορετικούς τύπους όρασης. Μπορείτε να δοκιμάσετε τα χρώματά της ιστοσελίδας σας για πλήρη αχρωματοψία, προτανοπία, δευτερανοπία, και πολλά άλλα προβλήματα όρασης. Η εφαρμογή έχει μια νεότερη έκδοση που ονομάζεται Paletton που κάνει ακόμα μία πιο εξελιγμένη προσομοίωση της όρασης (μπορείτε επίσης να δοκιμάσετε να προσομοιάσετε την ιστοσελίδα όπως φαίνεται με μία κακή LED οθόνη ή με αδύναμο CRT).
Το W3C σας παρέχει επίσης με μια τεράστια λίστα με εργαλεία αξιολόγησης της προσβασιμότητας στο Web όπου μπορείτε να βρείτε πολλά καλούδια σχετικά με την αντίθεση των χρωμάτων, όπως αυτό το Accessibility Color Wheel.
Συμβουλές για τη δημιουργία οπτικά προσβάσιμων ιστοσελίδων
Αν θέλετε να δημιουργήσετε μια οπτικά προσβάσιμη ιστοσελίδα, είναι πάντα καλή ιδέα να αποφύγετε να χρησιμοποιήσετε μόνο χρώμα για να αποδόσετε τη λειτουργικότητα ή την έννοια. Εικόνες που αλλάζουν το χρώμα τους με βάση την τρέχουσα κατάστασή τους είναι τυπικό παράδειγμα γι ‘αυτό.
Αν είναι δυνατόν, πάντα σχεδιάζουμε συμπληρωματικές οπτικές ενδείξεις που βοηθούν τους ανθρώπους που βλέπουν τα χρώματα με διαφορετικό τρόπο.
Ποτέ μην ξεχνάτε να δώσετε ιδιαίτερη προσοχή στην χρωματική αντίθεση των κομβίων, των συνδέσμων και του μενού, ή όποιο είναι το μέσο της πλοήγησης στο site σας. Εάν οι χρήστες δεν μπορούν να πλοηγηθούν εύκολα στο site σας, θα τους χάσετε γρήγορα. Προσιτά χρώματα για τα action κομβία είναι επίσης ζωτικής σημασίας, αν θέλετε να τα χρησιμοποιήσουν.
Επίσης είναι καλύτερα να προβείτε σε ένα έλεγχο της σωστής αναλογίας αντίθεσης χρώματος όσο το δυνατόν νωρίτερα στη διαδικασία σχεδιασμού της ιστοσελίδα, καθώς θα είναι δύσκολο να πείσετε τον πελάτη σας αργότερα (προς το τέλος του σχεδιασμού) να δεχθεί να αλλάξετε το συνδυασμό χρωμάτων του site.
