ImageColorPicker.com

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

Δοκίμασε την αναλογία αντίθεσης μεταξύ χρωμάτων προσκηνίου και φόντου για να διασφαλίσεις την προσβασιμότητα.

Έλεγξε τα χρώματά σου

Δοκίμασε συνδυασμούς χρωμάτων για να διασφαλίσεις ότι πληρούν τα πρότυπα προσβασιμότητας WCAG για την αναγνωσιμότητα του κειμένου.

6.47 προς 1
Αντίθεση
AA
Αποτέλεσμα κειμένου
Καλή

Σύγκριση: #FFFFFF σε #8631C3

Κείμενο

16px, Κανονικό (400)

Λογίζεται ως κανονικό κείμενο.

  • AA (WCAG 1.4.3): τουλάχιστον 4.5:1

    Επιτυχία

  • AAA (WCAG 1.4.6): τουλάχιστον 7:1

    Απαιτούνται ακόμα 0.53

    Αποτυχία

Στοιχεία διεπαφής και γραφικά

Εικονίδια, περιγράμματα πεδίων, δείκτες εστίασης και άλλα μέρη που πρέπει να βλέπεις για να χρησιμοποιήσεις τη διεπαφή.

  • AA (WCAG 1.4.11): τουλάχιστον 3:1

    Επιτυχία
6.47 προς 1. Κείμενο: περνάει AA, δεν περνάει AAA. Στοιχεία UI: περνάει.
Πώς γίνεται ο έλεγχος
Χρώματα που συγκρίθηκαν (μετά την ανάμειξη)
Κείμενο #FFFFFF σε φόντο #8631C3
Σχετική φωτεινότητα
Κείμενο 1.0000, φόντο 0.1120
Τύπος
(L1 + 0.05) / (L2 + 0.05) όπου L1 είναι η φωτεινότητα του φωτεινότερου χρώματος και L2 του πιο σκοτεινού.
Ακριβής αναλογία
6.4794 προς 1, εμφανίζεται ως 6.47 προς 1. Η εμφανιζόμενη τιμή έχει κοπεί, δεν έχει στρογγυλοποιηθεί, οπότε ποτέ δεν δείχνει καλύτερη από ό,τι είναι. Η ακριβής τιμή είναι αυτή που συγκρίνεται με την απαίτηση.

Μέγεθος κειμένου: 16px, Κανονικό (400)

Λογίζεται ως κανονικό κείμενο. Μεγάλο κείμενο είναι τουλάχιστον 24px (18pt), ή τουλάχιστον 18.67px (14pt) όταν είναι έντονο (βάρος 700 ή περισσότερο). Τα μεγέθη εμφανίζονται κομμένα, όχι στρογγυλοποιημένα.

Λογίζεται ως κανονικό κείμενο. Μεγάλο κείμενο είναι τουλάχιστον 24px (18pt), ή τουλάχιστον 18.67px (14pt) όταν είναι έντονο (βάρος 700 ή περισσότερο). Τα μεγέθη εμφανίζονται κομμένα, όχι στρογγυλοποιημένα.

Aa
Τίτλος προεπισκόπησης

Η γρήγορη καφέ αλεπού πηδάει πάνω από τον τεμπέλη σκύλο

Παράδειγμα μικρού κειμένου (12px)

Κείμενο
#ffffff
Φόντο
#8631c3

Πρότυπα WCAG

Επίπεδο AA

Ελάχιστη αναλογία αντίθεσης 4.5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο. Απαιτείται για τις περισσότερες ιστοσελίδες.

Επίπεδο AAA

Ενισχυμένη αναλογία αντίθεσης 7:1 για κανονικό κείμενο και 4.5:1 για μεγάλο κείμενο. Συνιστάται για βέλτιστη προσβασιμότητα.

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

Υπολόγισε την αναλογία αντίθεσης των χρωμάτων κειμένου και φόντου.

Επίλεξε ένα χρώμα χρησιμοποιώντας τον Selector de color για το κείμενο και το χρώμα φόντου ή εισήγαγε ένα χρώμα σε μορφή RGB hexadecimal (π.χ., #259 ή #2596BE). Μπορείς να ρυθμίσεις τον ολισθητήρα για να επιλέξεις χρώμα. Οι Οδηγίες Προσβασιμότητας Περιεχομένου Ιστού (WCAG) έχουν μια συγκεκριμένη οδηγία για να βοηθήσουν να καθοριστεί αν το κείμενο είναι αναγνώσιμο για άτομα με όραση. Αυτό το κριτήριο χρησιμοποιεί έναν συγκεκριμένο αλγόριθμο για να αντιστοιχίσει συνδυασμούς χρωμάτων σε συγκρίσιμες αναλογίες. Χρησιμοποιώντας αυτόν τον τύπο, το WCAG δηλώνει ότι μια αναλογία αντίθεσης χρωμάτων 4.5:1 με το κείμενο και το φόντο του είναι επαρκής για κανονικό κείμενο (σώμα), και το μεγάλο κείμενο (18+ pt κανονικό, ή 14+ pt έντονο) πρέπει να έχει τουλάχιστον αναλογία αντίθεσης 3:1.

Βασικά χαρακτηριστικά

  • Υπολογισμός αναλογίας αντίθεσης σε πραγματικό χρόνο
  • Έλεγχος συμμόρφωσης WCAG AA & AAA
  • Ρυθμιστικά HSL για λεπτομερή ρύθμιση
  • Πολλαπλές μορφές προεπισκόπησης

Προηγμένα εργαλεία

  • Αυτόματη διόρθωση χρώματος
  • Δείγματα κειμένου και φόντου
  • Ανίχνευση ονόματος χρώματος
  • Εξαγωγή αποτελεσμάτων

Συχνές ερωτήσεις

Για συμμόρφωση με WCAG AA, το κανονικό κείμενο απαιτεί ελάχιστο λόγο αντίθεσης 4,5:1, ενώ το μεγάλο κείμενο (18pt ή 14pt έντονο) απαιτεί 3:1.

Το WCAG AAA απαιτεί υψηλότερους λόγους αντίθεσης: 7:1 για κανονικό κείμενο και 4,5:1 για μεγάλο κείμενο, σε σύγκριση με το 4,5:1 και 3:1 του AA αντίστοιχα.

Χρησιμοποίησε τη λειτουργία αυτόματης διόρθωσης για να προσαρμόσεις το κείμενο ή το φόντο διατηρώντας τον σχεδιαστικό σκοπό σου, ή προσάρμοσε χειροκίνητα τα χρώματα με τα ρυθμιστικά HSL, που δείχνουν τις βέλτιστες ζώνες για συμμόρφωση AA/AAA.

Οι πράσινες ζώνες και οι δείκτες AA/AAA δείχνουν τις βέλτιστες τιμές για συμμόρφωση με WCAG. Οι υποδείξεις κατεύθυνσης (πιο ανοιχτά/πιο σκούρα) σε καθοδηγούν προς καλύτερη αντίθεση με βάση τον τρέχοντα συνδυασμό χρωμάτων σου.

Ναι, μπορείς να εισαγάγεις οποιονδήποτε κωδικό HEX ή να επιλέξεις χρώματα με τον επιλογέα χρωμάτων. Το URL ενημερώνεται αυτόματα, ώστε να μπορείς να μοιραστείς συγκεκριμένους συνδυασμούς χρωμάτων.