Έλεγχος Αντίθεσης — Αναλογία Αντίθεσης WCAG

Έλεγχος Αντίθεσης Χρωμάτων για Προσβασιμότητα

Η αντίθεση χρωμάτων είναι σημαντική για την αναγνωσιμότητα. Όταν το κείμενο προσκηνίου δεν έχει αρκετή αντίθεση σε σχέση με το φόντο του, γίνεται δύσκολο να διαβαστεί — ειδικά για χρήστες με χαμηλή όραση ή διαταραχές χρωματικής όρασης.

Αυτός ο έλεγχος αντίθεσης υπολογίζει την αναλογία αντίθεσης μεταξύ οποιωνδήποτε δύο χρωμάτων και την αξιολογεί σύμφωνα με τα κριτήρια επιτυχίας WCAG 2.1. Εισαγάγετε χρώματα σε μορφή HEX, RGB ή HSL και λάβετε άμεσα αποτελέσματα.

Κατανόηση των Επιπέδων Αντίθεσης WCAG

Οι Οδηγίες Προσβασιμότητας Περιεχομένου Ιστού (WCAG) ορίζουν ελάχιστες αναλογίες αντίθεσης για αναγνωσιμότητα κειμένου. Υπάρχουν δύο επίπεδα συμμόρφωσης:

• WCAG AA Κανονικό Κείμενο — απαιτεί αναλογία αντίθεσης τουλάχιστον 4,5:1
• WCAG AA Μεγάλο Κείμενο — απαιτεί αναλογία αντίθεσης τουλάχιστον 3:1 (μεγάλο κείμενο είναι 18pt+ ή 14pt+ έντονο)
• WCAG AAA Κανονικό Κείμενο — απαιτεί αναλογία αντίθεσης τουλάχιστον 7:1
• WCAG AAA Μεγάλο Κείμενο — απαιτεί αναλογία αντίθεσης τουλάχιστον 4,5:1

Το AA είναι το τυπικό επίπεδο στο οποίο στοχεύουν οι περισσότερες ιστοσελίδες και εφαρμογές. Το AAA είναι το βελτιωμένο επίπεδο, που συνιστάται όπου η μέγιστη αναγνωσιμότητα είναι σημαντική.

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

1. Εισαγάγετε ένα χρώμα προσκηνίου (κείμενο) — HEX, RGB ή HSL
2. Εισαγάγετε ένα χρώμα φόντου σε οποιαδήποτε υποστηριζόμενη μορφή
3. Δείτε την αναλογία αντίθεσης και ζωντανή προεπισκόπηση κειμένου σε αυτό το φόντο
4. Ελέγξτε τα αποτελέσματα επιτυχίας/αποτυχίας για επίπεδα WCAG AA και AAA
5. Χρησιμοποιήστε το κουμπί εναλλαγής για γρήγορη αντιστροφή προσκηνίου και φόντου

Πότε να Ελέγξετε Αντίθεση Χρωμάτων

• Επιλογή χρωμάτων κειμένου και φόντου για ιστοσελίδα ή εφαρμογή
• Επαλήθευση ότι ένα σύστημα σχεδίασης πληροί τις απαιτήσεις προσβασιμότητας
• Δοκιμή χρωμάτων κουμπιών, συνδέσμων ή εικονιδίων έναντι φόντου
• Έλεγχος συνδυασμών χρωμάτων σκούρας λειτουργίας
• Συμμόρφωση με νομικά πρότυπα προσβασιμότητας (ADA, EAA, Section 508)

Ακριβές, Άμεσο και Δωρεάν

Αυτό το εργαλείο υπολογίζει την αναλογία αντίθεσης WCAG 2.1 χρησιμοποιώντας τον τυπικό τύπο σχετικής φωτεινότητας. Τα αποτελέσματα υπολογίζονται άμεσα στον περιηγητή σας — δεν αποστέλλονται δεδομένα σε κανέναν διακομιστή.

Χρειάζεστε να βρείτε ή να μετατρέψετε χρώμα πρώτα; Χρησιμοποιήστε τον Επιλογέα Χρώματος για εξαγωγή χρωμάτων από εικόνα ή τον Μετατροπέα Χρωμάτων για εναλλαγή μεταξύ HEX, RGB και HSL. Μόλις τα χρώματά σας περάσουν, η Γεννήτρια Παλέτας μπορεί να σας βοηθήσει να δημιουργήσετε ένα πλήρες αρμονικό σχήμα γύρω από αυτά.

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

Ποια είναι η καλή αναλογία αντίθεσης για κείμενο;

Για κανονικού μεγέθους κείμενο σώματος, απαιτείται αναλογία αντίθεσης τουλάχιστον 4,5:1 για να πληρείται το WCAG AA. Για μεγάλο κείμενο (18pt ή 14pt έντονο και άνω), το ελάχιστο είναι 3:1. Για το υψηλότερο επίπεδο προσβασιμότητας (WCAG AAA), το κανονικό κείμενο χρειάζεται τουλάχιστον 7:1.

Ποια είναι η διαφορά μεταξύ WCAG AA και AAA;

Το AA είναι το τυπικό επίπεδο συμμόρφωσης που πρέπει να πληρούν οι περισσότερες ιστοσελίδες και εφαρμογές. Το AAA είναι το βελτιωμένο επίπεδο με αυστηρότερες απαιτήσεις αντίθεσης, που συνιστάται για περιεχόμενο όπου η μέγιστη αναγνωσιμότητα είναι κρίσιμη, όπως κυβερνητικές ή ιατρικές ιστοσελίδες.

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

Το μεγάλο κείμενο ορίζεται ως 18 στιγμές (24px) ή μεγαλύτερο σε κανονικό βάρος, ή 14 στιγμές (περίπου 18,66px) ή μεγαλύτερο όταν είναι έντονο. Το μεγάλο κείμενο έχει χαμηλότερες απαιτήσεις αντίθεσης γιατί το μέγεθός του το κάνει εγγενώς πιο εύκολο να διαβαστεί.

Ποιες μορφές χρωμάτων υποστηρίζει αυτός ο έλεγχος;

Μπορείτε να εισαγάγετε χρώματα σε HEX (π.χ. #1E293B), RGB (π.χ. rgb(30, 41, 59)) ή HSL (π.χ. hsl(222, 33%, 17%)) μορφή. Το εργαλείο ανιχνεύει αυτόματα τη μορφή.

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

Η αναλογία αντίθεσης υπολογίζεται χρησιμοποιώντας τον τύπο WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), όπου L1 είναι η σχετική φωτεινότητα του πιο φωτεινού χρώματος και L2 είναι η σχετική φωτεινότητα του πιο σκούρου χρώματος. Το αποτέλεσμα κυμαίνεται από 1:1 (καμία αντίθεση) έως 21:1 (μέγιστη αντίθεση, μαύρο σε λευκό).

Λειτουργεί αυτό το εργαλείο σε κινητές συσκευές;

Ναι. Ο έλεγχος αντίθεσης λειτουργεί σε οποιαδήποτε συσκευή με σύγχρονο περιηγητή — επιτραπέζιο, tablet ή τηλέφωνο.

Είναι δωρεάν αυτό το εργαλείο;

Ναι. Το ColourPicker.app είναι εντελώς δωρεάν στη χρήση, χωρίς απαίτηση εγγραφής.

Μπορώ να ελέγξω αντίθεση για στοιχεία UI, όχι μόνο κείμενο;

Το WCAG 2.1 απαιτεί επίσης ελάχιστη αναλογία αντίθεσης 3:1 για σημαντικά στοιχεία UI και γραφικά αντικείμενα (Κριτήριο Επιτυχίας 1.4.11). Μπορείτε να χρησιμοποιήσετε αυτόν τον έλεγχο για να επαληθεύσετε αυτούς τους συνδυασμούς επίσης — ο υπολογισμός αναλογίας είναι ο ίδιος.