Αντίθεση Χρωμάτων WCAG για Σχεδιαστές

Αν το κείμενό σας δεν πληροί την αντίθεση WCAG AA, περίπου 285 εκατομμύρια άτομα με προβλήματα όρασης δεν μπορούν να το διαβάσουν. Επιπλέον, βρίσκεστε σε ολοένα και πιο επισφαλές νομικό έδαφος στην ΕΕ και τις ΗΠΑ. Τα καλά νέα: ο κανόνας είναι απλός.

Ο κανόνας 4.5:1

Το κύριο κείμενο πρέπει να έχει αναλογία αντίθεσης τουλάχιστον 4.5:1 σε σχέση με το φόντο του για να πληροί το WCAG AA. Το μεγάλο κείμενο (24px+ κανονικό ή 18px+ έντονο) έχει χαμηλότερο όριο 3:1.

Για συμμόρφωση AAA: 7:1 για κύριο κείμενο, 4.5:1 για μεγάλο κείμενο.

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

Το WCAG χρησιμοποιεί σχετική φωτεινότητα — μετατρέψτε κάθε χρώμα σε τιμή φωτεινότητας (0 = μαύρο, 1 = λευκό) χρησιμοποιώντας έναν συγκεκριμένο τύπο και στη συνέχεια υπολογίστε (L1 + 0.05) / (L2 + 0.05), όπου L1 είναι το πιο ανοιχτό χρώμα.

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

Συχνές περιπτώσεις αποτυχίας

• Ανοιχτό γκρι σε λευκό — #999 σε #fff = 2.85 (αποτυγχάνει). #767676 σε #fff = 4.54 (επιτυγχάνει).
• Λευκό σε κίτρινο — σχεδόν πάντα αποτυγχάνει. Χρησιμοποιήστε σκούρο κείμενο σε κίτρινο.
• Χρωματιστοί σύνδεσμοι σε κύριο κείμενο — οι περισσότεροι μπλε σύνδεσμοι περνούν σε λευκό αλλά αποτυγχάνουν σε ανοιχτό γκρι. Ελέγξτε το πραγματικό περιβάλλον φόντο.
• Χρώματα επωνυμίας που φαίνονται υπέροχα — συχνά αποτυγχάνουν. Προσθέστε ένα υπόλευκο φόντο ή σκουρύνετε το κείμενο.

Επιλογή προσβάσιμων χρωματικών συνδυασμών

Τρία αξιόπιστα μοτίβα:

1. Σκούρο σε ανοιχτό — #1f2937 σε #fff = 14:1 (τέλειο).
2. Λευκό σε σκούρο — #fff σε #1f2937 = 14:1 (τέλειο).
3. Σκούρο σε έντονο — #1f2937 σε #fbbf24 = 9:1 (τέλειο για κουμπιά).

Πέρα από το κείμενο

Το WCAG 2.1 απαιτεί επίσης 3:1 για μη κειμενικά στοιχεία (κουμπιά, δακτύλιοι εστίασης, περιγράμματα φορμών). Το εργαλείο ελέγχου χειρίζεται και τα δύο.

Ταπετσαρίες που δεν θα ανταγωνίζονται τα widget σας

Αν είστε σχεδιαστής που τοποθετεί ταπετσαρίες πίσω από widget ρολογιού και ειδοποιήσεις, επιλέξτε ταπετσαρίες με αντίθεση κάτω από 5:1 στις ζώνες των widget. Το εργαλείο Gaussian blur μπορεί να μαλακώσει πολυάσχολες περιοχές οποιασδήποτε ταπετσαρίας για καλύτερη αναγνωσιμότητα των widget.

Δοκιμάστε τα δωρεάν εργαλεία μας

Οι περισσότεροι από αυτούς τους οδηγούς συνδυάζονται με ένα πρακτικό εργαλείο που μπορείτε να χρησιμοποιήσετε αμέσως — δεν απαιτείται εγγραφή για την πρώτη χρήση:

• Αλλαγή μεγέθους εικόνας — pixel-τέλεια μείωση + αύξηση μεγέθους.
• Μετατροπή σε WebP — αρχεία 30-50% μικρότερα από JPG.
• Αφαίρεση φόντου — αποκοπή με ένα κλικ, διάφανο PNG.
• Δημιουργία favicon — κάθε μέγεθος προγράμματος περιήγησης από μία πηγή.
• Αλλαγή μεγέθους για social media — ακριβείς διαστάσεις κάθε πλατφόρμας.
• Μαζική επεξεργασία — εφαρμογή οποιουδήποτε εργαλείου σε έως 200 εικόνες ταυτόχρονα.

Περιηγηθείτε στον πλήρη κατάλογο εργαλείων.