Ο ελεγχος αντιθεσης χρώματων είναι η διαδικασία μετρησης της διαφορας φωτεινοτητας μεταξυ χρώματων προσκηνιου και φοντου για να προσδιοριστει αν το κείμενο παραμενει αναγνωσιμο για ολους τους χρηστες, συμπεριλαμβανομενων εκεινων με οπτικες αναπηριες.
Οι Οδηγιες Προσβασιμοτητας Περιεχομενου Ιστου (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 εκατομμυρια άτομα με ελλειψη χρώματικης ορασης.
Ολοι οι υπολογισμοι εκτελουνται τοπικα στο πρόγραμμα περιηγησης σας.
Εισάγετε τα χρώματα κειμένου και φόντου χρησιμοποιώντας τους επιλογείς ή κωδικούς HEX.
Ελέγξτε την αναλογία αντίθεσης και τα αποτελέσματα WCAG. Πράσινο σημαίνει επιτυχία, κόκκινο αποτυχία.
Χρησιμοποιήστε την προσομοίωση αχρώματοψίας για να επαληθεύσετε ότι τα χρώματα λειτουργούν για χρήστες με προβλήματα όρασης.
Πώς να Χρησιμοποιήσετε
Εισάγετε τα χρώματα κειμένου και φόντου χρησιμοποιώντας τους επιλογείς ή κωδικούς HEX.
Ελέγξτε την αναλογία αντίθεσης και τα αποτελέσματα WCAG. Πράσινο σημαίνει επιτυχία, κόκκινο αποτυχία.
Χρησιμοποιήστε την προσομοίωση αχρώματοψίας για να επαληθεύσετε ότι τα χρώματα λειτουργούν για χρήστες με προβλήματα όρασης.
Μεθοδολογία
Ο υπολογισμός της αναλογιας αντιθεσης ακολουθει τον αλγοριθμο 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 τοσο για κανονικο οσο και για μεγάλο κείμενο, παρεχοντας ενα σαφες αποτέλεσμα επιτυχιας ή αποτυχιας για κάθε επιπεδο συμμορφωσης.
Μια αναλογια αντιθεσης 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 για ελεγχο ολοκληρων σελιδων και συνδυαστε τον ελεγχο αντιθεσης με προσομοιωση αχρώματοψιας για ολοκληρωμενη καλυψη.
Όλοι οι υπολογισμοί γίνονται τοπικά στο πρόγραμμα περιήγησής σας. Δεν αποστέλλονται δεδομένα σε κανέναν διακομιστή.
Σας φάνηκε χρήσιμο αυτό το εργαλείο;
Θέλετε να μας πείτε περισσότερα;
0/500
Θέλετε να επικοινωνήσουμε μαζί σας;
Ευχαριστούμε για τα σχόλιά σας!
Συχνές ερωτήσεις
Τι είναι η αναλογία αντίθεσης 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. Κανένα δεδομένο χρωμάτων, αποτέλεσμα ή ρύθμιση δεν αποστέλλεται ποτέ σε κανέναν διακομιστή. Το εργαλείο λειτουργεί εκτός σύνδεσης μετά τη φόρτωση, και οι επιλογές χρωμάτων σας δεν αποθηκεύονται, παρακολουθούνται ή μοιράζονται ποτέ.
Τα Αγαπημένα μου
Σύρετε για αναδιάταξη
Δεν υπάρχουν ακόμα αγαπημένα
Πατήστε το ☆ σε οποιοδήποτε εργαλείο για γρήγορη πρόσβαση.