Έλεγχος αντίθεσης χρωμάτων

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

Αναλογία αντίθεσης
Κανονικό κείμενοAA4.5:1
Κανονικό κείμενοAAA7:1
Μεγάλο κείμενοAA3:1
Μεγάλο κείμενοAAA4.5:1
Στοιχεία διεπαφής & γραφικά3:1
Εισαγάγετε ένα χρώμα κειμένου και φόντου για έλεγχο.

Κάθε έλεγχος εκτελείται στον περιηγητή σας. Τίποτα από όσα εισάγετε δεν μεταφορτώνεται στο BroBroGo.

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

Τι σημαίνουν τα αποτελέσματα AA και AAA;

Το επίπεδο AA είναι ο στόχος για τους περισσότερους ιστότοπους: απαιτεί αναλογία τουλάχιστον 4.5:1 για κανονικό κείμενο και 3:1 για μεγάλο κείμενο. Το επίπεδο AAA είναι πιο αυστηρό — απαιτεί 7:1 για κανονικό κείμενο και 4.5:1 για μεγάλο κείμενο. Η αναλογία κυμαίνεται από 1:1 (καμία αντίθεση) έως 21:1 (μαύρο σε λευκό).

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

Κείμενο από 18pt (περίπου 24px) και πάνω, ή 14pt (περίπου 18.5px) όταν είναι έντονο (bold). Το μεγαλύτερο κείμενο παραμένει ευανάγνωστο με χαμηλότερη αντίθεση, επομένως περνάει το επίπεδο AA με αναλογία 3:1 και το AAA με 4.5:1, αντί για τα αυστηρότερα όρια του κανονικού κειμένου.

Ποιες μορφές χρωμάτων μπορώ να εισαγάγω;

Μπορείτε να πληκτρολογήσετε μια τιμή hex όπως #1a1a1a, μια τιμή rgb() όπως rgb(26, 26, 26), ή μια τιμή hsl() — ή να κάνετε κλικ σε οποιοδήποτε δείγμα για να επιλέξετε χρώμα. Χρησιμοποιήστε το κουμπί εναλλαγής για να αντιστρέψετε τα χρώματα κειμένου και φόντου.

Χρησιμοποιείται το WCAG 2 ή η νεότερη μέθοδος APCA;

Χρησιμοποιεί τον τύπο WCAG 2.1 / 2.2, στον οποίο βασίζονται οι τρέχοντες κανόνες και έλεγχοι προσβασιμότητας. Το APCA είναι μια νεότερη μέθοδος που βασίζεται περισσότερο στην ανθρώπινη αντίληψη και βρίσκεται υπό διαμόρφωση για το WCAG 3 — είναι πολλά υποσχόμενη, αλλά δεν αποτελεί ακόμα επίσημο πρότυπο συμμόρφωσης, επομένως τα αποτελέσματα επιτυχίας εδώ δεν τη χρησιμοποιούν.

Κατανόηση των προτύπων προσβασιμότητας WCAG 2.1 / 2.2

Η διασφάλιση της επαρκούς αντίθεσης των χρωμάτων αποτελεί θεμελιώδη απαίτηση για την προσβασιμότητα του ψηφιακού περιεχομένου. Το εργαλείο αυτό επιτρέπει την εισαγωγή ενός χρώματος κειμένου και ενός χρώματος φόντου με σκοπό τον υπολογισμό της αναλογίας αντίθεσης σύμφωνα με τα διεθνή πρότυπα WCAG 2.1 / 2.2. Με βάση αυτά τα πρότυπα, αξιολογείται ποια επίπεδα προσβασιμότητας (AA και AAA) ικανοποιούνται για κανονικό κείμενο, μεγάλο κείμενο, καθώς και για στοιχεία διεπαφής χρήστη (UI) και γραφικά.

Η αναλογία αντίθεσης κυμαίνεται από 1:1, που αντιπροσωπεύει την πλήρη απουσία αντίθεσης (ίδιο χρώμα κειμένου και φόντου), έως 21:1, που αποτελεί τη μέγιστη δυνατή αντίθεση (μαύρο κείμενο σε λευκό φόντο). Η αρχική ρύθμιση του εργαλείου χρησιμοποιεί το χρώμα #4f46e5 για το κείμενο και το #ffffff για το φόντο, αποδίδοντας αναλογία αντίθεσης 6.29:1.

Οι απαιτήσεις για τα επίπεδα προσβασιμότητας AA και AAA

Τα πρότυπα WCAG διαχωρίζουν τις απαιτήσεις αντίθεσης σε δύο επίπεδα συμμόρφωσης, το AA και το αυστηρότερο AAA, ανάλογα με τον τύπο και το μέγεθος του στοιχείου:

  • Κανονικό κείμενο: Για την επίτευξη του επιπέδου AA απαιτείται αναλογία αντίθεσης τουλάχιστον 4.5:1. Για το επίπεδο AAA, η ελάχιστη απαιτούμενη αναλογία αυξάνεται στο 7:1.
  • Μεγάλο κείμενο: Λόγω της αυξημένης αναγνωσιμότητας που προσφέρει το μεγαλύτερο μέγεθος, οι απαιτήσεις είναι χαμηλότερες. Το επίπεδο AA επιτυγχάνεται με αναλογία τουλάχιστον 3:1, ενώ το επίπεδο AAA απαιτεί αναλογία τουλάχιστον 4.5:1.
  • Στοιχεία διεπαφής & γραφικά: Για τα διαδραστικά στοιχεία και τα γραφικά components ισχύει ένα ενιαίο όριο. Απαιτείται αναλογία τουλάχιστον 3:1, χωρίς να υφίσταται διαχωρισμός μεταξύ των επιπέδων AA και AAA για αυτή την κατηγορία.

Ορισμός κανονικού και μεγάλου κειμένου

Στο πλαίσιο της προσβασιμότητας, ο διαχωρισμός μεταξύ κανονικού και μεγάλου κειμένου βασίζεται σε συγκεκριμένα μεγέθη και βάρη γραμματοσειράς:

  • Μεγάλο κείμενο: Ορίζεται το κείμενο με μέγεθος από 18pt (περίπου 24px) και άνω. Εναλλακτικά, αν η γραμματοσειρά είναι έντονη (bold), ως μεγάλο κείμενο ορίζεται αυτό που έχει μέγεθος από 14pt (περίπου 18.5px) και άνω.
  • Κανονικό κείμενο: Οποιοδήποτε κείμενο υπολείπεται των παραπάνω ορίων μεγέθους και βάρους θεωρείται κανονικό κείμενο και υπόκειται στους αυστηρότερους ελέγχους αντίθεσης.

Μορφές εισαγωγής δεδομένων και διαχείριση σφαλμάτων

Το εργαλείο υποστηρίζει τρεις δημοφιλείς μορφές προσδιορισμού χρωμάτων για το χρώμα κειμένου και το χρώμα φόντου:

  1. Hex values: Δεκαεξαδικές τιμές, όπως για παράδειγμα #1a1a1a.
  2. rgb() values: Τιμές RGB, όπως για παράδειγμα rgb(26, 26, 26).
  3. hsl() values: Τιμές HSL.

Σε περίπτωση που εισαχθεί μη έγκυρη τιμή, το εργαλείο εμφανίζει αντίστοιχα μηνύματα σφάλματος. Αν το χρώμα κειμένου δεν είναι έγκυρο, εμφανίζεται το μήνυμα: "Εισαγάγετε ένα έγκυρο χρώμα κειμένου, όπως #1a1a1a or rgb(26, 26, 26).". Αν το χρώμα φόντου δεν είναι έγκυρο, εμφανίζεται το μήνυμα: "Εισαγάγετε ένα έγκυρο χρώμα φόντου, όπως #ffffff ή rgb(255, 255, 255).".

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

Επεξήγηση των αποτελεσμάτων και της τελικής ετυμηγορίας

Για κάθε έλεγχο, το εργαλείο εμφανίζει την αναλογία αντίθεσης στη μορφή "X:1" και την ένδειξη "Επιτυχία" ή "Αποτυχία" για κάθε κατηγορία. Η τελική αξιολόγηση συνοψίζεται σε μία από τις ακόλουθες ετυμηγορίες:

  • Ικανοποιεί τα επίπεδα AA και AAA για κανονικό κείμενο.
  • Ικανοποιεί το επίπεδο AA για κανονικό κείμενο.
  • Ικανοποιεί το επίπεδο AA μόνο για μεγάλο κείμενο.
  • Κάτω από το ελάχιστο όριο AA — αυξήστε την αντίθεση.

Προστασία προσωπικών δεδομένων και τοπική επεξεργασία

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