Δωρεάν Ελεγκτής Αντίθεσης Χρωμάτων

Δοκιμάστε τους συνδυασμούς χρωμάτων κειμένου και φόντου σας για συμμόρφωση προσβασιμότητας WCAG 2.1. Αποκτήστε άμεσα αποτελέσματα επιτυχίας/αποτυχίας για πρότυπα AA και AAA — χωρίς εγγραφή.

94,217+ ελέγχοι αντίθεσης έγιναν

Λόγος Αντίθεσης

17.06:1

Προεπισκόπηση Μεγάλου Κειμένου (24px)

Προεπισκόπηση κανονικού κειμένου σώματος (16px). Η γρήγορη καφέ αλεπού πηδά πάνω από τον τεμπέλη σκύλο.

Μικρό κείμενο (14px) — συχνά χρησιμοποιείται για λεζάντες, υποσημειώσεις και μεταδεδομένα.

Αντεστραμμένο: φόντο στο χρώμα κειμένου (17.06:1 — ίδιος λόγος)

AA Κανονικό Κείμενο

Απαιτεί 4,5:1

ΕΠΙΤΥΧΙΑ

AA Μεγάλο Κείμενο

Απαιτεί 3:1

ΕΠΙΤΥΧΙΑ

AAA Κανονικό Κείμενο

Απαιτεί 7:1

ΕΠΙΤΥΧΙΑ

AAA Μεγάλο Κείμενο

Απαιτεί 4,5:1

ΕΠΙΤΥΧΙΑ

Έτοιμοι να κατασκευάσετε προσβάσιμο ιστότοπο με αυτά τα χρώματα;

Κατασκευή με αυτά τα χρώματα

Τι Είναι ο Ελεγκτής Αντίθεσης Χρωμάτων;

Ο ελεγκτής αντίθεσης χρωμάτων είναι ένα εργαλείο που μετρά τη διαφορά φωτεινότητας μεταξύ δύο χρωμάτων — συνήθως κειμένου προσκηνίου και φόντου — και υπολογίζει λόγο αντίθεσης σύμφωνα με τις Κατευθυντήριες Γραμμές Προσβασιμότητας Περιεχομένου Ιστού (WCAG). Αυτός ο λόγος καθορίζει αν ο συνδυασμός χρωμάτων σας είναι αναγνώσιμος για άτομα με οπτικές αναπηρίες.

Ο ελεγκτής αντίθεσης της Kleap υπολογίζει άμεσα τον λόγο αντίθεσης WCAG 2.1 και τον δοκιμάζει σε όλα τα επίπεδα συμμόρφωσης: AA Κανονικό Κείμενο (4,5:1), AA Μεγάλο Κείμενο (3:1), AAA Κανονικό Κείμενο (7:1) και AAA Μεγάλο Κείμενο (4,5:1).

Επίπεδα Αντίθεσης WCAG Επεξηγημένα

AA Κανονικό Κείμενο

Ελάχιστο 4,5:1

Απαιτεί ελάχιστο λόγο αντίθεσης 4,5:1. Ο πιο συνηθισμένος στόχος συμμόρφωσης και ισχύει για κείμενο κάτω των 18pt.

AA Μεγάλο Κείμενο

Ελάχιστο 3:1

Απαιτεί ελάχιστο λόγο αντίθεσης 3:1. Ισχύει για κείμενο τουλάχιστον 18pt (24px) ή 14pt έντονο.

AAA Κανονικό Κείμενο

Ελάχιστο 7:1

Το υψηλότερο πρότυπο, που απαιτεί λόγο αντίθεσης 7:1. Διασφαλίζει αναγνωσιμότητα για χρήστες με μέτρια χαμηλή όραση.

AAA Μεγάλο Κείμενο

Ελάχιστο 4,5:1

Απαιτεί 4,5:1 για μεγάλο κείμενο στο επίπεδο AAA. Παρέχει ενισχυμένη αναγνωσιμότητα για επικεφαλίδες.

5 Συμβουλές για Δημιουργία Προσβάσιμων Παλετών Χρωμάτων

1

Ξεκινήστε με αντίθεση

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

2

Μη βασίζεστε μόνο στο χρώμα

Χρησιμοποιήστε εικονίδια, μοτίβα, υπογραμμίσεις ή ετικέτες παράλληλα με το χρώμα για μεταφορά νοήματος. Περίπου 8% των ανδρών έχουν κάποια μορφή αχρωματοψίας.

3

Δοκιμάστε σε πραγματικές συσκευές

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

4

Χρησιμοποιήστε επίσης dark mode

Αν ο ιστότοπός σας υποστηρίζει dark mode, επαληθεύστε τους λόγους αντίθεσης και για τα δύο θέματα. Ένα ζεύγος χρωμάτων που περνά σε light mode μπορεί να αποτύχει σε dark mode.

5

Προσέξτε το βάρος γραμματοσειράς

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

6

Ελέγξτε τις διαδραστικές καταστάσεις

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

Σύγκριση Ελεγκτών Αντίθεσης

ΧαρακτηριστικόKleapWebAIMCoolorsAdobe Color
ΤιμήΔωρεάνΔωρεάνFreemiumΔωρεάν (με λογαριασμό Adobe)
Ζωντανή ΠροεπισκόπησηΝαι, ζωντανό κείμενο σε φόντοΝαι, βασικήΝαιΝαι
Πλησιέστερο Προσβάσιμο ΧρώμαΝαι, αυτόματη πρότασηΌχιΌχιΜερική
Επίπεδα WCAG που ΔοκιμάζονταιAA + AAA (κανονικό + μεγάλο)AA + AAAΜόνο AAAA + AAA
Ενσωματωμένος Κατασκευαστής ΙστοτόπουΝαι, με AIΌχιΌχιΌχι
Κουμπί Εναλλαγής ΧρωμάτωνΝαιΌχιΌχιΌχι
Τυχαίο Προσβάσιμο ΖεύγοςΝαιΌχιΌχιΌχι

Συχνές Ερωτήσεις

Τι είναι ο λόγος αντίθεσης WCAG;+
Ο λόγος αντίθεσης WCAG είναι μέτρηση που συγκρίνει τη σχετική φωτεινότητα δύο χρωμάτων. Κυμαίνεται από 1:1 (ίδιο χρώμα) έως 21:1 (λευκό σε μαύρο). Το WCAG 2.1 απαιτεί ελάχιστο 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο για συμμόρφωση AA.
Πρέπει ο ιστότοπός μου να συμμορφώνεται με WCAG;+
Εξαρτάται από την τοποθεσία και τον τύπο ιστοτόπου σας. Στις ΗΠΑ, Ηνωμένο Βασίλειο και ΕΕ, οι κυβερνητικοί ιστότοποι πρέπει να συμμορφώνονται με τα πρότυπα προσβασιμότητας. Πολλές ιδιωτικές εταιρείες στοχεύουν εθελοντικά AA.
Πώς λειτουργεί ο ελεγκτής αντίθεσης;+
Το εργαλείο αναλύει δύο χρώματα για τη σχετική φωτεινότητά τους (υπολογισμένη σύμφωνα με WCAG 2.1). Ο λόγος φωτεινότητας δοκιμάζεται σε όλα τα κατώφλια WCAG, παράγοντας άμεσα αποτελέσματα επιτυχίας/αποτυχίας.
Χρειάζομαι συμμόρφωση AA και AAA;+
Τα περισσότερα έργα στοχεύουν AA. Οι απαιτήσεις AAA είναι πολύ αυστηρές (7:1 για κανονικό κείμενο). Το AA είναι το αποδεκτό πρότυπο για τις περισσότερες νομικές δομές.
Πώς ελέγχω κείμενο πάνω σε gradients ή εικόνες;+
Δοκιμάστε το χρώμα στο φωτεινότερο σημείο του gradient έναντι του χρώματος κειμένου — αυτό είναι το χειρότερο σενάριο. Για συνδυασμούς gradient και κειμένου, η προσθήκη σκιάς κειμένου 50% αδιαφανούς μαύρου αυξάνει σημαντικά την αναγνωσιμότητα.
Αρκεί το WCAG AA για τον ιστότοπό μου;+
Το WCAG AA είναι το πρότυπο που αναφέρεται από τους περισσότερους νόμους προσβασιμότητας παγκοσμίως, συμπεριλαμβανομένων ADA (ΗΠΑ), EAA (ΕΕ) και EN 301 549 (Ευρώπη). Για τους περισσότερους ιστοτόπους και εφαρμογές, η συμμόρφωση AA είναι τόσο νομικά επαρκής όσο και παρέχει καλή αναγνωσιμότητα. Το AAA συνιστάται για κυβερνητικούς ιστοτόπους, υγεία και εκπαίδευση.
Τι γίνεται αν τα χρώματα της μάρκας μου αποτυγχάνουν στην αντίθεση;+
Έχετε αρκετές επιλογές: ελαφρά προσαρμογή της απόχρωσης του χρώματος μάρκας (συχνά μια μικρή αλλαγή φωτεινότητας αρκεί), χρήση χρώματος μάρκας μόνο για διακοσμητικά στοιχεία και χρώμα υψηλής αντίθεσης για κείμενο, ή προσθήκη ημι-διαφανούς overlay πίσω από κείμενο σε έγχρωμα φόντα. Το εργαλείο μας προτείνει αυτόματα το πλησιέστερο προσβάσιμο χρώμα.
Έχει σημασία η αντίθεση για το dark mode;+
Απολύτως. Οι ίδιες απαιτήσεις αντίθεσης WCAG ισχύουν ανεξάρτητα από το χρωματικό σχήμα. Στην πραγματικότητα, το dark mode εισάγει μοναδικές προκλήσεις: το καθαρό λευκό (#FFFFFF) κείμενο σε πολύ σκούρο φόντο μπορεί να προκαλέσει halation για χρήστες με αστιγματισμό. Ένα ελαφρώς off-white (#E0E0E0 έως #F0F0F0) σε σκούρο γκρι εξασφαλίζει καλύτερη αναγνωσιμότητα.
Μπορούν οι χρήστες με αχρωματοψία να βλέπουν επαρκή αντίθεση;+
Οι υψηλοί λόγοι αντίθεσης βοηθούν σημαντικά τους χρήστες με αχρωματοψία, αλλά η αντίθεση από μόνη της δεν επαρκεί. Το WCAG απαιτεί επίσης το χρώμα να μην είναι το μόνο μέσο μεταφοράς πληροφοριών. Για παράδειγμα, μη χρησιμοποιείτε μόνο κόκκινο/πράσινο για σφάλμα/επιτυχία — προσθέστε εικονίδια ή ετικέτες κειμένου.
Πώς δοκιμάζω την αντίθεση στον υπάρχοντα ιστότοπό μου;+
Μπορείτε να χρησιμοποιήσετε browser DevTools (το Lighthouse audit του Chrome περιλαμβάνει ελέγχους αντίθεσης), επεκτάσεις browser όπως axe ή WAVE, ή να επικολλήσετε τις ακριβείς τιμές HEX/RGB σας σε αυτό το εργαλείο. Για ολοκληρωμένες δοκιμές, χρησιμοποιήστε αυτοματοποιημένα εργαλεία όπως το Lighthouse για πλήρη σάρωση σελίδας.

Έτοιμοι να Κατασκευάσετε Προσβάσιμο Ιστότοπο;

Ο κατασκευαστής ιστοτόπων AI της Kleap κατασκευάζεται με γνώμονα την προσβασιμότητα. Δημιουργήστε ιστότοπο συμβατό με WCAG και οπτικά εντυπωσιακό σε λίγα λεπτά.

Δωρεάν Δημιουργία Ιστοτόπου

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

Δωρεάν Ελεγκτής Αντίθεσης Χρωμάτων | Εργαλείο Προσβασιμότητας WCAG 2026