Έλεγχος αντίθεσης χρωμάτων
Σύντομη απάντηση
Ελέγξτε αναλογίες αντίθεσης χρώματος κειμένου-φόντου έναντι προτύπων WCAG AA/AAA.
Οριακή αντίθεση — ελέγξτε για μεγάλο κείμενο.
Το γρήγορο καφέ αλεπού πηδά
Το γρήγορο καφέ αλεπού πηδά
Πώς να βελτιωθείτε
Το επίπεδο WCAG AA απαιτεί αναλογία αντίθεσης τουλάχιστον 4.5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο (18pt, ή 14pt έντονο). Στοχεύστε σε 7:1 (AAA) όπου είναι εφικτό — διατηρεί το κείμενο ευανάγνωστο για χρήστες με μειωμένη όραση και σε έντονο φως.
Τι Κάνει
Υπολογίζει τον λόγο αντίθεσης WCAG μεταξύ οποιουδήποτε χρώματος προσκηνίου και φόντου που εισαγάγετε, χρησιμοποιώντας τον ίδιο τύπο σχετικής φωτεινότητας με το πρότυπο WCAG, και τον ελέγχει έναντι των ορίων AA και AAA για κανονικό και μεγάλο κείμενο (4,5:1 / 3:1 για AA, 7:1 / 4,5:1 για AAA). Δείχνει ζωντανή προεπισκόπηση κειμένου στα χρώματά σας μαζί με ένδειξη επιτυχίας/αποτυχίας για κάθε όριο.
Γιατί Έχει Σημασία
Το κείμενο χαμηλής αντίθεσης είναι η πιο συχνή αυτόματα ανιχνεύσιμη αποτυχία προσβασιμότητας σε αρχικές σελίδες στην ετήσια αναφορά Million του WebAIM, και είναι μία από τις ευκολότερες να διορθωθεί με μια αλλαγή χρώματος. Το κριτήριο επιτυχίας 1.4.3 του WCAG 2.1 ορίζει τους ελάχιστους λόγους, και το EN 301 549 — το πρότυπο πίσω από την Ευρωπαϊκή Πράξη Προσβασιμότητας — τους εφαρμόζει στο περιεχόμενο ιστού.
Πώς Λειτουργεί
-
Εισαγάγετε ή επιλέξτε ένα χρώμα προσκηνίου (κειμένου) και ένα χρώμα φόντου
-
Υπολογίζουμε τον λόγο αντίθεσης σχετικής φωτεινότητας WCAG μεταξύ των δύο χρωμάτων
-
Ελέγχουμε τον λόγο έναντι των ορίων AA και AAA για κανονικό και μεγάλο κείμενο
-
Βλέπετε ζωντανή προεπισκόπηση του κειμένου σας στο φόντο σας, καθώς και ένδειξη επιτυχίας ή αποτυχίας για κάθε όριο
Δείγμα εισόδου + εξόδου
foreground: #767676 background: #ffffff
contrast ratio: 4.54:1 AA κανονικό κείμενο (4.5:1) PASS AA μεγάλο κείμενο (3:1) PASS AAA κανονικό κείμενο (7:1) FAIL AAA μεγάλο κείμενο (4.5:1) PASS
Ποιοι το Χρησιμοποιούν
-
Σχεδιαστής
Επικυρώστε την παλέτα χρωμάτων της επωνυμίας έναντι του WCAG πριν την οριστικοποιήσετε. Πολλά «μοντέρνα» παστέλ αποτυγχάνουν στο 4,5:1 έναντι λευκού — καλύτερα να το ανακαλύψετε πριν την εφαρμόσετε σε όλη την επωνυμία.
-
Ελεγκτής προσβασιμότητας
Ελέγξτε κάθε ζεύγος χρώματος κειμένου και φόντου έναντι των ορίων AA και AAA πριν εγκρίνετε τη δήλωση Annex V EAA ενός πελάτη.
-
Προγραμματιστής Frontend
Εντοπίστε οπισθοδρομήσεις αντίθεσης που εισάγονται από αλλαγές θέματος μεταβλητών CSS πριν φτάσουν στην παραγωγή.
Συχνές Ερωτήσεις
Ποιον λόγο WCAG χρειάζομαι;
4,5:1 για κανονικό κείμενο, 3:1 για μεγάλο κείμενο (≥18pt ή ≥14pt έντονο) και στοιχεία διεπαφής. Το WCAG 2.1 AAA απαιτεί 7:1 — έναν υψηλότερο πήχη που δεν στοχεύουν οι περισσότερες επωνυμίες.
Ελέγχει εικόνες και εικονίδια;
Μόνο αντίθεση κειμένου, και μόνο για τα δύο χρώματα που εισάγετε εδώ. Η αντίθεση εικόνων (π.χ. κείμενο πάνω σε εικόνα σε hero banners) χρειάζεται χειροκίνητο έλεγχο — δεν υπάρχει αυτόματη σάρωση σελίδας.
Ποια αντίθεση απαιτεί η EAA;
Για περιεχόμενο ιστού, το EN 301 549 v3.2.1 εφαρμόζει το WCAG 2.1 Επίπεδο AA, συμπεριλαμβανομένου του 1.4.3 — οπότε το κείμενο χρειάζεται τουλάχιστον 4,5:1 έναντι του φόντου του (3:1 για μεγάλο κείμενο). Ελέγξτε κάθε ζεύγος που χρησιμοποιεί ο ιστότοπός σας.