Το εργαλείο χρησιμοποιεί τον επίσημο τύπο σχετικής φωτεινότητας του WCAG, οπότε τα αποτελέσματά του συμφωνούν με τον WebAIM checker και τους περισσότερους ελέγχους προσβασιμότητας. Όλη η επεξεργασία γίνεται στον browser - τα χρώματά σας δεν στέλνονται πουθενά και δεν υπάρχουν όρια χρήσης.
Color Contrast Checker
Λειτουργεί εξ ολοκλήρου στον browser σας - χωρίς μεταφόρτωση, χωρίς εγγραφή.
Λόγος αντίθεσης
Περνάχρειάζεται 4.5:1
Περνάχρειάζεται 3:1
Αποτυγχάνειχρειάζεται 7:1
Περνάχρειάζεται 4.5:1
Μεγάλο = 18pt (24px) ή 14pt (18,66px) bold.
Τι είναι ο έλεγχος αντίθεσης χρωμάτων;
Ο έλεγχος αντίθεσης χρωμάτων (color contrast checker) μετρά τον λόγο αντίθεσης μεταξύ του χρώματος κειμένου και του φόντου και σας δείχνει αν πληρούνται τα πρότυπα προσβασιμότητας WCAG. Επιστρέφει τιμή από 1:1 ως 21:1 και εμφανίζει αν το ζεύγος περνά ή αποτυγχάνει στα επίπεδα AA και AAA για κανονικό και μεγάλο κείμενο.
Πώς λειτουργεί
- 1Εισάγετε τα χρώματα. Γράψτε κωδικό hex, τιμή rgb() ή όνομα χρώματος CSS για το κείμενο και το φόντο, ή επιλέξτε χρώμα με τον color picker.
- 2Διαβάστε τον λόγο. Ο λόγος αντίθεσης ενημερώνεται σε πραγματικό χρόνο, με προεπισκόπηση του κειμένου πάνω στο φόντο.
- 3Ελέγξτε τις ενδείξεις. Κάθε ένδειξη δείχνει αν το ζεύγος περνά ή αποτυγχάνει στα επίπεδα WCAG AA και AAA για κανονικό και μεγάλο κείμενο.
Σε ποιους απευθύνεται
- Σχεδιαστές που δοκιμάζουν χρώματα brand πριν φτάσουν στην ανάπτυξη.
- Front-end developers που ελέγχουν χρώματα κουμπιών, συνδέσμων και ετικετών έναντι του WCAG AA.
- Ελεγκτές προσβασιμότητας που τεκμηριώνουν αποτυχίες αντίθεσης με ακριβείς λόγους.
- Ομάδες περιεχομένου και email που επιβεβαιώνουν ότι το κείμενο παραμένει ευανάγνωστο σε χρωματιστά φόντα.
Συχνές ερωτήσεις
Είναι δωρεάν ο color contrast checker;
Ναι - είναι εντελώς δωρεάν, χωρίς εγγραφή και χωρίς όρια. Λειτουργεί αποκλειστικά στον browser σας.
Ποιον λόγο αντίθεσης χρειάζομαι για το WCAG AA;
Το WCAG 2.1 επίπεδο AA απαιτεί λόγο αντίθεσης τουλάχιστον 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο. Το επίπεδο AAA ανεβάζει αυτά τα όρια σε 7:1 για κανονικό κείμενο και 4,5:1 για μεγάλο.
Τι θεωρείται μεγάλο κείμενο;
Μεγάλο κείμενο είναι τουλάχιστον 18pt (περίπου 24px) σε κανονικό βάρος, ή 14pt (περίπου 18,66px) σε bold. Το μεγάλο κείμενο επιτρέπεται να έχει χαμηλότερο λόγο αντίθεσης, γιατί τα μεγαλύτερα γράμματα διαβάζονται ευκολότερα.
Πώς υπολογίζεται ο λόγος αντίθεσης;
Ο τύπος είναι (L1 + 0,05) / (L2 + 0,05), όπου L1 και L2 είναι η σχετική φωτεινότητα του πιο ανοιχτόχρωμου και του πιο σκουρόχρωμου χρώματος. Η φωτεινότητα υπολογίζεται από τα κανάλια sRGB κόκκινου, πράσινου και μπλε σύμφωνα με τον ορισμό WCAG 2.x.
Υποστηρίζει hex, RGB και ονόματα χρωμάτων;
Ναι. Μπορείτε να εισάγετε hex 3, 4, 6 ή 8 ψηφίων, τιμές rgb() και rgba(), ή οποιοδήποτε όνομα χρώματος CSS όπως το teal. Μπορείτε επίσης να επιλέξετε χρώμα με τον color picker.
Γιατί ο ίδιος λόγος περνά μερικές φορές και άλλες αποτυγχάνει;
Ο απαιτούμενος λόγος εξαρτάται από το μέγεθος κειμένου και το επίπεδο που στοχεύετε. Ένας λόγος 3,5:1 αποτυγχάνει στο AA για κανονικό κείμενο, αλλά περνά το AA για μεγάλο - γι' αυτό να ελέγχετε πάντα σε σχέση με το μέγεθος και το επίπεδο που χρησιμοποιείτε.