Αντίθεση χρωμάτων: οι λόγοι του WCAG, έλεγχος και διορθώσεις

Το ανοιχτό γκρι κείμενο σε λευκό φόντο φαίνεται καθαρό σε ένα αρχείο σχεδίασης. Σε ένα κινητό κάτω από δυνατό ήλιο, ή για κάποιον με χαμηλή όραση, διαβάζεται με κόπο. Είναι επίσης η συχνότερη αστοχία προσβασιμότητας που υπάρχει: το WebAIM Million 2026 (ανοίγει σε νέα καρτέλα) βρήκε κείμενο χαμηλής αντίθεσης στο 83,9% του ενός εκατομμυρίου κορυφαίων αρχικών σελίδων, με 34 διακριτές περιπτώσεις ανά σελίδα κατά μέσο όρο.

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

Τι είναι ο λόγος αντίθεσης χρωμάτων;

Ο λόγος αντίθεσης είναι ένας αριθμός που συγκρίνει τη σχετική φωτεινότητα (luminance) δύο χρωμάτων, συνήθως του κειμένου και του φόντου του. Το WCAG τον υπολογίζει με σταθερό τύπο, και το αποτέλεσμα κυμαίνεται από 1:1 (καμία διαφορά, λευκό σε λευκό) έως 21:1 (μαύρο σε λευκό). Όσο μεγαλύτερος ο αριθμός, τόσο πιο εύκολα ξεχωρίζουν τα δύο χρώματα.

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

Η άλλη λεπτομέρεια που συχνά ξεφεύγει είναι η στρογγυλοποίηση. Το επεξηγηματικό έγγραφο του W3C για το 1.4.3 (ανοίγει σε νέα καρτέλα) αναφέρει ότι οι υπολογισμένες τιμές «δεν πρέπει να στρογγυλοποιούνται (π.χ. το 4,499:1 δεν θα πληρούσε το όριο του 4,5:1)». Έτσι το γκρι #767676 σε λευκό (4,54:1) περνά, ενώ το #777777 σε λευκό (4,48:1) αποτυγχάνει, παρότι κανείς δεν θα τα ξεχώριζε με το μάτι.

Τι λόγο αντίθεσης απαιτεί το WCAG;

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

Γιατί 4,5:1; Το W3C εξηγεί ότι ο λόγος αυτός «αντισταθμίζει την απώλεια ευαισθησίας στην αντίθεση που συνήθως παρουσιάζουν χρήστες με απώλεια όρασης ισοδύναμη με όραση περίπου 20/40». Με άλλα λόγια, έχει οριστεί για άτομα με μέτρια μειωμένη όραση (το 20/40 αντιστοιχεί περίπου σε 5/10), και σε αυτούς ανήκουν πολλοί ηλικιωμένοι πελάτες που δεν θα έλεγαν ποτέ ότι έχουν αναπηρία.

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

Τι θεωρείται μεγάλο κείμενο;

Μεγάλο κείμενο στο WCAG σημαίνει τουλάχιστον 18 pt, ή τουλάχιστον 14 pt αν είναι έντονο. Το W3C τα μετατρέπει σε περίπου 24 pixel CSS και 18,5 pixel για το έντονο. Ό,τι είναι μικρότερο χρειάζεται ολόκληρο το 4,5:1. Το κυρίως κείμενο, οι λεζάντες, οι ετικέτες φορμών, οι τιμές και οι σύνδεσμοι του υποσέλιδου σχεδόν ποτέ δεν είναι μεγάλο κείμενο, οπότε χρειάζονται τον υψηλότερο λόγο.

Δείτε πώς λειτουργεί αυτό στην πράξη. Το γκρι #949494 σε λευκό βγάζει 3,03:1. Αρκεί για μια επικεφαλίδα 28 pixel και αποτυγχάνει σε μια παράγραφο 16 pixel στο ίδιο χρώμα. Πολλοί ιστότοποι περνούν στις επικεφαλίδες και αποτυγχάνουν σε όλα όσα βρίσκονται από κάτω.

Οι λεπτές και οι διακοσμητικές γραμματοσειρές θέλουν ιδιαίτερη προσοχή. Το W3C σημειώνει ότι, λόγω της εξομάλυνσης των άκρων (anti-aliasing), τα προγράμματα περιήγησης μπορεί να αποδίδουν «ιδιαίτερα λεπτές ή ασυνήθιστες γραμματοσειρές» με «πολύ πιο αχνό χρώμα» από αυτό που διαλέξατε. Αν η γραμματοσειρά της μάρκας σας είναι σε λεπτό βάρος, αφήστε περιθώριο πάνω από το 4,5:1 αντί να στοχεύετε στο 4,51.

Ισχύει η αντίθεση για κουμπιά, εικονίδια, ενδείξεις εστίασης και γραφήματα;

Ναι. Σύμφωνα με το κριτήριο επιτυχίας 1.4.11 (επίπεδο AA), ό,τι χρειάζεται να δει κανείς για να αναγνωρίσει ένα χειριστήριο, την κατάστασή του ή ένα γραφικό πρέπει να έχει 3:1 σε σχέση με τα χρώματα δίπλα του. Αυτό καλύπτει τα περιγράμματα των πεδίων φορμών, τα εικονίδια χωρίς ετικέτα κειμένου, τα περιγράμματα εστίασης, τις καταστάσεις των πλαισίων ελέγχου και των διακοπτών, καθώς και τις γραμμές και τα τμήματα των γραφημάτων. Το κείμενο μέσα σε ένα κουμπί χρειάζεται και πάλι 4,5:1.

• Πεδία φορμών: ένα ανοιχτό γκρι περίγραμμα #CCCCCC σε λευκό βγάζει 1,61:1. Αν αυτή η αχνή γραμμή είναι το μόνο που δείχνει πού γράφει κανείς, αποτυγχάνει.
• Κουμπιά: το WCAG δεν απαιτεί ορατό περίγραμμα γύρω από κάθε κουμπί. Το επεξηγηματικό έγγραφο του W3C για το 1.4.11 (ανοίγει σε νέα καρτέλα) αναφέρει ότι περίγραμμα χρειάζεται μόνο όταν δεν υπάρχει άλλος οπτικός τρόπος να αναγνωριστεί το χειριστήριο. Αν ένα κουμπί αναγνωρίζεται μόνο από το χρωματιστό σχήμα του, αυτό το σχήμα χρειάζεται 3:1 σε σχέση με τη σελίδα.
• Εικονίδια: ένας μεγεθυντικός φακός αναζήτησης, μια καρδιά για τη λίστα επιθυμιών ή ένα καλάθι χωρίς κείμενο δίπλα χρειάζεται 3:1.
• Ενδείξεις εστίασης: το περίγραμμα που δείχνει την εστίαση του πληκτρολογίου πρέπει να έχει αντίθεση με το φόντο γύρω του. Ο οδηγός μας για το WCAG 2.2 καλύπτει τα νεότερα κριτήρια για την εστίαση.
• Γραφήματα: οι γραμμές ενός γραμμικού γραφήματος και τα κομμάτια μιας πίτας χρειάζονται 3:1, εκτός αν οι ίδιες τιμές εμφανίζονται και ως κείμενο.
• Τα ανενεργά χειριστήρια εξαιρούνται, αν και οι χρήστες πρέπει και πάλι να μπορούν να καταλάβουν αν ένα κουμπί πατιέται.

Οι σύνδεσμοι μέσα στο κείμενο είναι ειδική περίπτωση. Αν ξεχωρίζουν μόνο με το χρώμα, χωρίς υπογράμμιση, η τεχνική G183 (ανοίγει σε νέα καρτέλα) του W3C ζητά 3:1 ανάμεσα στο χρώμα του συνδέσμου και στο γύρω κείμενο, ενώ και τα δύο χρειάζονται 4,5:1 σε σχέση με το φόντο. Το να βρείτε τρία χρώματα που ικανοποιούν όλα αυτά είναι δύσκολο. Μια υπογράμμιση είναι πολύ πιο εύκολη λύση.

Πώς ελέγχω την αντίθεση χρωμάτων;

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

• WebAIM Contrast Checker (ανοίγει σε νέα καρτέλα): βάζετε δύο δεκαεξαδικούς κωδικούς χρωμάτων και παίρνετε τον λόγο, με «περνά» ή «αποτυγχάνει» για κανονικό κείμενο, μεγάλο κείμενο και γραφικά αντικείμενα. Το ρυθμιστικό φωτεινότητας βοηθά να βρείτε την πλησιέστερη απόχρωση που περνά.
• Colour Contrast Analyser (ανοίγει σε νέα καρτέλα): δωρεάν εφαρμογή υπολογιστή της Vispero για Windows και macOS. Το σταγονόμετρό της παίρνει δείγμα από οποιοδήποτε pixel της οθόνης, κάτι χρήσιμο για κείμενο πάνω σε εικόνες, σε PDF και σε εφαρμογές, και περιλαμβάνει προσομοιωτή αχρωματοψίας.
• Chrome DevTools: επιθεωρήστε ένα κομμάτι κειμένου και ανοίξτε τον επιλογέα χρώματος. Η ενότητα για τον λόγο αντίθεσης (ανοίγει σε νέα καρτέλα) δείχνει γραμμές για AA και AAA και μπορεί να προτείνει χρώμα που περνά. Ο πίνακας CSS Overview παραθέτει κάθε πρόβλημα αντίθεσης της σελίδας.
• Εργαλεία αυτόματου ελέγχου: οι επεκτάσεις προγράμματος περιήγησης και το Lighthouse επισημαίνουν κείμενο χαμηλής αντίθεσης σε ολόκληρη τη σελίδα, αλλά συχνά χαρακτηρίζουν το κείμενο πάνω σε εικόνες ή διαβαθμίσεις ως κάτι που θέλει χειροκίνητο έλεγχο, αντί να το κρίνουν ως επιτυχία ή αποτυχία.

Όπου τα εργαλεία δεν φτάνουν, πάρτε δείγματα με το χέρι. Για κείμενο πάνω στη μεγάλη φωτογραφία στην κορυφή της σελίδας, ελέγξτε το πιο φωτεινό σημείο της εικόνας πίσω από τα πιο ανοιχτόχρωμα γράμματα· το W3C αναφέρει τις εικόνες φόντου χωρίς επαρκή αντίθεση ως γνωστή αποτυχία (F83). Περάστε τον δείκτη πάνω από τα κουμπιά, φτάστε σε αυτά με το Tab, προκαλέστε ένα σφάλμα σε μια φόρμα, γυρίστε στο σκούρο θέμα αν το προσφέρετε. Και ένα σκούρο θέμα μπορεί να αποτύχει: γκρι #757575 σε φόντο #121212 βγάζει 4,07:1. Ο οδηγός μας για το πώς ελέγχετε την προσβασιμότητα του ιστότοπού σας βάζει την αντίθεση δίπλα στους άλλους γρήγορους χειροκίνητους ελέγχους.

Πώς διορθώνω τη χαμηλή αντίθεση χωρίς να αλλάξω την ταυτότητα της μάρκας μου;

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

1. Φτιάξτε μια εκδοχή κάθε χρώματος της μάρκας σας που είναι ασφαλής για κείμενο, με τουλάχιστον 4,5:1 σε σχέση με τα κύρια φόντα σας, και χρησιμοποιήστε τη για το κυρίως κείμενο, τους συνδέσμους και τα μικρά εικονίδια.
2. Κρατήστε το αρχικό φωτεινό χρώμα για μεγάλες επικεφαλίδες (εκεί αρκεί το 3:1), φόντα, εικονογραφήσεις και διακοσμητικά στοιχεία.
3. Σε ανοιχτά χρώματα μάρκας, γυρίστε το κείμενο των κουμπιών από λευκό σε σκούρο.
4. Βάλτε ένα συμπαγές ή ημιδιαφανές πλαίσιο πίσω από το κείμενο που βρίσκεται πάνω σε φωτογραφίες.
5. Ελέγξτε κάθε κατάσταση: όταν περνά από πάνω ο δείκτης (hover), με εστίαση, μετά την επίσκεψη ενός συνδέσμου, όταν κάτι είναι επιλεγμένο, σε σφάλμα και στο κείμενο placeholder.
6. Αποθηκεύστε τα ζεύγη που περνούν ως design tokens ή ρυθμίσεις θέματος, ώστε οι νέες σελίδες να τα κληρονομούν αντί να τα επινοούν από την αρχή.

Σχεδιασμός για αχρωματοψία: γιατί το χρώμα μόνο του δεν αρκεί

Η αντίθεση και το χρώμα είναι ξεχωριστά προβλήματα. Περίπου 1 στους 12 άνδρες και 1 στις 200 γυναίκες έχουν κάποια διαταραχή της χρωματικής όρασης, συνήθως στο κόκκινο-πράσινο, σύμφωνα με το Colour Blind Awareness (ανοίγει σε νέα καρτέλα). Το WCAG 1.4.1 (ανοίγει σε νέα καρτέλα) (επίπεδο A) ορίζει ότι το χρώμα δεν πρέπει να είναι ο μόνος οπτικός τρόπος για να μεταδοθεί μια πληροφορία, οπότε συνδυάστε το με κείμενο, εικονίδια, μοτίβα ή υπογραμμίσεις.

• Σφάλματα φορμών: ένα κόκκινο περίγραμμα μόνο του αποτυγχάνει. Προσθέστε δίπλα στο πεδίο ένα μήνυμα όπως «Γράψτε ταχυδρομικό κώδικα», ιδανικά με ένα εικονίδιο.
• Απόθεμα και κατάσταση: μια πράσινη ή κόκκινη κουκκίδα δίπλα σε ένα προϊόν δεν λέει τίποτα σε πολλούς αγοραστές. Γράψτε «Διαθέσιμο» ή «Εξαντλήθηκε».
• Γραφήματα: ένα υπόμνημα που βασίζεται στην αντιστοίχιση χρωμάτων διαβάζεται δύσκολα. Βάλτε ετικέτες απευθείας στις γραμμές ή χρησιμοποιήστε μοτίβα και διαφορετικά στυλ γραμμής.
• Σύνδεσμοι: μέσα στο κυρίως κείμενο, υπογραμμίστε τους, για τους λόγους που είδαμε παραπάνω.

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

Αρκούν οι λειτουργίες υψηλής αντίθεσης και οι διακόπτες αντίθεσης;

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

Ορισμένα άτομα με αναπηρία χρησιμοποιούν τα θέματα αντίθεσης των Windows, που αντικαθιστούν τα χρώματά σας με τα δικά τους. Αξίζει να δοκιμάσετε τον ιστότοπό σας με ένα από αυτά ενεργό: εικονίδια φτιαγμένα από εικόνες φόντου μπορεί να εξαφανιστούν, όπως και στυλ εστίασης που σχεδιάζονται μόνο με box shadow. Το media query prefers-contrast της CSS σάς επιτρέπει επίσης να προσφέρετε μια εκδοχή με υψηλότερη αντίθεση σε όσους την έχουν ζητήσει από τις ρυθμίσεις του συστήματός τους.

Το δικό μας widget έχει προσαρμογή αντίθεσης και προφίλ για αχρωματοψία, και ορισμένοι επισκέπτες τα βρίσκουν χρήσιμα. Θα σας λέγαμε όμως το ίδιο: αν το κυρίως κείμενό σας είναι #999999 σε λευκό, αλλάξτε τη CSS. Το widget δίνει σε έναν επισκέπτη που θέλει περισσότερη αντίθεση τρόπο να την αποκτήσει. Δεν κάνει τα προεπιλεγμένα χρώματα που αποτυγχάνουν να περνούν, και το λέει και η ενότητα για το WCAG στην τεκμηρίωσή μας.