Ελεγκτής αντίθεσης WCAG

Πληκτρολογήστε ή επιλέξτε δύο χρώματα και δείτε αμέσως τον λόγο αντίθεσης WCAG, με ενδείξεις επιτυχίας AA/AAA για κανονικό και μεγάλο κείμενο.

Πώς λειτουργεί το Ελεγκτής αντίθεσης

Αυτό το εργαλείο υπολογίζει τον λόγο αντίθεσης WCAG μεταξύ δύο χρωμάτων και δείχνει αν το ζεύγος πληροί το επίπεδο AA ή AAA για κανονικό κείμενο, μεγάλο κείμενο και μη κειμενικά στοιχεία διεπαφής. Όλοι οι υπολογισμοί γίνονται τοπικά στον browser σας· τα χρώματα που εισάγετε δεν μεταφορτώνονται ποτέ.

Συγγραφή από Bastien Sulyan

Ελεγκτής αντίθεσης: οδηγός βήμα προς βήμα

Εισαγάγετε ή επιλέξτε το χρώμα προσκηνίου (κειμένου).
Εισαγάγετε ή επιλέξτε το χρώμα φόντου.
Διαβάστε τον λόγο αντίθεσης και τα σήματα AA/AAA για κανονικό κείμενο, μεγάλο κείμενο, και μη κειμενικά στοιχεία διεπαφής.
Χρησιμοποιήστε το Εναλλαγή χρωμάτων για να ελέγξετε το ζεύγος στην αντίθετη κατεύθυνση.

Συνήθεις περιπτώσεις χρήσης

Έλεγχος του βασικού χρώματος μιας εταιρικής ταυτότητας έναντι λευκού ή μαύρου, πριν κυκλοφορήσετε ένα στοιχείο κουμπιού.
Επαλήθευση ότι ένα απαλό γκρι κείμενο σώματος εξακολουθεί να περνάει το AA σε ανοιχτόχρωμο φόντο κάρτας.
Επιβεβαίωση ότι το χρώμα ενός συνδέσμου μέσα σε μια παράγραφο φτάνει το όριο 4,5:1 για κανονικό κείμενο.
Έλεγχος αν μια μεγάλη, πιο λεπτή επικεφαλίδα εξακολουθεί να περνάει το χαλαρότερο όριο 3:1 για μεγάλο κείμενο.

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

Αυτό το εργαλείο στέλνει τα χρώματά μου σε κάποιον server;

Όχι, ο υπολογισμός γίνεται εξ ολοκλήρου στον browser σας με JavaScript· τίποτα από όσα εισάγετε δεν μεταφορτώνεται.

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

Το WCAG 2.x απαιτεί 4,5:1 για AA σε κανονικό κείμενο, 7:1 για AAA σε κανονικό κείμενο, 3:1 για AA σε μεγάλο κείμενο και 4,5:1 για AAA σε μεγάλο κείμενο.

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

Τουλάχιστον 24px (18pt) κανονικού βάρους, ή περίπου 18,7px (14pt) έντονα· οτιδήποτε μικρότερο χρησιμοποιεί τα όρια του κανονικού κειμένου.

Γιατί η εναλλαγή προσκηνίου και φόντου δεν αλλάζει τον λόγο;

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

Εγγυάται η επιτυχία στο AA ότι ο σχεδιασμός μου είναι προσβάσιμος;

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

Είναι αυτό ένα επίσημο εργαλείο του W3C ή του WebAIM;

Όχι. Υλοποιεί ανεξάρτητα τον δημόσιο τύπο αντίθεσης του WCAG 2.x και δεν συνδέεται με το W3C ή οποιονδήποτε άλλο οργανισμό προσβασιμότητας.

Σχετικά εργαλεία

Κρατήστε τα πάντα τοπικά, εξερευνήστε συμπληρωματικά εργαλεία.

Όλα τα εργαλεία για προγραμματιστές