Τι μετρά ένας έλεγχος αντίθεσης;
Ένας έλεγχος αντίθεσης συγκρίνει τη σχετική φωτεινότητα ενός χρώματος προσκηνίου και ενός χρώματος φόντου. Το αποτέλεσμα εμφανίζεται ως αναλογία από 1:1, όπου τα χρώματα είναι οπτικά ταυτόσημα, έως 21:1, όπου το μαύρο και το λευκό έχουν τη μέγιστη αντίθεση.
Αυτό το εργαλείο αναφέρει ενδείξεις επιτυχίας και αποτυχίας με βάση το πρότυπο WCAG για κανονικό και μεγάλο κείμενο. Είναι χρήσιμο για πρώιμες σχεδιαστικές αποφάσεις, καταστάσεις συστατικών, tokens θέματος και γρήγορους ελέγχους πριν από μια πιο ολοκληρωμένη αξιολόγηση προσβασιμότητας.
Πώς να διαβάσετε τα αποτελέσματα
| Check | Ελάχιστη αναλογία | Meaning |
|---|---|---|
| AA κανονικό κείμενο | 4.5:1 | Συνηθισμένος στόχος για το κανονικό σώμα κειμένου. |
| AA μεγάλο κείμενο | 3:1 | Ισχύει για μεγαλύτερο ή πιο έντονο κείμενο όπου τα σχήματα των γραμμάτων είναι πιο εύκολα στην ανάγνωση. |
| AAA κανονικό κείμενο | 7:1 | Πιο αυστηρός στόχος για το κανονικό κείμενο σε περιβάλλοντα υψηλής προσβασιμότητας. |
| AAA μεγάλο κείμενο | 4.5:1 | Πιο αυστηρός στόχος για το μεγάλο κείμενο. |
Τι δεν αποδεικνύει αυτό το εργαλείο
Μια αναλογία είναι ισχυρό δείκτης, αλλά δεν αποτελεί πλήρη έλεγχο προσβασιμότητας. Η πραγματική αναγνωσιμότητα εξαρτάται επίσης από την τυπογραφία, το βάρος της γραμματοσειράς, τις καταστάσεις hover/focus, τις απενεργοποιημένες καταστάσεις, τα περιβάλλοντα χρώματα, την ποιότητα της οθόνης και το αν το κείμενο εμφανίζεται πάνω σε εικόνες ή κλίσεις.
- Η διαφάνεια και οι κλίσεις χρειάζονται ξεχωριστή αξιολόγηση.
- Τα μικρά εικονίδια και οι λεπτές γραμμές ενδέχεται να χρειάζονται ισχυρότερη αντίθεση από το κοντινό κείμενο.
- Τα χρώματα της μάρκας μπορούν να περνούν σε ένα ζεύγος και να αποτυγχάνουν σε άλλο.
- Η αντίθεση σάρωσης QR και η αντίθεση αναγνωσιμότητας κειμένου σχετίζονται, αλλά δεν είναι ο ίδιος έλεγχος.
Τρόποι βελτίωσης της αδύναμης αντίθεσης
Σκοτεινότερο προσκήνιο
Για ανοιχτά φόντα, μετακινήστε το χρώμα του κειμένου προς ένα πιο σκούρο ουδέτερο ή πιο έντονο χρώμα της μάρκας.
Ανοιχτότερο φόντο
Μικρές αλλαγές στο φόντο μπορούν να κάνουν ένα χρώμα της μάρκας να περάσει χωρίς να αλλάξει το χρώμα του προσκηνίου.
Αυξήστε το μέγεθος ή το βάρος του κειμένου
Το μεγάλο ή πιο έντονο κείμενο έχει χαμηλότερο όριο AA, αλλά εξακολουθεί να χρειάζεται επαρκή οπτική διαφορά.
Ελέγξτε κάθε κατάσταση
Οι καταστάσεις hover, focus, απενεργοποιημένο, επιλεγμένο και σφάλματος συχνά χρησιμοποιούν διαφορετικά ζεύγη χρωμάτων.
Συχνές ερωτήσεις
Είναι αυτό πλήρης έλεγχος συμμόρφωσης WCAG;
Όχι. Υπολογίζει τα όρια αντίθεσης κατά WCAG για ζεύγη χρωμάτων. Μια πλήρης ανασκόπηση ελέγχει επίσης τη διάταξη, τη συμπεριφορά πληκτρολογίου, τη σημασιολογία, τις καταστάσεις εστίασης, τα κείμενα εναλλακτικής περιγραφής και την πραγματική αποδιδόμενη τυπογραφία.
Τι θεωρείται μεγάλο κείμενο;
Οι οδηγίες WCAG θεωρούν το μεγάλο κείμενο περίπου 18 pt κανονικό ή 14 pt έντονο και άνω. Στη δουλειά στο web, επιβεβαιώστε το πραγματικό αποδιδόμενο μέγεθος και βάρος, όχι μόνο την ετικέτα σχεδίασης.
Μπορώ να το χρησιμοποιήσω για διαφανή χρώματα;
Αυτός ο συμπαγής ελεγκτής χρησιμοποιεί αδιαφανή χρώματα sRGB. Εάν το UI σας χρησιμοποιεί διαφάνεια, αναμείξτε πρώτα το τελικό αποδιδόμενο προσκήνιο και φόντο και έπειτα ελέγξτε το προκύπτον ζεύγος.
Το να περνάει το AA σημαίνει ότι το σχέδιο είναι πάντα αναγνώσιμο;
Όχι πάντα. Πολύ λεπτές γραμματοσειρές, μικρές ετικέτες UI, πολυσύχναστα φόντα και οθόνες χαμηλής ποιότητας μπορούν ακόμη να κάνουν το κείμενο δύσκολο στην ανάγνωση. Θεωρήστε την αναλογία ως ένα σημαντικό δείκτη.
Είναι αυτό το ίδιο με την αντίθεση QR;
Όχι. Η αντίθεση σε QR κώδικες επηρεάζει την αξιοπιστία του σαρωτή, ενώ αυτό το εργαλείο εστιάζει στα όρια αναγνωσιμότητας του κειμένου. Τα μαθηματικά σχετίζονται, αλλά η πρακτική απόφαση είναι διαφορετική.