Αντίθεση χρωμάτων για κείμενο, κουμπιά και εικονίδια

Γιατί μετράει η αντίθεση

Το χλωμό κείμενο κοστίζει αναγνώστες. Άτομα με χαμηλή όραση, μεγαλύτεροι σε ηλικία αναγνώστες και όποιος κοιτάζει ένα κινητό σε δυνατό φως χρειάζονται σαφή διαφορά ανάμεσα σε κείμενο και φόντο. Γι' αυτό οι Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού (WCAG) του W3C ορίζουν ελάχιστες τιμές για το κείμενο, για στοιχεία ελέγχου όπως κουμπιά και πεδία εισαγωγής, και για εικονίδια και γραφικά. Μπορούν να μετρηθούν και να ελεγχθούν πριν από την κυκλοφορία.

Πώς λειτουργεί ο λόγος αντίθεσης

Ο λόγος αντίθεσης συγκρίνει πόσο φωτεινά είναι δύο χρώματα. Το WCAG δεν κοιτάζει την απόχρωση αλλά τη σχετική φωτεινότητα: μια τιμή από 0 για το πιο σκούρο μαύρο έως 1 για το πιο φωτεινό λευκό. Τα τρία κανάλια κόκκινο, πράσινο και μπλε μετατρέπονται και σταθμίζονται: το πράσινο μετράει περισσότερο, το κόκκινο λιγότερο και το μπλε ακόμη λιγότερο. Ο λόγος είναι (L1 + 0,05) / (L2 + 0,05), όπου L1 η φωτεινότητα του πιο ανοιχτού χρώματος. Το αποτέλεσμα βρίσκεται ανάμεσα σε 1:1 για δύο ίδια χρώματα και 21:1 για μαύρο σε λευκό.

Δύο κανόνες του W3C μετράνε στην πράξη. Πρώτον, οι τιμές δεν στρογγυλοποιούνται: ένας λόγος 4,499:1 δεν πληροί το όριο των 4,5:1. Δεύτερον, η αντίθεση μετριέται σε σχέση με το φόντο που ορίζεται για το κείμενο. Αν μια σελίδα ορίζει μόνο χρώμα κειμένου και όχι χρώμα φόντου, το W3C το μετρά ως αποτυχία, γιατί το προεπιλεγμένο φόντο του επισκέπτη είναι άγνωστο. Όριζε πάντα και τα δύο χρώματα μαζί.

Τα τρία κριτήρια επιτυχίας

• 1.4.3 Αντίθεση (ελάχιστη), επίπεδο AA: το κείμενο και οι εικόνες κειμένου χρειάζονται τουλάχιστον 4,5:1, το μεγάλο κείμενο τουλάχιστον 3:1.
• 1.4.6 Αντίθεση (βελτιωμένη), επίπεδο AAA: το κείμενο χρειάζεται τουλάχιστον 7:1, το μεγάλο κείμενο τουλάχιστον 4,5:1. Είναι το αυστηρότερο επίπεδο και βοηθά περισσότερο σε μεγάλα κείμενα.
• 1.4.11 Αντίθεση μη κειμενικού περιεχομένου, επίπεδο AA: τουλάχιστον 3:1 σε σχέση με τα διπλανά χρώματα, για ό,τι πρέπει να δεις για να αναγνωρίσεις ένα στοιχείο ελέγχου και την κατάστασή του (για παράδειγμα το περίγραμμα ενός πεδίου ή μια ένδειξη εστίασης) και για τα μέρη των γραφικών που χρειάζεσαι για να καταλάβεις το περιεχόμενο, όπως εικονίδια ή γραμμές σε ένα γράφημα.

Τι μετράει ως μεγάλο κείμενο

Μεγάλο κείμενο είναι τουλάχιστον 18 στιγμές, ή τουλάχιστον 14 στιγμές σε έντονη γραφή. Το W3C το μετατρέπει σε περίπου 24 pixel και περίπου 18,5 pixel σε έντονη γραφή. Το μεγάλο κείμενο μπορεί να έχει λιγότερη αντίθεση, γιατί τα γράμματα είναι μεγαλύτερα και οι γραμμές τους φαρδύτερες. Πρόσεχε τις λεπτές γραμματοσειρές: σύμφωνα με το W3C, η εξομάλυνση (anti-aliasing) μπορεί να κάνει λεπτές ή ασυνήθιστες γραμματοσειρές να φαίνονται πιο αχνές από το χρώμα που έχουν οριστεί. Συνιστά πιο χοντρές γραμματοσειρές ή ένα ζεύγος χρωμάτων σαφώς πάνω από το ελάχιστο.

Τι δεν χρειάζεται να περάσει

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

Συνηθισμένα λάθη

• Ανοιχτό γκρι σε λευκό. Το γκρι για ημερομηνίες, λεζάντες ή δευτερεύον κείμενο είναι συχνά πολύ χλωμό: το #999999 σε λευκό φτάνει μόνο 2,84:1. Το πιο ανοιχτό καθαρό γκρι που περνά το AA για κανονικό κείμενο σε λευκό είναι το #767676 με 4,54:1.
• Κείμενο πάνω σε εικόνες. Η αντίθεση αλλάζει σε κάθε σημείο της φωτογραφίας. Το W3C καταγράφει τις εικόνες φόντου χωρίς επαρκή αντίθεση ως αποτυχία (F83). Βάλε το κείμενο σε συμπαγή επιφάνεια, σκούρυνε την εικόνα πίσω του ή τοποθέτησε το κείμενο δίπλα στην εικόνα. Έλεγξε το πιο φωτεινό σημείο πίσω από το κείμενο.
• Κείμενο placeholder. Η γκρι υπόδειξη σε ένα κενό πεδίο εισαγωγής είναι κείμενο, και ισχύει γι' αυτήν το 1.4.3. Ένα ανοιχτό γκρι όπως το #9ca3af σε λευκό φτάνει μόνο 2,53:1. Ένα placeholder δεν αντικαθιστά επίσης μια ορατή ετικέτα.
• Καταστάσεις hover και εστίασης. Κείμενο που εμφανίζεται ή αλλάζει όταν περνά από πάνω το ποντίκι ή με την εστίαση του πληκτρολογίου πρέπει να πληροί τις ίδιες τιμές. Ένα εφέ hover δεν πρέπει να μειώνει την αντίθεση ενός στοιχείου ελέγχου ή να αποδυναμώνει την ένδειξη εστίασης. Μια ένδειξη εστίασης που σχεδιάζεις μόνος σου χρειάζεται 3:1 σε σχέση με το διπλανό φόντο.
• Λευκό κείμενο σε φωτεινά χρώματα επωνυμίας. Πορτοκαλί, κίτρινα, ανοιχτοπράσινα ή τιρκουάζ κουμπιά με λευκό κείμενο συχνά αποτυγχάνουν: λευκό σε #ff6600 φτάνει 2,93:1.
• Χλωμά περιγράμματα και εικονίδια. Αν το περίγραμμα είναι το μόνο που δείχνει πού είναι ένα πεδίο εισαγωγής, χρειάζεται 3:1: το #cccccc σε λευκό έχει 1,60:1. Τα εικονίδια που μεταφέρουν νόημα χωρίς κείμενο, όπως ένα βέλος αναπτυσσόμενου μενού ή ένα εικονίδιο κλεισίματος, χρειάζονται επίσης 3:1.
• Έλεγχος μόνο ενός θέματος. Αν ο ιστότοπός σου έχει σκούρα λειτουργία, έλεγξε χωριστά τα ζεύγη χρωμάτων της. Ένα χρώμα που λειτουργεί σε λευκό μπορεί να αποτύχει σε σκούρο φόντο.

Διόρθωσε μια παλέτα επωνυμίας χωρίς να χάσεις την ταυτότητα

1. 1Κατάγραψε κάθε χρώμα με τον ρόλο του: κείμενο, φόντο, έμφαση ή κουμπί, περίγραμμα. Πολλά προβλήματα ξεκινούν όταν ένα χρώμα κάνει όλες τις δουλειές.
2. 2Κράτα το χρώμα της επωνυμίας εκεί όπου οι κανόνες πληρούνται πιο εύκολα ή δεν ισχύουν: στο λογότυπο, σε μεγάλες επιφάνειες, για διακόσμηση και για μεγάλες επικεφαλίδες.
3. 3Για κείμενο και μικρά στοιχεία, χρησιμοποίησε μια πιο σκούρα ή πιο ανοιχτή απόχρωση του ίδιου χρώματος. Αν αλλάζει μόνο η φωτεινότητα, το χρώμα μένει αναγνωρίσιμο: λευκό κείμενο σε #c74f00, ένα πιο σκούρο πορτοκαλί, φτάνει 4,61:1.
4. 4Ή άλλαξε αντί γι' αυτό το χρώμα του κειμένου. Σκούρο κείμενο σε φωτεινό χρώμα επωνυμίας συχνά λειτουργεί καλύτερα από το λευκό: #1a1a1a σε #ff6600 φτάνει 5,92:1.
5. 5Όρισε ένα γκρι για δευτερεύον κείμενο που περνά, για παράδειγμα #767676 σε λευκό, και χρησιμοποίησέ το παντού αντί για διάφορα χλωμά γκρι.
6. 6Έλεγξε κάθε κατάσταση: κανονική, hover, εστίαση, σφάλμα και σκούρα λειτουργία. Αποθήκευσε τα τελικά χρώματα ως μεταβλητές στο φύλλο στυλ σου, ώστε να μη διαλέξει ξανά κανείς με το χέρι ένα χλωμό χρώμα.

Έλεγξε τα χρώματά σου με το Do4U

Ο Έλεγχος αντίθεσης χρωμάτων υπολογίζει αυτές τις τιμές για τα δικά σου χρώματα. Γράφεις τα χρώματά σου, ένα ανά γραμμή, και δίνεις στο καθένα έναν ρόλο: κείμενο, φόντο, έμφαση (για παράδειγμα ένα κουμπί) ή περίγραμμα. Ο κώδικας ελέγχει κάθε λογικό ζεύγος με βάση τα AA και AAA για κανονικό και μεγάλο κείμενο και με βάση το 3:1 για περιγράμματα, εικονίδια και επιφάνειες κουμπιών, χωρίς στρογγυλοποίηση προς τα πάνω. Για κάθε ζεύγος που αποτυγχάνει, παίρνεις το πλησιέστερο χρώμα που περνά, μία φορά πιο σκούρο και μία πιο ανοιχτό, στην ίδια απόχρωση. Το Do4U φτιάχνει επίσης μια προσαρμοσμένη παλέτα, την ελέγχει ξανά συνολικά και την εξάγει ως CSS custom properties, SCSS ή JSON. Όλα τρέχουν σε κώδικα, χωρίς ΤΝ, και ο έλεγχος είναι δωρεάν.

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