Μετάβαση στο περιεχόμενο

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

Σύντομη απάντηση

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

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

Δωρεάν · Χωρίς εγγραφή · Τρέχει στον περιηγητή σας
4,54Αναλογία αντίθεσης

Οριακή αντίθεση — ελέγξτε για μεγάλο κείμενο.

Το γρήγορο καφέ αλεπού πηδά

Το γρήγορο καφέ αλεπού πηδά

AA · κανονικό κείμενοΕπιτυχία
AA · μεγάλο κείμενοΕπιτυχία
AAA · κανονικό κείμενοΑποτυχία
AAA · μεγάλο κείμενοΕπιτυχία

Πώς να βελτιωθείτε

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

Τι Κάνει

Υπολογίζει τον λόγο αντίθεσης WCAG μεταξύ οποιουδήποτε χρώματος προσκηνίου και φόντου που εισαγάγετε, χρησιμοποιώντας τον ίδιο τύπο σχετικής φωτεινότητας με το πρότυπο WCAG, και τον ελέγχει έναντι των ορίων AA και AAA για κανονικό και μεγάλο κείμενο (4,5:1 / 3:1 για AA, 7:1 / 4,5:1 για AAA). Δείχνει ζωντανή προεπισκόπηση κειμένου στα χρώματά σας μαζί με ένδειξη επιτυχίας/αποτυχίας για κάθε όριο.

Γιατί Έχει Σημασία

Το κείμενο χαμηλής αντίθεσης είναι η πιο συχνή αυτόματα ανιχνεύσιμη αποτυχία προσβασιμότητας σε αρχικές σελίδες στην ετήσια αναφορά Million του WebAIM, και είναι μία από τις ευκολότερες να διορθωθεί με μια αλλαγή χρώματος. Το κριτήριο επιτυχίας 1.4.3 του WCAG 2.1 ορίζει τους ελάχιστους λόγους, και το EN 301 549 — το πρότυπο πίσω από την Ευρωπαϊκή Πράξη Προσβασιμότητας — τους εφαρμόζει στο περιεχόμενο ιστού.

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

  1. Εισαγάγετε ή επιλέξτε ένα χρώμα προσκηνίου (κειμένου) και ένα χρώμα φόντου

  2. Υπολογίζουμε τον λόγο αντίθεσης σχετικής φωτεινότητας WCAG μεταξύ των δύο χρωμάτων

  3. Ελέγχουμε τον λόγο έναντι των ορίων AA και AAA για κανονικό και μεγάλο κείμενο

  4. Βλέπετε ζωντανή προεπισκόπηση του κειμένου σας στο φόντο σας, καθώς και ένδειξη επιτυχίας ή αποτυχίας για κάθε όριο

Δείγμα εισόδου + εξόδου

ΕΙΣΟΔΟΣ
foreground: #767676
background: #ffffff
ΕΞΟΔΟΣ
contrast ratio: 4.54:1

AA κανονικό κείμενο (4.5:1) PASS
AA μεγάλο κείμενο (3:1)     PASS
AAA κανονικό κείμενο (7:1)  FAIL
AAA μεγάλο κείμενο (4.5:1)  PASS

Πώς διαβάζεται το αποτέλεσμα

Λόγος αντίθεσης (4,54:1 στο δείγμα)
Πόσο πιο φωτεινό είναι το ανοιχτό χρώμα από το σκούρο, από 1:1 (το ίδιο χρώμα) έως 21:1 (μαύρο σε λευκό). Χρησιμοποιεί τον τύπο σχετικής φωτεινότητας του WCAG 2.1, οπότε το αποτέλεσμα συμφωνεί με κάθε εργαλείο που ακολουθεί το πρότυπο.
AA κανονικό κείμενο (4,5:1)
Το επίπεδο στο οποίο παραπέμπει η Ευρωπαϊκή Πράξη για την Προσβασιμότητα μέσω του EN 301 549: το κυρίως κείμενο χρειάζεται τουλάχιστον 4,5:1. Το #767676 σε λευκό περνά με 4,54:1, οπότε είναι το πιο ανοιχτό απλό γκρι που περνά σε λευκό — το #777777 ήδη αποτυγχάνει.
AA μεγάλο κείμενο (3:1)
Το μεγάλο κείμενο — τουλάχιστον 18pt (24px) ή 14pt (περίπου 18,7px) έντονο — χρειάζεται 3:1. Τα στοιχεία διεπαφής και τα γραφικά με νόημα, όπως τα περιγράμματα πεδίων και τα εικονίδια, χρειάζονται κι αυτά 3:1 απέναντι σε ό,τι τα περιβάλλει (WCAG 1.4.11).
AAA (7:1 και 4,5:1)
Το ενισχυμένο επίπεδο. Δεν το απαιτούν ούτε η EAA ούτε το EN 301 549, αλλά βοηθά άτομα με χαμηλή όραση και όποιον διαβάζει οθόνη σε δυνατό φως. Το δείγμα περνά το AAA για μεγάλο κείμενο και αποτυγχάνει για κανονικό.
Προεπισκόπηση και χρώμα του λόγου
Το κείμενό σας στα δύο χρώματά σας, σε δύο μεγέθη, ώστε να κρίνετε το ζεύγος και με το μάτι, όχι μόνο από τον αριθμό. Ο λόγος φαίνεται πράσινος από 7:1, πορτοκαλί από 4,5:1 — που περνά το AA — και κόκκινος κάτω από αυτό.

Ποιοι το Χρησιμοποιούν

  • Σχεδιαστής

    Επικυρώστε την παλέτα χρωμάτων της επωνυμίας έναντι του WCAG πριν την οριστικοποιήσετε. Πολλά «μοντέρνα» παστέλ αποτυγχάνουν στο 4,5:1 έναντι λευκού — καλύτερα να το ανακαλύψετε πριν την εφαρμόσετε σε όλη την επωνυμία.

  • Ελεγκτής προσβασιμότητας

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

  • Προγραμματιστής Frontend

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

Συχνά προβλήματα και πώς λύνονται

  1. Ανοιχτό γκρι κείμενο σε λευκό

    Τα γκρι placeholders, λεζάντες και κείμενα υποσέλιδου είναι η συνηθισμένη αποτυχία. Χρησιμοποιήστε #767676 ή πιο σκούρο σε λευκό για κανονικό κείμενο· σε χρωματιστό φόντο, αλλάξτε τη φωτεινότητα του ενός χρώματος και ελέγξτε ξανά.

    :root {
  --text: #1f2937;       /* 14.7:1 on #ffffff */
  --text-muted: #595959; /*  7.0:1 on #ffffff */
}

  2. Το χρώμα του brand είναι πολύ ανοιχτό για κείμενο

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

  3. Λευκό κείμενο σε χρωματιστό κουμπί

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

  4. Κείμενο πάνω σε εικόνες ή διαβαθμίσεις

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

  5. Σύνδεσμοι που ξεχωρίζουν από το κείμενο μόνο με το χρώμα

    Αν οι σύνδεσμοι μέσα στο κείμενο φαίνονται μόνο από το χρώμα τους, αυτό το χρώμα χρειάζεται επίσης 3:1 απέναντι στο γύρω κείμενο (τεχνική G183 του W3C), συν μια άλλη ένδειξη στο hover και στην εστίαση. Η υπογράμμιση είναι η απλούστερη λύση.

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

Ποιον λόγο WCAG χρειάζομαι;
4,5:1 για κανονικό κείμενο, 3:1 για μεγάλο κείμενο (≥18pt ή ≥14pt έντονο) και στοιχεία διεπαφής. Το WCAG 2.1 AAA απαιτεί 7:1 — έναν υψηλότερο πήχη που δεν στοχεύουν οι περισσότερες επωνυμίες.
Ελέγχει εικόνες και εικονίδια;
Μόνο αντίθεση κειμένου, και μόνο για τα δύο χρώματα που εισάγετε εδώ. Η αντίθεση εικόνων (π.χ. κείμενο πάνω σε εικόνα σε hero banners) χρειάζεται χειροκίνητο έλεγχο — δεν υπάρχει αυτόματη σάρωση σελίδας.
Ποια αντίθεση απαιτεί η EAA;
Για περιεχόμενο ιστού, το EN 301 549 v3.2.1 εφαρμόζει το WCAG 2.1 Επίπεδο AA, συμπεριλαμβανομένου του 1.4.3 — οπότε το κείμενο χρειάζεται τουλάχιστον 4,5:1 έναντι του φόντου του (3:1 για μεγάλο κείμενο). Ελέγξτε κάθε ζεύγος που χρησιμοποιεί ο ιστότοπός σας.

Πηγές

Η τεκμηρίωση στην οποία βασίζονται το εργαλείο και οι εξηγήσεις αυτής της σελίδας.

Δωρεάν εργαλεία για το θέμα

Οδηγοί για το θέμα

Ερευνητικά δεδομένα για το θέμα

Σχετικά Εργαλεία στη Συμμόρφωση EAA

Δείτε όλα τα εργαλεία Συμμόρφωση EAA