Το Contrast Checker υπολογίζει τον λόγο αντίθεσης WCAG 2.1 μεταξύ δύο χρωμάτων και τα βαθμολογεί έναντι των κατωφλίων AA/AAA τόσο για κανονικό όσο και για μεγάλο κείμενο. Η ζωντανή προεπισκόπηση εμφανίζει κείμενο αποδοσμένο στα επιλεγμένα χρώματα, και ένα κουμπί "δειγματοληψία φόντου σελίδας" δειγματίζει την τρέχουσα σελίδα.
Η προσβασιμότητα απαιτείται όλο και περισσότερο — η συμμόρφωση με το WCAG είναι νομική υποχρέωση σε πολλές δικαιοδοσίες, και ακόμη κι όπου δεν είναι, η κακή αντίθεση απωθεί τους χρήστες. Το Contrast Checker σας λέει άμεσα αν δύο οποιαδήποτε χρώματα πληρούν τα πρότυπα WCAG. Επιλέξτε ένα χρώμα προσκηνίου και ένα φόντου μέσω color picker ή επικολλήστε τιμές hex· το εργαλείο υπολογίζει τον λόγο αντίθεσης χρησιμοποιώντας τον επίσημο τύπο φωτεινότητας WCAG και τον βαθμολογεί έναντι τεσσάρων κατωφλίων: AA κανονικό (≥4.5:1), AA μεγάλο (≥3:1), AAA κανονικό (≥7:1), και AAA μεγάλο (≥4.5:1). Κάθε κατώφλι εμφανίζει ένα σαφές badge Pass/Fail. Μια ζωντανή προεπισκόπηση αποδίδει μεγάλο και κανονικό κείμενο στα επιλεγμένα χρώματα ώστε να βλέπετε την πραγματική οπτική επίδραση. Ένα βοηθητικό κουμπί δειγματίζει το υπολογισμένο φόντο του body της τρέχουσας σελίδας — χρήσιμο όταν ελέγχετε αν ένας συνδυασμός χρωμάτων σε έναν πραγματικό ιστότοπο περνάει. Όλα εκτελούνται τοπικά στο πρόγραμμα περιήγησής σας, χωρίς αποστολή δεδομένων.
Χρησιμοποιεί τον επίσημο τύπο φωτεινότητας WCAG για τον υπολογισμό του λόγου αντίθεσης. Το αποτέλεσμα είναι ακριβές και ταιριάζει με κάθε συμμορφούμενο εργαλείο ελέγχου προσβασιμότητας.
Pass/fail για AA κανονικό (≥4.5:1), AA μεγάλο (≥3:1), AAA κανονικό (≥7:1), AAA μεγάλο (≥4.5:1) — όλα σε μορφή πλέγματος.
Αποδίδει πραγματικό μεγάλο και κανονικό κείμενο στα επιλεγμένα χρώματά σας ώστε να βλέπετε την οπτική επίδραση παράλληλα με τον αριθμητικό λόγο.
Με ένα κλικ δειγματίζει το υπολογισμένο χρώμα φόντου του body της τρέχουσας σελίδας — χρήσιμο για δοκιμή πραγματικών συνδυασμών.
Πληκτρολογήστε μια τιμή hex ή χρησιμοποιήστε το εγγενές color picker. Οι τιμές συγχρονίζονται αμφίδρομα καθώς επεξεργάζεστε το ένα ή το άλλο.
Η εναλλαγή με ένα κλικ αντιστρέφει προσκήνιο και φόντο — χρήσιμο κατά τον έλεγχο ανεστραμμένων θεμάτων ή καταστάσεων hover.
Πριν οριστικοποιήσετε μια παλέτα χρωμάτων, ελέγξτε κάθε χρώμα κειμένου έναντι του φόντου του για να διασφαλίσετε συμμόρφωση με το WCAG AA — αποφεύγει επανεργασία αργότερα.
Χρησιμοποιήστε το "δειγματοληψία φόντου σελίδας" σε έναν ζωντανό ιστότοπο, μετά επικολλήστε το πραγματικό χρώμα κειμένου — βρείτε παραβιάσεις προσβασιμότητας σε λίγα λεπτά χωρίς να ανοίξετε το Lighthouse.
Όταν μια επωνυμία επιλέγει ένα χρώμα που μπορεί να αποτύχει σε προσβασιμότητα, χρησιμοποιήστε το checker για να βρείτε την πλησιέστερη συμμορφούμενη παραλλαγή (πιο σκούρα/ανοιχτή απόχρωση).
Επαληθεύστε ότι τα χρώματα των καταστάσεων hover/active/disabled εξακολουθούν να πληρούν τις απαιτήσεις αντίθεσης, όχι μόνο η προεπιλογή.
Τα σκοτεινά θέματα συχνά αποτυγχάνουν στην αντίθεση για γκρι-σε-γκρι κείμενο. Ελέγξτε τα πιο σκούρα γκρι σας έναντι των πιο σκούρων φόντων σας για να τα εντοπίσετε.
Κάντε κλικ στο εικονίδιο Contrast στο dock του DevSuite Pro. Ανοίγει ένα πάνελ με πεδία χρώματος προσκηνίου και φόντου.
Χρησιμοποιήστε το color picker ή επικολλήστε μια τιμή hex για το καθένα. Η ζωντανή προεπισκόπηση ενημερώνεται καθώς αλλάζετε χρώματα.
Ο μεγάλος αριθμός (π.χ. 4.8:1) είναι ο λόγος αντίθεσης. Όσο μεγαλύτερος τόσο καλύτερα. Το 3 είναι το απόλυτο ελάχιστο· το 4.5 είναι ο στόχος για κανονικό κείμενο.
Τα badges pass/fail για AA και AAA, κανονικό και μεγάλο μέγεθος κειμένου, δείχνουν με μια ματιά για τι πληρεί προϋποθέσεις ο συνδυασμός σας.
Αν αποτυγχάνει, τροποποιήστε τα χρώματα. Σκουρύνετε το προσκήνιο ή ανοίξτε το φόντο (ή αντίστροφα) μέχρι να εμφανιστεί Pass για το κατώφλι-στόχο.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 64+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
