Έλεγχος αντίθεσης WCAG
Δοκιμάστε οποιοδήποτε ζεύγος χρωμάτων προσκηνίου και φόντου για αναλογία αντίθεσης WCAG 2.1 (1 έως 21). Δείτε την επιτυχία/αποτυχία για Επίπεδο AA και AAA, για κανονικό κείμενο, μεγάλο κείμενο (18pt+ ή 14pt με έντονη γραφή) και στοιχεία διεπαφής χρήστη. Απαραίτητο πριν από την αποστολή κουμπιά, συνδέσμους και ετικέτες φορμών — πολλές παλέτες επωνυμιών αποτυγχάνουν μέχρι να σκουρύνετε το κείμενο ή να φωτίσετε τις επιφάνειες.
Χρώμα κειμένου
Χρώμα φόντου
Aa Bb Cc — 123
Αποτέλεσμα
16.12 : 1
AA — Επιτυχία
AA (μεγάλο κείμενο) — Επιτυχία
AAA — Επιτυχία
AAA (μεγάλο κείμενο) — Επιτυχία
Πώς να ελέγξετε την αντίθεση χρώματος
1. Εισαγάγετε ή επιλέξτε χρώματα προσκηνίου (κείμενο) και φόντου.
2. Διαβάστε την αναλογία αντίθεσης (π.χ. 4,52:1).
3. Ελέγξτε τις σειρές AA και AAA για κανονικά και μεγάλα μεγέθη κειμένου.
4. Προσαρμόστε τη φωτεινότητα του HSL έως ότου περάσει το απαιτούμενο επίπεδο και, στη συνέχεια, αντιγράψτε τις δεκαεξαδικές τιμές.
Παραδείγματα ελέγχου αντίθεσης
Κείμενο σώματος #374151 στο #FFFFFF
Αναλογία ≈ 8,9:1 — 1 κανονικό κείμενο (περίοδο 1 ΑΑΑ). Άνετη ανάγνωση μεγάλης μορφής.
Ανοικτό γκρι #9CA3AF σε λευκό
Αναλογία ≈ 2,6:1 — αποτυγχάνει AA για κανονικό κείμενο (χρειάζεται 4,5:1). Συνηθισμένο λάθος σύμβολο κράτησης θέσης.
Κύριο λευκό κουμπί στο #2563EB
Αναλογία ≈ 4,6:1 — περνάει κανονικό κείμενο AA. χτύπημα σε πιο σκούρο μπλε για χρήση με AAA ή μεγάλη μόνο χρήση.
Πότε να χρησιμοποιήσετε αυτό το εργαλείο
• Όταν ελέγχετε τα διακριτικά του συστήματος σχεδίασης πριν από την κυκλοφορία.
• Όταν διορθώνετε τα ευρήματα προσβασιμότητας από το Lighthouse ή το τσεκούρι.
• Όταν επιλέγετε χρώματα συνδέσμων που πρέπει να διαφέρουν από το κείμενο του σώματος, όχι μόνο ως προς την απόχρωση.
Πότε να επιλέξετε κάτι άλλο
• Όταν χρειάζεστε έλεγχο πλήρους σελίδας — χρησιμοποιήστε αυτοματοποιημένους σαρωτές στο DOM που έχει αποδοθεί.
• Κατά τη δοκιμή μη συμπαγούς φόντου (εικόνες, διαβαθμίσεις) — δείγμα pixel της χειρότερης περίπτωσης.
• Κατά την προσομοίωση αχρωματοψίας — χρησιμοποιήστε εξειδικευμένους προσομοιωτές όρασης.
Επεξηγούνται τα επίπεδα WCAG 2.1
Το επίπεδο Α είναι ελάχιστο. Το AA είναι ο νομικός στόχος σε πολλές δικαιοδοσίες (ADA, EAA δημόσιος τομέας). Το AAA είναι φιλόδοξο για αντιγραφή σώματος — οι μεγάλοι τίτλοι μπορεί να περάσουν το AAA πιο εύκολα από τους υπότιτλους 14 εικονοστοιχείων. Οι ορατές ενδείξεις εστίασης (2.4.7) συμπληρώνουν την αντίθεση — οι χρήστες του πληκτρολογίου χρειάζονται ορατούς δακτυλίους εστίασης, συχνά 3:1 σε διπλανά χρώματα. Περάστε/αποτυχία εγγράφου στο σύστημα σχεδίασής σας δίπλα σε κάθε ζεύγος διακριτικών.
Διόρθωση αστοχιών χωρίς αλλαγή επωνυμίας
Εάν το μωβ επωνυμίας αποτυγχάνει στο λευκό, μην αλλάζετε την απόχρωση — σκουρύνετε το πρώτο πλάνο κατά 5-10% φωτεινότητα ή χρησιμοποιήστε μωβ μόνο για μεγάλες επικεφαλίδες. Το κείμενο του placeholder πρέπει να πληροί την αντίθεση (4,5:1), όχι μόνο να εισάγει τιμές. Οι απενεργοποιημένες καταστάσεις ενδέχεται να εξαιρούνται από την αυστηρή αντίθεση κειμένου, αλλά δεν θα πρέπει να μεταφέρουν κρίσιμες πληροφορίες μόνο με βάση το χρώμα. Συνδυάστε αυτό το πούλι με τον μετατροπέα χρώματος για γρήγορη επανάληψη HSL.
Συχνές ερωτήσεις
Ποια αναλογία αντίθεσης για το κανονικό κείμενο WCAG AA;
Τουλάχιστον 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο (18pt+ ή 14pt με έντονη γραφή).
Τι ισχύει για το AAA;
κανονικό κείμενο 7:1, μεγάλο κείμενο 4,5:1 — πιο αυστηρό, που χρησιμοποιείται συχνά για κυβερνητικούς ιστότοπους.
Χρειάζονται αντίθεση τα στοιχεία διεπαφής χρήστη;
Το WCAG 2.1 απαιτεί 3:1 για γραφικά αντικείμενα.411 στοιχεία περιβάλλοντος χρήστη.
Πώς υπολογίζεται η αναλογία;
Με βάση τη σχετική φωτεινότητα των χρωμάτων sRGB: (L1 + 0,05) / (L2 + 0,05) όπου το L1 είναι ελαφρύτερο.
Η υπογράμμιση διορθώνει συνδέσμους χαμηλής αντίθεσης;
Όχι — η αντίθεση εξακολουθεί να απαιτείται. Οι υπογραμμίσεις βοηθούν τα μη έγχρωμα στοιχεία, αλλά δεν αντικαθιστούν τους κανόνες αναλογίας.
Τα δεδομένα μου αποστέλλονται σε server;
Όχι.
Είναι αυτό το εργαλείο δωρεάν;
Ναι.