Πώς μπορώ να ελέγξω αν τα χρώματα κειμένου και φόντου μου πληρούν τα πρότυπα WCAG;

Εισαγάγετε κωδικούς hex στα πεδία Χρώμα κειμένου και Χρώμα φόντου ή χρησιμοποιήστε τους επιλογείς. Ο Λόγος αντίθεσης εμφανίζεται με Επιτυχία ή Αποτυχία για AA και AAA σε κανονικό και μεγάλο κείμενο, καθώς και για στοιχεία διεπαφής.

Τι αναλογία αντίθεσης απαιτεί το WCAG AA;

Το AA απαιτεί 4,5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο. Το AAA απαιτεί 7:1 για κανονικό κείμενο και 4,5:1 για μεγάλο κείμενο. Τα στοιχεία διεπαφής και τα γραφικά αντικείμενα απαιτούν 3:1.

Τι θεωρείται μεγάλο κείμενο;

Το εργαλείο αντιμετωπίζει το κανονικό κείμενο 18pt (24px) ή το έντονο κείμενο 14pt (18,66px) ως μεγάλο. Το μικρότερο κείμενο πρέπει να πληροί τα υψηλότερα όρια για κανονικό κείμενο.

Τα χρώματά μου αποτυγχάνουν στο AA. Πώς μπορώ να τα διορθώσω;

Χρησιμοποιήστε τις προτάσεις με ένα κλικ Διόρθωση χρώματος κειμένου ή Διόρθωση φόντου. Προσαρμόζουν τη φωτεινότητα διατηρώντας την ίδια απόχρωση έως ότου το ζεύγος φτάσει το 4,5:1.

Ποιες μορφές χρωμάτων δέχεται και μπορώ να επιλέξω από την οθόνη;

Δέχεται τριψήφιες και εξαψήφιες δεκαεξαδικές τιμές, όπως #abc ή #1e293b. Ένα κουμπί Επιλογή χρώματος από την οθόνη εμφανίζεται σε προγράμματα περιήγησης που υποστηρίζουν το EyeDropper API, όπως ο Chromium.

Είναι πραγματικά δωρεάν;

Ναι. Κάθε εργαλείο είναι δωρεάν στη χρήση, χωρίς λογαριασμό και χωρίς πιστωτική κάρτα. Η εργασία εκτελείται στη συσκευή σας και όχι στους διακομιστές μας, γεγονός που την καθιστά δωρεάν στη λειτουργία της.

Λειτουργεί σε κινητό;

Ναι. Λειτουργεί στα σύγχρονα προγράμματα περιήγησης κινητών σε iOS και Android, χωρίς εγκατάσταση.

🌓

Έλεγχος Αντίθεσης Χρωμάτων WCAG δωρεάν

Ελέγξτε αν δύο χρώματα πληρούν τα πρότυπα αντίθεσης WCAG AA και AAA για προσβασιμότητα. Ζωντανή προεπισκόπηση σε πολλαπλά μεγέθη κειμένου με αυτόματες προτάσεις όταν η αντίθεση είναι χαμηλή.

Εκτελείται στο πρόγραμμα περιήγησηςΧωρίς εγγραφή, χωρίς αναδυόμενα παράθυραΔεν απαιτείται σύνδεσηΔωρεάν για πάντα

Λειτουργεί εκτός σύνδεσης μόλις φορτωθεί

Χρώμα κειμένου

Χρώμα φόντου

Μεγάλη επικεφαλίδα

Μεσαίο κείμενο (18px) για ανάγνωση και περιεχόμενο.

Κανονικό κείμενο σώματος (16px) για παραγράφους.

Μικρό κείμενο (14px) για λεζάντες και μεταδεδομένα.

14,63:1

Αναλογία αντίθεσης

✓WCAG AA — κανονικό κείμενο

Απαιτεί 4.5:1 · Έχετε 14,63:1

✓WCAG AA — μεγάλο κείμενο

Απαιτεί 3.0:1 · Έχετε 14,63:1

✓WCAG AAA — κανονικό κείμενο

Απαιτεί 7.0:1 · Έχετε 14,63:1

✓WCAG AAA — μεγάλο κείμενο

Απαιτεί 4.5:1 · Έχετε 14,63:1

✓Στοιχεία UI / γραφικά αντικείμενα

Απαιτεί 3.0:1 · Έχετε 14,63:1

Γρήγορες προεπιλογές

Βασισμένο στις οδηγίες αντίθεσης WCAG 2.1. Μεγάλο κείμενο = 18pt (24px) κανονικό ή 14pt (18,66px) έντονο. Οι κωδικοί HEX ενημερώνονται και από τις δύο κατευθύνσεις: πληκτρολογήστε HEX ή επιλέξτε χρώμα και οι δύο εισόδοι παραμένουν συγχρονισμένες.

Συνηθισμένες χρήσεις

Ελέγξτε τις ιστοσελίδες για WCAG συμμόρφωσηΒεβαιωθείτε ότι τα χρώματα κειμένου του ιστότοπού σας πληρούν τα πρότυπα WCAG AA ή AAA για την προσβασιμότητα.
Επαληθεύστε τους συνδυασμούς χρωμάτων μάρκαςΔοκιμάστε τους συνδυασμούς χρωμάτων της μάρκας σας για να εξασφαλίσετε ότι λειτουργούν για προσβάσιμο σχεδιασμό ΔΥ.
Δοκιμάστε τις παλέτες χρωμάτων σκοτεινής λειτουργίαςΤο ανοιχτό κείμενο σε σκούρο φόντο μπορεί ακόμα να αποτύχει στον αντίθεση — ελέγξτε τα χρωματικά ζεύγη σας σε σκοτεινό λειτουργία εδώ.
Χρωματικά ζεύγη για τυπωμένο υλικόΤα αφίσες, οι σημάνσεις και το τυπωμένο υλικό χρειάζονται επίσης αναγνώσιμη αντίθεση — ειδικά για τους μεγαλύτερους θεατές.
Σχεδιάστε προσβάσιμα χρώματα κουμπιώνΒεβαιωθείτε ότι οι CTA, κουμπιά ενέργειας και σύνδεσμοι διέρχονται WCAG έναντι των φόντων τους.

Πώς λειτουργεί

Ο έλεγχος αντίθεσης εκτελείται εξ ολοκλήρου στον browser σας με τον αλγόριθμο σχετικής φωτεινότητας του WCAG 2.1 — χωρίς βιβλιοθήκη ή διακομιστή, μόνο χειρόγραφα μαθηματικά που ακολουθούν ακριβώς την προδιαγραφή. Κάθε αποτέλεσμα ενημερώνεται σε πραγματικό χρόνο καθώς πληκτρολογείτε ή επιλέγετε χρώμα.

1
Είσοδος hex και κανονικοποίηση
Γίνονται δεκτές τιμές hex 3 ψηφίων (#abc) και 6 ψηφίων (#aabbcc) και κανονικοποιούνται σε πλήρεις τριάδες RGB. Η μη έγκυρη είσοδος απορρίπτεται αμέσως αντί να γίνεται σιωπηλά μαύρο, οπότε εμφανίζεται κόκκινο περίγραμμα αντί για παραπλανητικό αποτέλεσμα επιτυχίας.
2
Υπολογισμός φωτεινότητας WCAG
Κάθε χρώμα μετατρέπεται σε σχετική φωτεινότητα με τον τύπο του WCAG 2.1: οι τιμές καναλιών sRGB γραμμικοποιούνται με τμηματική διόρθωση γάμμα (διαίρεση με 12.92 κάτω από 0.03928, ύψωση στη δύναμη 2.4 πάνω από αυτό) και σταθμίζονται ως 0.2126R + 0.7152G + 0.0722B.
3
Λόγος αντίθεσης και έλεγχοι συμμόρφωσης
Ο λόγος αντίθεσης υπολογίζεται ως (φωτεινότερο + 0.05) / (σκουρότερο + 0.05) και ελέγχεται έναντι και των πέντε ορίων WCAG: AA κανονικό κείμενο (4.5:1), AA μεγάλο κείμενο (3:1), AAA κανονικό κείμενο (7:1), AAA μεγάλο κείμενο (4.5:1) και στοιχεία UI (3:1). Τα αποτελέσματα ενημερώνονται σε κάθε πάτημα πλήκτρου.
4
Προτάσεις διόρθωσης που διατηρούν την απόχρωση
Όταν το ζεύγος αποτυγχάνει στο WCAG AA, το εργαλείο αναζητά στον χώρο φωτεινότητας HSL — προχωρώντας από την αρχική φωτεινότητα και προς τις δύο κατευθύνσεις — για να βρει την πλησιέστερη παραλλαγή κάθε χρώματος που περνά το 4.5:1 διατηρώντας την ίδια απόχρωση και κορεσμό. Είναι επίσης διαθέσιμο το EyeDropper API (Chromium) για λήψη οποιουδήποτε χρώματος απευθείας από την οθόνη σας.

Σχετικά εργαλεία

👁️

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

Δείτε πώς φαίνεται το σχέδιό σας σε άτομα με διαταραχές χρωματικής όρασης. Προσομοιώνει πρωτανωπία, δευτερανωπία, τριτανωπία, αχρωματοψία και ελαφρύτερες ανωμαλίες.

Δοκιμάστε τοΤα αρχεία παραμένουν τοπικά

📐

Ποια Είναι η Ανάλυση της Οθόνης Μου

Δείτε την ανάλυση της οθόνης σας σε CSS και πραγματικά pixel, το μέγεθος παραθύρου, την αναλογία pixel, το βάθος χρώματος, HDR, υποστήριξη αφής και ρυθμό ανανέωσης και αντιγράψτε τα όλα.

Δοκιμάστε το

🖥️

Δοκιμή Νεκρών Pixel

Ελέγξτε την οθόνη σας για νεκρά ή κολλημένα pixel με πλήρη οθόνη σε μαύρο, λευκό, κόκκινο, πράσινο, μπλε και γκρι, συν ένα προαιρετικό εργαλείο διόρθωσης κολλημένων pixel.