Έλεγχος αντίθεσης χρωμάτων WCAG

Πώς να χρησιμοποιήσετε τον έλεγχο αντίθεσης

1. Εισαγάγετε το Χρώμα κειμένου και το Χρώμα φόντου. Χρησιμοποιήστε τα δείγματα χρώματος ή πληκτρολογήστε οποιαδήποτε τιμή CSS στα πεδία: έναν κωδικό HEX όπως #595959, rgb(89 89 89), hsl(0 0% 35%) ή ένα όνομα όπως navy.
2. Ο Λόγος αντίθεσης ενημερώνεται καθώς πληκτρολογείτε, από 1:1 (καθόλου αντίθεση) έως 21:1 (μαύρο σε λευκό).
3. Ο πίνακας Αποτελέσματα WCAG 2.2 δείχνει Επιτυχία ή Αποτυχία για Κανονικό κείμενο, Μεγάλο κείμενο και Στοιχεία διεπαφής και γραφικά, στα επίπεδα AA και AAA.
4. Δείτε την Προεπισκόπηση: δείχνει κανονικό κείμενο, μεγάλο κείμενο, μεγάλο έντονο κείμενο, περίγραμμα κουμπιού και ένα εικονίδιο στα δύο χρώματά σας.
5. Αν ένα επίπεδο αποτυγχάνει, διαλέξτε έναν Στόχος στις Προτάσεις. Το εργαλείο προτείνει το Πλησιέστερο χρώμα κειμένου που περνά τον έλεγχο και το Πλησιέστερο χρώμα φόντου που περνά τον έλεγχο. Πατήστε Χρήση για να εφαρμόσετε ένα. Το Εναλλαγή χρωμάτων ανταλλάσσει κείμενο και φόντο.

Όλα υπολογίζονται στο πρόγραμμα περιήγησής σας· τίποτα δεν στέλνεται πουθενά.

Πώς υπολογίζεται ο λόγος αντίθεσης

Το WCAG 2.x ορίζει τον λόγο ως (L1 + 0,05) / (L2 + 0,05), όπου L1 είναι η σχετική φωτεινότητα του ανοιχτότερου χρώματος και L2 του πιο σκούρου. Η σχετική φωτεινότητα υπολογίζεται από γραμμικοποιημένα κανάλια sRGB: κάθε κανάλι αποκωδικοποιείται με την καμπύλη μεταφοράς του sRGB και μετά L = 0,2126 R + 0,7152 G + 0,0722 B. Το πράσινο έχει το μεγαλύτερο βάρος επειδή τα μάτια μας είναι πιο ευαίσθητα σε αυτό, γι’ αυτό ένα καθαρό πράσινο φαίνεται πολύ φωτεινότερο από ένα καθαρό μπλε ίδιας «έντασης».

Ο λόγος δεν στρογγυλοποιείται ποτέ προς τα πάνω. Το #777777 σε λευκό δίνει περίπου 4,48:1 και αποτυγχάνει στο AA για κανονικό κείμενο, παρότι μοιάζει με «4,5». Αυτό το εργαλείο περικόπτει την εμφανιζόμενη τιμή σε δύο δεκαδικά, ώστε ό,τι βλέπετε να είναι ό,τι ελέγχει το WCAG.

Αν το χρώμα του κειμένου είναι ημιδιαφανές (για παράδειγμα rgb(0 0 0 / 60%)), αναμειγνύεται πρώτα με το φόντο, όπως θα το ζωγράφιζε το πρόγραμμα περιήγησης. Η διαφάνεια στο χρώμα του φόντου αγνοείται, επειδή δεν είναι γνωστό τι βρίσκεται πίσω από τη σελίδα.

Τα επίπεδα WCAG με μια ματιά

Ως «μεγάλο κείμενο» νοείται κείμενο τουλάχιστον 18 pt (24 εικονοστοιχεία CSS) ή 14 pt έντονο (περίπου 18,66 px). Τα λογότυπα και το καθαρά διακοσμητικό κείμενο δεν έχουν απαίτηση. Ο κανόνας 3:1 για στοιχεία διεπαφής (κριτήριο επιτυχίας 1.4.11) ισχύει για τα περιγράμματα πεδίων και κουμπιών, τους δείκτες εστίασης, τα εικονίδια και τις γραμμές γραφημάτων που πρέπει να βλέπουν οι χρήστες.

Πώς λειτουργούν οι προτάσεις

Τα προτεινόμενα χρώματα διατηρούν την απόχρωση και τον κορεσμό (chroma) του χρώματός σας στον χώρο OKLCH και αλλάζουν μόνο τη φωτεινότητα, πιο σκούρα ή πιο ανοιχτή, μέχρι να επιτευχθεί ο στόχος. Στη συνέχεια το εργαλείο διαλέγει όποια από τις δύο κατευθύνσεις είναι οπτικά πλησιέστερη στο αρχικό σας χρώμα, με μέτρηση στο OKLab. Το αποτέλεσμα ελέγχεται ξανά μετά τη στρογγυλοποίηση σε κωδικό HEX, ώστε να περνά πραγματικά. Αν καμία φωτεινότητα δεν φτάνει τον στόχο (π.χ. 7:1 απέναντι σε μεσαίο γκρι), το εργαλείο το αναφέρει.

Σχετικά με το APCA

Το APCA (Accessible Perceptual Contrast Algorithm) είναι ένα νεότερο μοντέλο αντίθεσης που εξετάζεται για ένα μελλοντικό WCAG 3. Λαμβάνει υπόψη το βάρος και το μέγεθος της γραμματοσειράς και την πολικότητα (σκούρο σε ανοιχτό έναντι ανοιχτού σε σκούρο). Βρίσκεται ακόμη σε μορφή προσχεδίου και δεν αποτελεί νομική ή κανονιστική απαίτηση, γι’ αυτό αυτό το εργαλείο αναφέρει αποτελέσματα WCAG 2.x, που παραμένουν η αναφορά για το ευρωπαϊκό πρότυπο προσβασιμότητας EN 301 549, το Section 508 και τους περισσότερους νόμους.