Ελεγκτής Αντίθεσης Χρωμάτων

Όλα τα εργαλεία
Ελεγκτής Αντίθεσης Χρωμάτων
Ελέγξτε τον λόγο αντίθεσης WCAG μεταξύ χρώματος κειμένου και φόντου — δείτε βαθμολογίες AA/AAA για κανονικό κείμενο, μεγάλο κείμενο και στοιχεία UI, με ζωντανή προεπισκόπηση και προτάσεις προσβάσιμων χρωμάτων.
Χρώμα κειμένου
Tint
Χρώμα φόντου
Tint
Λόγος αντίθεσης
--:1
Κανονικό κείμενο
Σώμα κειμένου κάτω από 18px (ή κάτω από 14px έντονο)
AA AAA
Μεγάλο κείμενο
18px+ κανονικό, ή 14px+ έντονο
AA AAA
Στοιχεία UI
Εικονίδια, περιγράμματα, στοιχεία φόρμας & γραφικά
AA AAA
Ζωντανή προεπισκόπηση

The quick brown fox

Το μεγάλο κείμενο διαβάζεται άνετα όταν η αντίθεση είναι επαρκής.

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

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

Όλα υπολογίζονται ζωντανά στο πρόγραμμα περιήγησης χρησιμοποιώντας τον τύπο σχετικής φωτεινότητας WCAG 2.x — χωρίς μεταφορτώσεις, χωρίς εγγραφή, εντελώς δωρεάν.

Κοινοποίηση
Σχετικά Εργαλεία
Προσομοιωτής Χρωματικής Τύφλωσης

Δείτε την εικόνα ή παλέτα σας όπως τη βλέπουν άτομα με πρωτανοπία, δευτερανοπία, τριτανοπία ή ακρωματοψία — εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησης, τίποτα δεν μεταφορτώνεται.
Μετατροπέας Κωδικών Χρώματος

Μετατρέψτε χρώματα μεταξύ HEX, RGB, RGBA, HSL, HSLA και HSV — επιλέξτε χρώμα, ρυθμίστε το alpha και αντιγράψτε οποιαδήποτε μορφή άμεσα.
Εξαγωγέας Παλέτας

Επικολλήστε ή εισαγάγετε ένα σύνολο χρωμάτων και εξαγάγετέ τα άμεσα σε CSS variables, SCSS, Tailwind config, JSON ή SVG swatches — το τελευταίο βήμα για κάθε παλέτα.
Δημοφιλείς αναζητήσεις
έλεγχος αντίθεσης χρωμάτων λόγος αντίθεσης wcag έλεγχος αντίθεσης προσβασιμότητας έλεγχος αντίθεσης κειμένου δοκιμή αντίθεσης aa aaa έλεγχος αντίθεσης χρωμάτων online

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο — αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.