Πώς να το χρησιμοποιήσετε
- Εισαγάγετε το χρώμα κειμένου (προσκήνιο) και το χρώμα φόντου ως HEX, rgb(), hsl() ή άλλη μορφή CSS, ή χρησιμοποιήστε τους επιλογείς χρωμάτων.
- Δείτε τον λόγο αντίθεσης και το αποτέλεσμα επιτυχίας ή αποτυχίας για κάθε απαίτηση WCAG.
- Αν αποτύχει μια απαίτηση, επιλέξτε στόχο και εφαρμόστε το προτεινόμενο χρώμα, το οποίο διατηρεί την απόχρωση και αλλάζει μόνο τη φωτεινότητα.
- Χρησιμοποιήστε το «Αντιστροφή» για να ελέγξετε τον αντίστροφο συνδυασμό, για παράδειγμα ανοιχτό κείμενο σε σκούρο κουμπί.
Πώς λειτουργεί
Η αναλογία ακολουθεί τον ορισμό του WCAG 2.2: η σχετική φωτεινότητα κάθε χρώματος υπολογίζεται από τα κανάλια sRGB και η αναλογία είναι (φωτεινότερο + 0,05) ÷ (σκουρότερο + 0,05). Κυμαίνεται από 1:1 (πανομοιότυπα χρώματα) έως 21:1 (μαύρο σε λευκό).
Απαιτήσεις που ελέγχονται: το κριτήριο επιτυχίας 1.4.3 (AA) απαιτεί 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο· το 1.4.6 (AAA) απαιτεί 7:1 και 4,5:1· το 1.4.11 απαιτεί 3:1 για μέρη διεπαφής χρήστη και γραφικά με νόημα, όπως περιγράμματα πεδίων και εικονίδια. Μεγάλο κείμενο θεωρείται τουλάχιστον 24px κανονικό ή περίπου 18,66px έντονο. Το WCAG δεν επιτρέπει στρογγυλοποίηση προς τα πάνω, επομένως το 4,49:1 αποτυγχάνει στο AA παρόλο που είναι κοντά· η αναλογία που εμφανίζεται εδώ είναι κομμένη, όχι στρογγυλοποιημένη.
Η πρόταση διατηρεί την απόχρωση και τη χρωματικότητα του χρώματος κειμένου σε OKLCH και αναζητά την πλησιέστερη φωτεινότητα, πιο σκούρα ή πιο ανοιχτή, που πληροί τον στόχο. Η αναλογία αντίθεσης είναι ένα μέρος της αναγνωσιμότητας: το βάρος γραμματοσειράς, το μέγεθος και οι διαφορές στην αντίληψη χρωμάτων έχουν επίσης σημασία, και το WCAG 2.2 είναι η τρέχουσα σύσταση W3C στην οποία αναφέρονται οι περισσότεροι νόμοι προσβασιμότητας.
Παραδείγματα
Γκρι κείμενο που σχεδόν περνά
Το #777777 σε λευκό δίνει 4,48:1. Αυτό περνά για μεγάλο κείμενο και στοιχεία διεπαφής, αλλά αποτυγχάνει στο AA για κανονικό κείμενο. Το πλησιέστερο γκρι που περνά είναι περίπου #767676, το οποίο φτάνει 4,54:1.
Λευκό κείμενο σε κουμπί επωνυμίας
Λευκό σε #ff8800 δίνει περίπου 2,4:1, το οποίο αποτυγχάνει ακόμη και στο επίπεδο 3:1 για μεγάλο κείμενο. Το σκούρεμα του πορτοκαλί ή η χρήση σκούρου κειμένου είναι οι συνήθεις λύσεις· η πρόταση δείχνει πόσο σκούρο θα έπρεπε να είναι το χρώμα του κειμένου.
Έλεγχος περιγράμματος πεδίου φόρμας
Ένα ανοιχτό γκρι περίγραμμα #cccccc σε λευκό είναι περίπου 1,6:1. Σύμφωνα με το κριτήριο 1.4.11, το περίγραμμα που προσδιορίζει ένα πεδίο εισαγωγής χρειάζεται 3:1, επομένως απαιτείται κάτι γύρω στο #949494 ή σκουρότερο.
Συχνές ερωτήσεις
Τι αναλογία αντίθεσης χρειάζομαι για το WCAG AA;
4,5:1 για κανονικό κείμενο σώματος, 3:1 για μεγάλο κείμενο (24px ή 18,66px έντονο) και 3:1 για στοιχεία διεπαφής και γραφικά με νόημα. Το AAA αυξάνει το κείμενο σε 7:1 και το μεγάλο κείμενο σε 4,5:1.
Πρέπει το κείμενο λογότυπου ή το κείμενο απενεργοποιημένου κουμπιού να πληροί τις απαιτήσεις;
Όχι. Το WCAG εξαιρεί κείμενο σε λογότυπα και επωνυμίες, αμιγώς διακοσμητικό κείμενο και κείμενο σε ανενεργά (απενεργοποιημένα) στοιχεία διεπαφής χρήστη.
Γιατί το αποτέλεσμά μου διαφέρει ελαφρώς από εκείνο άλλου ελεγκτή;
Ορισμένα εργαλεία στρογγυλοποιούν την αναλογία σε ένα δεκαδικό ή προς τα πάνω. Το WCAG συγκρίνει την ακριβή τιμή, οπότε αυτό το εργαλείο κόβει στα δύο δεκαδικά. Μικρές διαφορές μπορεί επίσης να προκύψουν από χρώματα με τιμή alpha.
Τι ισχύει για τη νέα μέθοδο αντίθεσης APCA;
Το APCA είναι μια διαφορετική μέθοδος που προτείνεται για μελλοντική έκδοση του WCAG. Δεν αποτελεί μέρος του WCAG 2.2, το οποίο μετρά αυτό το εργαλείο και στο οποίο αναφέρονται οι τρέχοντες κανόνες προσβασιμότητας.
Απόρρητο
Τα χρώματα ελέγχονται στο πρόγραμμα περιήγησής σας. Τίποτα δεν αποστέλλεται ούτε αποθηκεύεται.