Ελέγξτε την αντίθεση χρωμάτων και αναγνωσιμότητα κατά WCAG

Το εργαλείο εμφανίζει την αναλογία αντίθεσης σε κλίμακα από 1:1 (καμία αντίθεση) έως 21:1 (μέγιστη αντίθεση - μαύρο σε λευκό). Το αποτέλεσμα συγκρίνεται με τα κατώφλια που ορίζει το πρότυπο WCAG:

• Κανονικό κείμενο - απαιτεί τουλάχιστον 4.5:1 για Επίπεδο AA (ελάχιστο πρότυπο) ή 7:1 για Επίπεδο AAA (ενισχυμένο πρότυπο). Ισχύει για κείμενο κάτω από 18pt (24px) ή κάτω από 14pt (18.5px) bold.
• Μεγάλο / bold κείμενο - απαιτεί τουλάχιστον 3:1 για Επίπεδο AA ή 4.5:1 για Επίπεδο AAA. Ισχύει για κείμενο από 18pt (24px) ή από 14pt (18.5px) bold - επικεφαλίδες, κουμπιά, τονισμένα στοιχεία.
• Εικονίδια και στοιχεία UI - απαιτούν τουλάχιστον 3:1 για Επίπεδο AA. Ισχύει για εικονίδια, κουμπιά, πεδία φορμών και άλλα στοιχεία interface που μεταφέρουν πληροφορία.

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

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

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

1. Επιλέξτε τον στόχο αντιστοίχισης από τη λίστα - π.χ. AA για κανονικό κείμενο ή AAA για μεγάλο κείμενο.
2. Κάντε κλικ στο κουμπί Αντιστοίχιση.
3. Το εργαλείο θα αναζητήσει παραλλαγές φωτεινότητας του χρώματος κειμένου και θα προτείνει την πλησιέστερη που πληροί τις απαιτήσεις.
4. Το προτεινόμενο χρώμα μπορεί να αντιγραφεί στο πρόχειρο ή να οριστεί αμέσως ως νέο χρώμα κειμένου.

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

Βλέπω μήνυμα σφάλματος μορφής χρώματος

Ελέγξτε τη μορφή χρώματος. Ένας κωδικός HEX πρέπει να ξεκινά με # και να περιέχει 3 ή 6 χαρακτήρες (π.χ. #fff ή #ffffff). Για RGB, βεβαιωθείτε ότι οι τιμές χωρίζονται με κόμματα και κυμαίνονται μεταξύ 0-255.

Η λειτουργία Προσαρμογής δεν βρίσκει κατάλληλο χρώμα

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

Ο επιλογέας χρωμάτων δεν αντιστοιχεί στον εισαγόμενο κωδικό

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

Η Ελλάδα ενσωμάτωσε την Οδηγία της ΕΕ για την προσβασιμότητα του ιστού μέσω του Ν. 4591/2019. Ο νόμος απαιτεί από τους φορείς του δημόσιου τομέα να πληρούν το πρότυπο EN 301 549, που αντιστοιχεί στο WCAG 2.1 επιπέδου AA.

• Δημόσιος τομέας - ιστότοποι δημόσιων υπηρεσιών, δήμων και οργανισμών κοινής ωφέλειας πρέπει να πληρούν WCAG 2.1 AA.
• Ευρωπαϊκός Νόμος Προσβασιμότητας (EAA) - από τον Ιούνιο 2025, οι υποχρεώσεις επεκτείνονται στον ιδιωτικό τομέα: ηλεκτρονικό εμπόριο, τράπεζες, μεταφορές.
• Κύπρος - ο Ν. 50(Ι)/2019 θέτει αντίστοιχες απαιτήσεις. Αν εξυπηρετείτε και τις δύο αγορές, ισχύουν τα ίδια πρότυπα WCAG 2.1 AA.
• Τουριστικός κλάδος - ιστότοποι ξενοδοχείων, αεροπορικών εταιρειών και τουριστικών υπηρεσιών αποτελούν προτεραιότητα, καθώς εξυπηρετούν διεθνές κοινό με ποικίλες ανάγκες προσβασιμότητας.

Η αχρωματοψία επηρεάζει περίπου 8% των ανδρών και 0,5% των γυναικών. Τα άτομα με αχρωματοψία μπορεί να δυσκολεύονται να διακρίνουν ορισμένα ζεύγη χρωμάτων, ακόμα κι αν η αντίθεση φωτεινότητας είναι επαρκής.

Πιο συνηθισμένοι τύποι αχρωματοψίας:

• Δευτερανωπία - δυσκολία διάκρισης πράσινου και κόκκινου (πιο συχνή μορφή)
• Πρωτανωπία - δυσκολία αντίληψης του κόκκινου
• Τριτανωπία - δυσκολία αντίληψης μπλε και κίτρινου (σπάνια)

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