Επιχειρήσεων
Έλεγχος χρωματικής αντίθεσης
Διαφήμιση
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
Εισαγάγετε τους χρωματικούς σας συνδυασμούς παρακάτω για να τους δοκιμάσετε με τον ελεγκτή χρωματικής αντίθεσης και να δείτε αμέσως εάν πληρούν τα πρότυπα προσβασιμότητας.
Πώς λειτουργεί ο Έλεγχος Αντίθεσης Χρώματος
Εισαγάγετε τα χρώματα προσκηνίου και φόντου χρησιμοποιώντας τιμές RGB hex ή επιλέξτε τα απευθείας με το Επιλογέας χρώματος.
- Προσαρμόστε το Alpha για να αλλάξετε πόσο διαφανές είναι το χρώμα του προσκηνίου.
- Χρησιμοποιήστε το ρυθμιστικό Lightness για να κάνετε το χρώμα να φαίνεται πιο ανοιχτό ή πιο σκούρο.
Στη συνέχεια, το εργαλείο μας υπολογίζει τον λόγο αντίθεσης και τον ελέγχει σύμφωνα με τις οδηγίες WCAG:
- WCAG 2.0 Επίπεδο AA
- Τουλάχιστον 4,5:1 για κανονικό κείμενο
- Τουλάχιστον 3:1 για μεγάλο κείμενο
- WCAG 2.1 (UI και γραφικά)
- Τουλάχιστον 3:1 για εικονίδια, περιγράμματα και άλλα στοιχεία διεπαφής
- Επίπεδο WCAG AAA
- Τουλάχιστον 7:1 για κανονικό κείμενο
- Τουλάχιστον 4,5:1 για μεγάλο κείμενο
Μεγάλο κείμενο σημαίνει είτε:
- 14 pt (περίπου 18,66 px) και έντονη γραφή ή
- 18 pt (περίπου px) ή μεγαλύτερο
Μπορείτε να χρησιμοποιήσετε το σταγονόμετρο στο Color Picker για να συλλάβετε ακριβή χρώματα από οτιδήποτε στην οθόνη σας.
Για να ξεχωρίζουν οι σύνδεσμοι που βασίζονται μόνο στο χρώμα, χρησιμοποιήστε τον ελεγκτή αντίθεσης χρωμάτων για να βεβαιωθείτε ότι πληρούν τα πρότυπα προσβασιμότητας και ότι παραμένουν ευανάγνωστοι για όλους.