Ελεγκτής Αντίθεσης

Διαφήμιση

Ελέγξτε αν οι συνδυασμοί χρωμάτων σας πληρούν τα πρότυπα WCAG.

Παραδείγματα:
WCAG 2.2 12.63:1
Βαθμολογία APCA (Lc) Lc 97
Ξεσκεπάζω τη ζωηφόρα βδέλλα του ψυχικού σθένους.
Δείγμα Μεγάλου Κειμένου
Bold κείμενο σε 14pt βάρος 700
Κουμπί Link text
Επίπεδο WCAG Κανονικό Κείμενο Μεγάλο Κείμενο Στοιχεία UI
AA (Απαιτείται)
AAA

Ελάχιστα Μεγέθη Γραμματοσειράς APCA

Βάρος300400500600700

Κώδικας CSS

Προσομοίωση Αχρωματοψίας

Ξεσκεπάζω τη ζωηφόρα βδέλλα του ψυχικού σθένους.
Δείγμα Μεγάλου Κειμένου
Σας φάνηκε χρήσιμο αυτό το εργαλείο;
Θέλετε να μας πείτε περισσότερα;
0/500
Θέλετε να επικοινωνήσουμε μαζί σας;
Ευχαριστούμε για τα σχόλιά σας!
Διαφήμιση

Σχετικά με αυτό το εργαλείο

Ο έλεγχος αντίθεσης χρωμάτων είναι η διαδικασία μέτρησης της διαφοράς φωτεινότητας μεταξύ χρωμάτων προσκηνίου και φόντου για να προσδιοριστεί αν το κείμενο παραμένει αναγνώσιμο για όλους τους χρήστες, συμπεριλαμβανομένων εκείνων με οπτικές αναπηρίες. Οι Οδηγίες Προσβασιμότητας Περιεχομένου Ιστού (WCAG), αναπτυγμένες από το World Wide Web Consortium (W3C), θεσπίζουν το διεθνές πρότυπο ψηφιακής προσβασιμότητας και καθορίζουν συγκεκριμένα όρια αντίθεσης που κάθε ιστότοπος και εφαρμογή θα πρέπει να πληροί. Το WCAG 2.2 καθορίζει δυο επίπεδα συμμόρφωσης για την αντίθεση. Το Επίπεδο AA, το ελάχιστο πρότυπο που απαιτείται από τους περισσότερους νόμους προσβασιμότητας, απαιτεί αναλογία αντίθεσης τουλάχιστον 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο (18pt κανονικό ή 14pt bold). Το Επίπεδο AAA, το ενισχυμένο πρότυπο για κυβερνητικό, υγειονομικό και εκπαιδευτικό περιεχόμενο, απαιτεί 7:1 για κανονικό κείμενο και 4,5:1 για μεγάλο κείμενο. Αυτά τα όρια βασίζονται σε έρευνα σχετικά με τον τρόπο που άτομα με μέτρια χαμηλή όραση αντιλαμβάνονται το περιεχόμενο στην οθόνη. Η προσβασιμότητα είναι επίσης νομική υποχρέωση σε πολλές δικαιοδοσίες. Ο Americans with Disabilities Act (ADA) στις ΗΠΑ, η Section 508 του Rehabilitation Act και το ευρωπαϊκό πρότυπο EN 301 549 επιβάλλουν όλα ότι το ψηφιακό περιεχόμενο πρέπει να είναι αντιληπτό από άτομα με αναπηρίες. Η μη συμμόρφωση μπορεί να οδηγήσει σε αγωγές, πρόστιμα και αποκλεισμό σημαντικού μέρους του κοινού σας. Αυτό το εργαλείο υπολογίζει αναλογίες αντίθεσης μετατρέποντας τιμές sRGB σε γραμμικό RGB, υπολογίζοντας τη σχετική φωτεινότητα με τους συντελεστές ITU-R BT.709 και εφαρμόζοντας τον τύπο WCAG (L1 + 0,05) / (L2 + 0,05). Παρέχει επίσης προσομοίωση αχρωματοψίας για πρωτανωπία, δευτερανωπία και τριτανωπία, βοηθώντας τους σχεδιαστές να επαληθεύσουν ότι οι χρωματικές τους επιλογές λειτουργούν για τα εκτιμώμενα 300 εκατομμύρια άτομα με έλλειψη χρωματικής όρασης. Όλοι οι υπολογισμοί εκτελούνται τοπικά στο πρόγραμμα περιήγησης σας.

Πηγές: WCAG 2.2 · SC 1.4.3 · SC 1.4.11

Πώς να Χρησιμοποιήσετε

  1. Εισάγετε τα χρώματα κειμένου και φόντου χρησιμοποιώντας τους επιλογείς ή κωδικούς HEX.
  2. Ελέγξτε την αναλογία αντίθεσης και τα αποτελέσματα WCAG. Πράσινο σημαίνει επιτυχία, κόκκινο αποτυχία.
  3. Χρησιμοποιήστε την προσομοίωση αχρωματοψίας για να επαληθεύσετε ότι τα χρώματα λειτουργούν για χρήστες με προβλήματα όρασης.

Μεθοδολογία

Ο υπολογισμός της αναλογίας αντίθεσης ακολουθεί τον αλγόριθμο WCAG 2.2 με ακρίβεια. Πρώτα, ο δεκαεξαδικός κώδικας κάθε χρώματος αναλύεται στα στοιχεία κόκκινου, πράσινου και μπλε, τα οποία στη συνέχεια κανονικοποιούνται σε τιμές μεταξύ 0 και 1 διαιρώντας με 255. Αυτές οι γραμμικές τιμές υφίστανται διόρθωση gamma χρησιμοποιώντας τη συνάρτηση μεταφοράς sRGB: τιμές ίσες ή κάτω από 0,03928 διαιρούνται με 12,92, ενώ μεγαλύτερες τιμές χρησιμοποιούν τον τύπο ((τιμή + 0,055) / 1,055) υψωμένο στη δύναμη 2,4. Αυτή η διόρθωση gamma λαμβάνει υπόψη τον μη γραμμικό τρόπο εκπομπής φωτός από τις οθόνες. Στη συνέχεια, η σχετική φωτεινότητα υπολογίζεται χρησιμοποιώντας τους συντελεστές ITU-R BT.709: L = 0,2126R + 0,7152G + 0,0722B. Αυτά τα βάρη αντικατοπτρίζουν τη διαφορετική ευαισθησία του ανθρώπινου ματιού σε κάθε πρωτεύον χρώμα. Η τελική αναλογία αντίθεσης υπολογίζεται ως (L1 + 0,05) / (L2 + 0,05), όπου L1 είναι η φωτεινότητα του πιο ανοιχτού χρώματος. Τα αποτελέσματα κυμαίνονται από 1:1 (ίδια χρώματα) έως 21:1 (καθαρό μαύρο σε καθαρό λευκό). Το εργαλείο αξιολογεί στη συνέχεια αυτή την αναλογία έναντι των ορίων AA και AAA τόσο για κανονικό όσο και για μεγάλο κείμενο, παρέχοντας ένα σαφές αποτέλεσμα επιτυχίας ή αποτυχίας για κάθε επίπεδο συμμόρφωσης.

Πηγές: WCAG 2.2 Luminance · SC 1.4.3

Κατανόηση των Αποτελεσμάτων σας

Μια αναλογία αντίθεσης 4,5:1 ή υψηλότερη πληροί το WCAG AA για κανονικό κείμενο, που είναι το πρότυπο που πρέπει να στοχεύουν οι περισσότεροι ιστότοποι. Μια αναλογία 3:1 πληροί το AA για μεγάλο κείμενο (18pt κανονικό ή 14pt bold και άνω) και είναι επίσης επαρκής για στοιχεία διεπαφής όπως περιγράμματα φορμών, εικονίδια και δείκτες εστίασης. Για το ενισχυμένο επίπεδο AAA, χρειάζεστε 7:1 για κανονικό κείμενο και 4,5:1 για μεγάλο κείμενο. Όταν το εργαλείο δείχνει "Αποτυχία", σημαίνει ότι χρήστες με μέτριες οπτικές αναπηρίες μπορεί να δυσκολευτούν να διαβάσουν. Για να βελτιώσετε την αντίθεση διατηρώντας την αισθητική μάρκας, δοκιμάστε να σκουρύνετε ή να ανοίξετε ένα χρώμα σταδιακά αντί να το αντικαταστήσετε εντελώς. Συχνά μια αλλαγή μόλις 10-15% στη φωτεινότητα αρκεί για να περάσετε το όριο. Συνήθεις παγίδες περιλαμβάνουν ανοιχτό γκρι κείμενο υπενθύμισης, εξάρτηση από λεπτά βάρη γραμματοσειράς που μειώνουν την αντιληπτή αντίθεση και παράλειψη της αντίθεσης απενεργοποιημένων στοιχείων. Τα αποτελέσματα της προσομοίωσης αχρωματοψίας είναι εξίσου σημαντικά. Ακόμη και αν τα χρώματα σας περνούν τον έλεγχο αντίθεσης, μπορεί να γίνουν αδιάκριτα για χρήστες με έλλειψη χρωματικής όρασης. Ένα κόκκινο κουμπί σε πράσινο φόντο μπορεί να έχει επαρκή αντίθεση για κανονική όραση αλλά να φαίνεται σχεδόν πανομοιότυπο σε κάποιον με δευτερανωπία. Πάντα επαληθεύετε τον σχεδιασμό σας σε όλους τους τύπους όρασης και χρησιμοποιείτε πρόσθετα στοιχεία όπως εικονίδια, μοτίβα ή ετικέτες κειμένου.

Πρακτικά Παραδείγματα

Μια startup που ανασχεδιάζει τον ιστότοπο μάρκετινγκ της δοκιμάζει τα χρώματα μάρκας (#2563EB μπλε κείμενο σε #F8FAFC ανοιχτό γκρι φόντο) και βρίσκει αναλογία αντίθεσης 5,2:1, που περνάει AA αλλά αποτυγχάνει στο AAA. Σκουραίνουν το μπλε σε #1D4ED8, επιτυγχάνοντας 7,1:1 και πληρώντας και τα δυο πρότυπα χωρίς σημαντική αλλαγή στην ταυτότητα μάρκας. Ένας προγραμματιστής εφαρμογής υγείας ελέγχει τη μορφοποίηση μηνυμάτων σφάλματος (κόκκινο κείμενο σε λευκό) και ανακαλύπτει ότι το #EF4444 σε #FFFFFF επιτυγχάνει μόνο 3,9:1, αποτυγχάνοντας ακόμη και στο AA. Η προσομοίωση αχρωματοψίας αποκαλύπτει ότι φαίνεται αμυδρό σε χρήστες με πρωτανωπία. Αλλάζουν σε #DC2626 και προσθέτουν εικονίδιο προειδοποίησης. Ένας σχεδιαστής UI επικυρώνει ότι όλες οι ετικέτες κουμπιών, τα περιγράμματα φορμών και οι δείκτες εστίασης σε μια βιβλιοθήκη στοιχείων πληρούν τουλάχιστον την απαίτηση 3:1 για μη κειμενικά στοιχεία, ενώ το κείμενο σώματος φτάνει το πλήρες όριο AA των 4,5:1.

Πρακτικές Συμβουλές για Προσβάσιμο Σχεδιασμό

Ξεκινήστε επιλέγοντας ζεύγη χρωμάτων υψηλής αντίθεσης και μετά χτίστε την παλέτα σας γύρω τους. Στοχεύστε σε αντίθεση τουλάχιστον 7:1 για κείμενο σώματος ακόμη και όταν απαιτείται μόνο AA (4,5:1), καθώς αυτό παρέχει ένα ασφαλές περιθώριο. Μην βασίζεστε ποτέ μόνο στο χρώμα για να μεταδώσετε πληροφορίες. Χρησιμοποιήστε εικονίδια, υπογραμμίσεις ή ετικέτες κειμένου ως δευτερεύοντα στοιχεία ώστε να μην αποκλείονται οι χρήστες με αχρωματοψία. Δοκιμάστε τα σχέδια σας σε λειτουργία κλίμακας του γκρι για να εντοπίσετε γρήγορα προβλήματα αντίθεσης. Αν τα στοιχεία εξαφανίζονται ή αναμειγνύονται χωρίς χρώμα, η αντίθεση είναι ανεπαρκής. Ελέγχετε πάντα τόσο τη φωτεινή όσο και τη σκοτεινή λειτουργία. Τα σκούρα θέματα έχουν συχνά χαμηλότερη αποτελεσματική αντίθεση, ειδικά με χρωματιστό κείμενο σε σκούρο φόντο. Επαληθεύστε τις καταστάσεις hover και focus ξεχωριστά, καθώς αυτές οι διαδραστικές καταστάσεις μερικές φορές χρησιμοποιούν πιο ανοιχτά χρώματα που δεν πληρούν τις απαιτήσεις. Εγκαταστήστε επεκτάσεις προγράμματος περιήγησης προσβασιμότητας όπως axe DevTools ή WAVE για έλεγχο ολόκληρων σελίδων και συνδυάστε τον έλεγχο αντίθεσης με προσομοίωση αχρωματοψίας για ολοκληρωμένη κάλυψη.

Πηγές

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

Συχνές ερωτήσεις
Τι είναι η αναλογία αντίθεσης WCAG;
Η αναλογία αντίθεσης WCAG μετρά τη διαφορά φωτεινότητας μεταξύ δύο χρωμάτων σε κλίμακα από 1:1 (χωρίς αντίθεση) έως 21:1 (μέγιστη αντίθεση). Οι οδηγίες WCAG 2.2 απαιτούν ελάχιστες αναλογίες για αναγνωσιμότητα.
Ποιες είναι οι απαιτήσεις WCAG AA και AAA;
Το WCAG AA απαιτεί 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο (18pt+ ή 14pt bold). Το WCAG AAA απαιτεί 7:1 για κανονικό κείμενο και 4,5:1 για μεγάλο κείμενο.
Τι θεωρείται μεγάλο κείμενο;
Μεγάλο κείμενο ορίζεται ως 18 στιγμές (24px) ή μεγαλύτερο για κανονικό βάρος, ή 14 στιγμές (18,66px) ή μεγαλύτερο για bold κείμενο.
Πώς υπολογίζεται η αναλογία αντίθεσης;
Η αναλογία αντίθεσης υπολογίζεται χρησιμοποιώντας τη σχετική φωτεινότητα δύο χρωμάτων, όπως ορίζεται στο Κριτήριο Επιτυχίας 1.4.3 του WCAG 2.2. Ο τύπος είναι (L1 + 0,05) / (L2 + 0,05), όπου L1 είναι η σχετική φωτεινότητα του ανοιχτότερου χρώματος και L2 του σκοτεινότερου. Η σχετική φωτεινότητα λαμβάνει υπόψη πώς το ανθρώπινο μάτι αντιλαμβάνεται τη φωτεινότητα διαφορετικά στο φάσμα χρωμάτων — το πράσινο φαίνεται πολύ πιο φωτεινό από το μπλε στην ίδια φυσική ένταση. Η αναλογία κυμαίνεται από 1:1 (ίδια χρώματα, χωρίς αντίθεση) έως 21:1 (μαύρο σε λευκό, μέγιστη αντίθεση). Το WCAG AA απαιτεί τουλάχιστον 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο.
Ποιοι είναι οι συνηθισμένοι συνδυασμοί χρωμάτων που αποτυγχάνουν στο WCAG;
Οι πιο συνηθισμένες αποτυχίες αφορούν ανοιχτά χρώματα σε λευκά φόντα ή παρόμοιους συνδυασμούς χαμηλής αντίθεσης. Κόκκινο κείμενο σε πράσινο φόντο (και αντίστροφα) αποτυγχάνει συχνά επειδή οι τιμές φωτεινότητας είναι παρόμοιες παρά τη 'διαφορετική' απόχρωση. Ανοιχτό γκρι κείμενο σε λευκό (#999 σε #fff = 2,85:1, αποτυγχάνει AA) είναι εξαιρετικά συνηθισμένο σε ιστοσελίδες. Κίτρινο κείμενο σε λευκό είναι σχεδόν πάντα αόρατο. Πορτοκαλί σε λευκό είναι οριακό. Κείμενο placeholder σε ανοιχτό γκρι (#aaa σε #fff = 2,32:1) αποτυγχάνει στο WCAG και είναι ένα ευρέως διαδεδομένο πρόβλημα προσβασιμότητας. Σε περίπτωση αμφιβολίας, ελέγξτε κάθε συνδυασμό κειμένου-φόντου, συμπεριλαμβανομένων των hover states και focus indicators.
Χρειάζεται το dark mode διαφορετικές αναλογίες αντίθεσης;
Όχι — οι ίδιες απαιτήσεις αναλογίας αντίθεσης WCAG (4,5:1 για κανονικό κείμενο AA, 3:1 για μεγάλο κείμενο AA) ισχύουν ανεξάρτητα από το αν ο σχεδιασμός χρησιμοποιεί ανοιχτή ή σκοτεινή λειτουργία. Ωστόσο, η σκοτεινή λειτουργία εισάγει μοναδικές προκλήσεις. Λευκό κείμενο σε καθαρό μαύρο (#fff σε #000 = 21:1) στην πραγματικότητα προκαλεί οπτική δυσφορία σε πολλούς χρήστες λόγω της φωτοστέφανωσης — το φωτεινό κείμενο φαίνεται να ξεχειλίζει στο σκοτεινό φόντο, ειδικά για άτομα με αστιγματισμό. Η βέλτιστη πρακτική για τη σκοτεινή λειτουργία είναι η χρήση υπόλευκου κειμένου σε σκούρο γκρι φόντο (π.χ., #e0e0e0 σε #1a1a1a = 13,28:1), που υπερβαίνει το WCAG AAA ενώ παραμένει άνετο στην ανάγνωση.
Πώς επηρεάζει το sRGB τον υπολογισμό αναλογίας αντίθεσης WCAG;
Το WCAG 2.2 ορίζει τη σχετική φωτεινότητα χρησιμοποιώντας το πρότυπο χρωματικού χώρου sRGB (IEC 61966-2-1). Το sRGB είναι ο προεπιλεγμένος χρωματικός χώρος για τον ιστό και τις περισσότερες οθόνες. Πριν τον υπολογισμό φωτεινότητας, κάθε κανάλι χρώματος (R, G, B) πρέπει να γραμμικοποιηθεί χρησιμοποιώντας τη συνάρτηση μεταφοράς sRGB — μια διόρθωση gamma που μετατρέπει τις μη γραμμικές τιμές οθόνης σε γραμμική ένταση φωτός. Συγκεκριμένα, κανονικοποιημένες τιμές καναλιού (0–1) ίσες ή κάτω από 0,04045 διαιρούνται με 12,92, ενώ μεγαλύτερες τιμές χρησιμοποιούν τον τύπο ((τιμή + 0,055) / 1,055) υψωμένο στη δύναμη 2,4. Αυτή η γραμμικοποίηση είναι απαραίτητη επειδή η φωτεινότητα της οθόνης δεν είναι ανάλογη με την αποθηκευμένη τιμή χρώματος. Χωρίς γραμμικοποίηση sRGB, οι αναλογίες αντίθεσης θα ήταν ανακριβείς, ιδιαίτερα για χρώματα μεσαίου εύρους όπου η καμπύλη gamma έχει τη μεγαλύτερη επίδραση.
Ποια είναι η διαφορά μεταξύ αντίθεσης APCA και WCAG;
Το WCAG 2.2 χρησιμοποιεί έναν απλό τύπο αναλογίας φωτεινότητας που αντιμετωπίζει όλο το κείμενο με τον ίδιο τρόπο ανεξάρτητα από μέγεθος, βάρος ή αν το κείμενο είναι σκούρο σε ανοιχτό ή ανοιχτό σε σκούρο. Ο τύπος παράγει αναλογία από 1:1 έως 21:1 με σταθερά όρια. Ο APCA (Accessible Perceptual Contrast Algorithm), που προτείνεται για το WCAG 3.0, είναι ένα πιο προηγμένο μοντέλο. Λαμβάνει υπόψη τη διαφορά αντίληψης μεταξύ σκούρου κειμένου σε ανοιχτό φόντο και ανοιχτού κειμένου σε σκούρο φόντο (ευαισθησία πολικότητας). Παράγει μια τιμή Lightness Contrast (Lc) που προβλέπει καλύτερα την πραγματική αναγνωσιμότητα. Ο APCA παρέχει επίσης καθοδήγηση ανά μέγεθος γραμματοσειράς: για μια δεδομένη τιμή Lc, προτείνει ελάχιστα μεγέθη κειμένου σε διαφορετικά βάρη γραμματοσειράς. Και τα δύο πρότυπα είναι διαθέσιμα σε αυτό το εργαλείο για σύγκριση.
Μπορώ να χρησιμοποιήσω αυτό ως υπολογιστή αναλογίας αντίθεσης για μη διαδικτυακά σχέδια;
Ναι. Ο τύπος αναλογίας αντίθεσης χρησιμοποιεί καθολικές τιμές φωτεινότητας sRGB που ισχύουν για κάθε μέσο όπου τα χρώματα εμφανίζονται σε οθόνη — συμπεριλαμβανομένων εφαρμογών κινητών, λογισμικού, ψηφιακής σήμανσης, περιπτέρων και παρουσιάσεων. Ο υπολογισμός μετρά την αντικειμενική διαφορά φωτεινότητας μεταξύ δύο χρωμάτων, μια φυσική ιδιότητα ανεξάρτητη από το μέσο. Τα όρια WCAG AA και AAA (4,5:1 και 7:1) αναπτύχθηκαν για περιεχόμενο ιστού, αλλά η υποκείμενη αναλογία αντίθεσης είναι εξίσου χρήσιμη για αξιολόγηση αναγνωσιμότητας σε κάθε ψηφιακό πλαίσιο. Οι οδηγίες της Apple και του Google Material Design αναφέρονται στην ίδια κλίμακα. Για σχεδιασμό εκτύπωσης, ο ίδιος τύπος παρέχει μια χρήσιμη προσέγγιση, αν και τα εκτυπωμένα χρώματα εξαρτώνται από μελάνι, χαρτί και συνθήκες φωτισμού.
Πώς χρησιμοποιώ αυτόν τον ελεγκτή αντίθεσης χρωμάτων;
Εισαγάγετε το χρώμα κειμένου (προσκηνίου) και φόντου χρησιμοποιώντας τους επιλογείς χρωμάτων, ή πληκτρολογήστε κωδικούς HEX απευθείας. Μπορείτε επίσης να αλλάξετε σε είσοδο RGB ή HSL μέσω των καρτελών μορφής, ή να χρησιμοποιήσετε το σταγονόμετρο για να επιλέξετε χρώματα απευθείας από την οθόνη σας. Το εργαλείο δείχνει αμέσως την αναλογία αντίθεσης WCAG 2.2 και τη βαθμολογία APCA, με σήματα επιτυχίας/αποτυχίας για κάθε επίπεδο. Η περιοχή ζωντανής προεπισκόπησης δείχνει πώς φαίνεται πραγματικά το κείμενό σας σε διαφορετικά μεγέθη και βάρη. Αν τα χρώματά σας αποτυγχάνουν, το εργαλείο προτείνει τις πλησιέστερες εναλλακτικές για τα επίπεδα AA και AAA. Μπορείτε επίσης να ελέγξετε πώς φαίνεται ο συνδυασμός χρωμάτων σε άτομα με διαφορετικούς τύπους χρωματικής όρασης. Χρησιμοποιήστε το κουμπί κοινοποίησης για να αντιγράψετε έναν σύνδεσμο με τις τρέχουσες ρυθμίσεις χρωμάτων.
Είναι τα δεδομένα χρωμάτων μου ιδιωτικά όταν χρησιμοποιώ αυτό το εργαλείο;
Ναι, πλήρως. Όλοι οι υπολογισμοί αντίθεσης εκτελούνται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας χρησιμοποιώντας JavaScript. Κανένα δεδομένο χρωμάτων, αποτέλεσμα ή ρύθμιση δεν αποστέλλεται ποτέ σε κανέναν διακομιστή. Το εργαλείο λειτουργεί εκτός σύνδεσης μετά τη φόρτωση, και οι επιλογές χρωμάτων σας δεν αποθηκεύονται, παρακολουθούνται ή μοιράζονται ποτέ.