Αρχική
Δωρεάν εργαλείο

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

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

Λόγος αντίθεσης

3.25:1

Μόνο για μεγάλο κείμενο και στοιχεία UI. Για κανονικό κείμενο είναι λίγη.

Προεπισκόπηση

Μεγάλος τίτλος 24px

Έτσι θα διαβάζεται ένα κανονικό κείμενο στη σελίδα σας, σε μέγεθος 16px.

  • Κανονικό κείμενο

    Κάτω από 24px, ή κάτω από 18.66px αν είναι έντονο

    • AA · 4.5:1Δεν περνά
    • AAA · 7:1Δεν περνά

  • Μεγάλο κείμενο

    Από 24px, ή από 18.66px σε έντονα

    • AA · 3:1Περνά
    • AAA · 4.5:1Δεν περνά

  • Στοιχεία UI και γραφικά

    Πλαίσια πεδίων, εικονίδια, γραμμές γραφημάτων

    • AA · 3:1Περνά

Το πιο κοντινό χρώμα που περνά

Για AA σε κανονικό κείμενο (4.5:1), κρατώντας την ίδια απόχρωση:

#7277804.50:1
  • Τύπος WCAG 2.1
  • HEX, rgb(), hsl()
  • Τίποτα δεν φεύγει από τον browser σας

Ο λόγος δείχνεται με δύο δεκαδικά και δεν στρογγυλεύεται ποτέ προς τα πάνω σε ένα όριο: το 4.497 εμφανίζεται 4.49 και δεν περνά.

Τι είναι

Τι μετρά ο λόγος αντίθεσης

Ο λόγος αντίθεσης συγκρίνει πόσο φωτεινό είναι το κείμενο σε σχέση με το φόντο του, από 1:1 (ίδιο χρώμα) έως 21:1 (μαύρο σε λευκό). Οι οδηγίες WCAG ορίζουν ελάχιστα όρια, ώστε το κείμενο να διαβάζεται και από ανθρώπους με χαμηλή όραση, στο κινητό κάτω από τον ήλιο ή σε μια φθηνή οθόνη.

Η αντίθεση μετρά και νομικά. Ο Ευρωπαϊκός Νόμος για την Προσβασιμότητα (Οδηγία 2019/882) εφαρμόζεται από τις 28 Ιουνίου 2025 σε υπηρεσίες όπως τα e-shop, οι τράπεζες, τα εισιτήρια μεταφορών και τα e-books. Εξαιρούνται οι πολύ μικρές επιχειρήσεις υπηρεσιών, με λιγότερους από 10 εργαζόμενους και τζίρο έως 2 εκατ. ευρώ. Τα δημόσια sites καλύπτονται ήδη από την Οδηγία 2016/2102. Και στις δύο περιπτώσεις το μέτρο είναι το WCAG 2.1 επίπεδο AA.

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

  1. 1

    Βάζετε τα δύο χρώματα

    Σε HEX, rgb() ή hsl(), ή διαλέγετε από τον επιλογέα. Το κουμπί αντιστροφής αλλάζει κείμενο και φόντο.

  2. 2

    Υπολογίζουμε τη φωτεινότητα

    Με τον τύπο σχετικής φωτεινότητας του WCAG 2.1 για κάθε χρώμα, και μετά τον λόγο μεταξύ τους.

  3. 3

    Ελέγχουμε τα όρια

    4.5:1 για κανονικό κείμενο (AA), 3:1 για μεγάλο κείμενο και στοιχεία UI, 7:1 και 4.5:1 για AAA.

  4. 4

    Προτείνουμε διόρθωση

    Αν δεν περνά, βρίσκουμε το πιο κοντινό χρώμα κειμένου με την ίδια απόχρωση που περνά, και το εφαρμόζετε με ένα πάτημα.

Γιατί να το κάνετε

Γιατί να ελέγχετε την αντίθεση

  • Περισσότεροι σας διαβάζουν

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

  • Στο κινητό, έξω

    Στον ήλιο η οθόνη χάνει αντίθεση. Ένα κουμπί που φαίνεται καλά στο γραφείο μπορεί να μη φαίνεται στον δρόμο.

  • Λιγότερο νομικό ρίσκο

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

Τι ελέγχουμε

Τα τρία όρια του WCAG για τα χρώματα

Τα κριτήρια 1.4.3, 1.4.6 και 1.4.11 του WCAG 2.1, για κείμενο κάθε μεγέθους και για τα στοιχεία που χρειάζεται να δει κανείς για να χρησιμοποιήσει τη σελίδα.

  • Κανονικό κείμενο

    Το κείμενο των παραγράφων, των μενού και των φορμών.

    • AA: τουλάχιστον 4.5:1
    • AAA: τουλάχιστον 7:1
    • Κάτω από 24px ή 18.66px σε έντονα

  • Μεγάλο κείμενο

    Τίτλοι και μεγάλα κουμπιά.

    • AA: τουλάχιστον 3:1
    • AAA: τουλάχιστον 4.5:1
    • Από 24px, ή από 18.66px σε έντονα

  • Στοιχεία UI

    Ό,τι δεν είναι κείμενο αλλά πρέπει να φαίνεται.

    • AA: τουλάχιστον 3:1 με τα διπλανά χρώματα
    • Πλαίσια πεδίων και κουμπιών
    • Εικονίδια και γραμμές γραφημάτων
Συχνές ερωτήσεις

Για την αντίθεση και το WCAG

Ποια αντίθεση χρειάζομαι για να είμαι εντάξει;

Για τους περισσότερους ο στόχος είναι το WCAG 2.1 επίπεδο AA: 4.5:1 για κανονικό κείμενο, 3:1 για μεγάλο κείμενο και για στοιχεία UI όπως πλαίσια πεδίων και εικονίδια. Το AAA (7:1) είναι αυστηρότερο και καλό για κείμενα που διαβάζονται πολλή ώρα, αλλά δεν το ζητά κανένας νόμος για όλο το site.

Ισχύει για τη δική μου ιστοσελίδα ο Ευρωπαϊκός Νόμος για την Προσβασιμότητα;

Από τις 28 Ιουνίου 2025 ισχύει για συγκεκριμένες υπηρεσίες προς καταναλωτές: ηλεκτρονικό εμπόριο, τραπεζικές υπηρεσίες, ηλεκτρονικές επικοινωνίες, e-books και υπηρεσίες μεταφορών όπως τα εισιτήρια. Αν πουλάτε online, πιθανότατα σας αφορά. Οι πολύ μικρές επιχειρήσεις υπηρεσιών (κάτω από 10 άτομα και έως 2 εκατ. ευρώ τζίρο) εξαιρούνται. Ένα ενημερωτικό site ιατρείου ή γραφείου συνήθως δεν είναι μέσα στο πεδίο, αλλά η καλή αντίθεση το κάνει πιο εύχρηστο για όλους.Δωρεάν έλεγχος της ιστοσελίδας σας

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

Κατά WCAG, μεγάλο είναι το κείμενο από 18pt (περίπου 24px) σε κανονικό βάρος ή από 14pt (περίπου 18.66px) σε έντονα. Οτιδήποτε μικρότερο είναι κανονικό κείμενο και χρειάζεται 4.5:1.

Πώς βρίσκετε το χρώμα που προτείνετε;

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

Τι γίνεται με τα ημιδιαφανή χρώματα;

Αν βάλετε χρώμα με διαφάνεια, για παράδειγμα rgba() ή HEX οκτώ ψηφίων, υπολογίζουμε το χρώμα που πραγματικά φαίνεται πάνω στο φόντο, όπως το βλέπει ο αναγνώστης. Ένα ημιδιαφανές φόντο το υπολογίζουμε πάνω σε λευκό.

Η αντίθεση είναι ένα από τα πολλά που ελέγχουμε

Φτιάχνουμε ιστοσελίδες που διαβάζονται άνετα σε κάθε οθόνη και ακολουθούν το WCAG 2.1 AA από την αρχή, όχι ως διόρθωση της τελευταίας στιγμής.

Μιλήστε μαζί μας