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

Η αναγνωσιμότητα είναι η διαφορά φωτεινότητας μεταξύ του χρώματος κειμένου και του χρώματος φόντου. Όσο μεγαλύτερη η διαφορά, τόσο πιο εύκολο είναι να διαβαστεί το κείμενο. Πολύ χαμηλή αντίθεση καθιστά το περιεχόμενο δυσανάγνωστο — ιδιαίτερα για άτομα με προβλήματα όρασης, ηλικιωμένους ή σε δύσκολες συνθήκες φωτισμού (π.χ. σε τηλέφωνο υπό άμεσο ηλιακό φως).
Σύμφωνα με τον Παγκόσμιο Οργανισμό Υγείας (WHO), περίπου 2,2 δισεκατομμύρια άνθρωποι παγκοσμίως έχουν κάποια μορφή προβλήματος όρασης. Επιπλέον, εκατομμύρια έχουν αχρωματοψία (περίπου 8% των ανδρών και 0,5% των γυναικών), και πολλοί περισσότεροι αντιμετωπίζουν μείωση της όρασης λόγω ηλικίας.
Το εργαλείο υπολογίζει την αναλογία αντίθεσης χρησιμοποιώντας τον τύπο που ορίζεται στις WCAG 2.1 (Web Content Accessibility Guidelines) — διεθνείς οδηγίες ψηφιακής προσβασιμότητας. Το αποτέλεσμα επιτρέπει αντικειμενική αξιολόγηση του αν τα χρώματα είναι αρκετά αναγνώσιμα, ανεξάρτητα από ρυθμίσεις οθόνης ή ατομική αντίληψη χρωμάτων.
Ο έλεγχος αναγνωσιμότητας διαρκεί μόλις λίγα δευτερόλεπτα:
Δεκαεξαδική μορφή — η πιο συνηθισμένη στον σχεδιασμό ιστοσελίδων. Ξεκινά με # και περιέχει 3 ή 6 χαρακτήρες (ψηφία 0-9 και γράμματα A-F).
#fff — λευκό (συντομογραφία)#ffffff — λευκό (πλήρης μορφή)#1a73e8 — μπλεΑναλογία αντίθεσης
8.59:1
Κανονικό κείμενο
Δείγμα κανονικού κειμένου
Μεγάλο κείμενο
Μετά την εισαγωγή χρωμάτων, το εργαλείο εμφανίζει αποτελέσματα σε τρεις ενότητες:
Πράσινη ένδειξη σημαίνει ότι η απαίτηση πληρείται. Κόκκινη ένδειξη σημαίνει ότι η αντίθεση είναι πολύ χαμηλή και χρειάζεται βελτίωση.
Το εργαλείο εμφανίζει την αναλογία αντίθεσης σε κλίμακα από 1:1 (καμία αντίθεση) έως 21:1 (μέγιστη αντίθεση — μαύρο σε λευκό). Το αποτέλεσμα συγκρίνεται με τα κατώφλια που ορίζει το πρότυπο WCAG:
Το Επίπεδο AA είναι το ελάχιστο που απαιτείται από τους κανονισμούς ψηφιακής προσβασιμότητας σε πολλές χώρες, συμπεριλαμβανομένης της Οδηγίας της ΕΕ για την Προσβασιμότητα του Διαδικτύου. Το Επίπεδο AAA παρέχει καλύτερη αναγνωσιμότητα αλλά δεν είναι πάντα πρακτικό να επιτευχθεί για όλα τα στοιχεία.
Αν η αντίθεση είναι πολύ χαμηλή, δεν χρειάζεται να ψάχνετε το σωστό χρώμα με δοκιμή και σφάλμα. Η λειτουργία Αντιστοίχιση βρίσκει αυτόματα μια παραλλαγή χρώματος κειμένου που πληροί το επιλεγμένο κατώφλι αντίθεσης.
Πώς λειτουργεί η αντιστοίχιση:
Ο αλγόριθμος διατηρεί την απόχρωση και τον κορεσμό του αρχικού χρώματος, αλλάζοντας μόνο τη φωτεινότητα. Το προτεινόμενο χρώμα παραμένει συνεπές με την οπτική ταυτότητα ενώ πληροί το πρότυπο προσβασιμότητας.
| Funkcja | Επίπεδο AA (ελάχιστο) | Επίπεδο AAA (ενισχυμένο) |
|---|---|---|
| Κανονικό κείμενο — ελάχ. 4.5:1 | ||
| Κανονικό κείμενο — ελάχ. 7:1 | ||
| Μεγάλο / bold κείμενο — ελάχ. 3:1 | ||
| Μεγάλο / bold κείμενο — ελάχ. 4.5:1 | ||
| Εικονίδια και στοιχεία UI — ελάχ. 3:1 | ||
| Νομικά απαιτούμενο (Οδηγία ΕΕ) | ||
| Απαιτείται από US ADA / Section 508 | ||
| Απαιτείται από UK Equality Act 2010 | ||
| Συνιστάται για κρίσιμο περιεχόμενο |
Ελέγξτε τη μορφή χρώματος. Ένας κωδικός HEX πρέπει να ξεκινά με # και να περιέχει 3 ή 6 χαρακτήρες (π.χ. #fff ή #ffffff). Για RGB, βεβαιωθείτε ότι οι τιμές χωρίζονται με κόμματα και κυμαίνονται μεταξύ 0-255.
Όταν το φόντο και το κείμενο έχουν παρόμοια φωτεινότητα στην ίδια απόχρωση, ο αλγόριθμος μπορεί να μην βρει παραλλαγή που να πληροί τις απαιτήσεις χωρίς αλλαγή της απόχρωσης. Σε αυτή την περίπτωση, εξετάστε την αλλαγή του χρώματος φόντου ή την επιλογή εντελώς διαφορετικού χρώματος κειμένου.
Ο επιλογέας χρωμάτων του προγράμματος περιήγησης υποστηρίζει μόνο τη μορφή HEX χωρίς διαφάνεια. Εάν εισαγάγετε χρώμα σε μορφή RGBA ή HSLA με διαφάνεια, ο επιλογέας θα εμφανίσει μόνο το χρωματικό μέρος (χωρίς άλφα). Οι υπολογισμοί αντίθεσης εξακολουθούν να λαμβάνουν υπόψη τη διαφάνεια.
Η Ελλάδα ενσωμάτωσε την Οδηγία της ΕΕ για την προσβασιμότητα του ιστού μέσω του Ν. 4591/2019. Ο νόμος απαιτεί από τους φορείς του δημόσιου τομέα να πληρούν το πρότυπο EN 301 549, που αντιστοιχεί στο WCAG 2.1 επιπέδου AA.
Η αναγνωσιμότητα έχει σημασία παντού όπου κάποιος χρειάζεται να διαβάσει κείμενο ή να αναγνωρίσει ένα στοιχείο UI:
Η αχρωματοψία επηρεάζει περίπου 8% των ανδρών και 0,5% των γυναικών. Τα άτομα με αχρωματοψία μπορεί να δυσκολεύονται να διακρίνουν ορισμένα ζεύγη χρωμάτων, ακόμα κι αν η αντίθεση φωτεινότητας είναι επαρκής.
Πιο συνηθισμένοι τύποι αχρωματοψίας:
Αυτό το εργαλείο ελέγχει την αντίθεση φωτεινότητας, η οποία είναι σημαντική για όλους τους χρήστες. Ωστόσο, κατά τον σχεδιασμό, αξίζει επίσης να αποφεύγετε προβληματικούς συνδυασμούς χρωμάτων (π.χ. κόκκινο κείμενο σε πράσινο φόντο) και να μη βασίζεστε αποκλειστικά στο χρώμα για τη μετάδοση πληροφοριών — χρησιμοποιήστε σχήματα, εικονίδια και κείμενο.

Έχετε μια ιδέα για μια νέα λειτουργία, βρήκατε ένα σφάλμα ή θέλετε να προτείνετε ένα άλλο εργαλείο που θα διευκόλυνε τη δουλειά σας; Γράψτε μας – απαντάμε εντός 24 ωρών.

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