Η Αντίθεση Γραμματοσειράς με το Φόντο: Πλήρης Οδηγός με Δεδομένα WCAG, Πίνακες & Παραδείγματα

Αν διάλεξες μια ωραία γραμματοσειρά, ένα harmonious χρωματικό palette και μια καθαρή hierarchy, αλλά το site σου εξακολουθεί να «δυσκολεύει» στην ανάγνωση — το πρόβλημα δεν είναι το design. Είναι η αντίθεση κειμένου / φόντου.

Η σωστή αντίθεση είναι η πιο underrated παράμετρος του typography. Καθορίζει αν το περιεχόμενο διαβάζεται από:

• χρήστες με οπτικά προβλήματα (περίπου 2.2 δισ. άνθρωποι παγκοσμίως),
• ηλικιωμένους με μειωμένη ευαισθησία αντίθεσης,
• οποιονδήποτε διαβάζει στον ήλιο, σε φθηνή οθόνη ή σε κινητό με χαμηλή φωτεινότητα.

Και — σημαντικό για επιχειρήσεις — επηρεάζει SEO, conversion rate και τη συμμόρφωση με τη νομοθεσία (EU Accessibility Act, ισχύει από Ιούνιο 2025).

Αυτός ο οδηγός εξηγεί τα μεγέθη, τα πρότυπα και τους πρακτικούς συνδυασμούς που χρησιμοποιούμε στο studio — με όλες τις πηγές documented.

Τι είναι ο contrast ratio και πώς υπολογίζεται

Ο λόγος αντίθεσης είναι ένας αριθμός από 1:1 (κανένα contrast — αόρατο κείμενο) έως 21:1 (μέγιστο — μαύρο σε λευκό). Υπολογίζεται από τη φωτεινότητα (relative luminance) των δύο χρωμάτων:

contrast ratio = (L₁ + 0.05) / (L₂ + 0.05)

όπου L₁ = η φωτεινότητα του πιο φωτεινού χρώματος, L₂ = του πιο σκοτεινού.

Η φωτεινότητα κάθε χρώματος βγαίνει από τα RGB channels του με gamma correction. Ο πλήρης τύπος ορίζεται στις WCAG 2.1 Definitions.

Η καλή είδηση: δεν χρειάζεται να το υπολογίσεις. Όλα τα design tools (Figma, Sketch) και τα εργαλεία στο τέλος του άρθρου το κάνουν αυτόματα.

Τα πρότυπα WCAG — τι πραγματικά χρειάζεσαι

Ο πρακτικός κανόνας είναι WCAG 2.1 / 2.2 — Επίπεδο AA. Αυτό απαιτεί ο ευρωπαϊκός νόμος και αυτό ζητάνε οι περισσότεροι πελάτες.

Πηγές: WCAG 1.4.3 Contrast (Minimum), WCAG 1.4.6 Contrast (Enhanced), WCAG 1.4.11 Non-text Contrast.

Τι σημαίνει «μεγάλο κείμενο»

Στο WCAG, «large text» είναι κάθε κείμενο ≥ 24px ή ≥ 18.66px σε bold (700+). Σε rem μονάδες αυτό είναι 1.5rem και 1.166rem αντίστοιχα. Όλα τα μικρότερα μπαίνουν στην αυστηρή απαίτηση 4.5:1.

Πίνακας: συνδυασμοί που δουλεύουν

Παρακάτω τιμές που έχουμε ελεγμένες με το WebAIM contrast checker. Όλες είναι AA-pass για normal text. Οι bold τιμές περνάνε και AAA.

Παρατήρησε ότι το #9CA3AF σε λευκό — μια συχνή επιλογή για «secondary text» σε design systems — αποτυγχάνει ακόμα και AA. Είναι η πιο κοινή accessibility παραβίαση που βλέπουμε σε productive sites.

Συχνά λάθη που θα δεις σε δεκάδες sites

1. Light grey σε λευκό για «secondary text»

Το pattern «κύριο κείμενο μαύρο, secondary γκρι» είναι ωραίο visually — αλλά τα #999, #aaa, #bbb σε λευκό όλα πέφτουν κάτω από 3:1. Δεν περνάνε καν AA Large.

Λύση: χρησιμοποίησε #4A5366 ή σκουρότερο (≥ 4.5:1) για όλο το body copy. Το «secondary» χτίσε το με typography (font-size, weight, letter-spacing), όχι με fade.

2. Coloured text πάνω σε coloured background

Brand blue σε brand blue-bg είναι το κλασικό fail. Αν δείς ratio 2:1 ή 3:1, σήμαινε ότι το κείμενο φαίνεται «pretty» στο Figma — αλλά γίνεται unreadable στον ήλιο, σε χαμηλή φωτεινότητα, ή σε e-ink display.

Λύση: μην βάζεις brand colour σε brand-tinted background. Πάρε ένα accent-text variant (πιο σκούρο ή πιο φωτεινό) για ένα τέτοιο pairing.

3. Placeholder text στις φόρμες

Τα browsers default placeholders (#A0A0A0 σε λευκό = 2.5:1) αποτυγχάνουν AA. Πολλά design systems τα διατηρούν.

Λύση: override με δικό σου στυλ: ::placeholder { color: #6B7280; } (4.7:1).

4. Hover states που εξαφανίζονται

Buttons που από #0B5ED7 πάνε σε #A4C8FF στο hover — χάνουν αντίθεση. Το #A4C8FF σε λευκό κειμενο δίνει 1.9:1.

Λύση: στο hover, πήγαινε σκουρότερα ή κράτα την αντίθεση τουλάχιστον 3:1 αν το κείμενο μένει το ίδιο.

5. Disabled states «πολύ disabled»

WCAG εξαιρεί τα disabled controls από το contrast requirement — αλλά αν είναι αόρατα, ο χρήστης δεν καταλαβαίνει ότι υπάρχουν.

Λύση: στόχευσε 2.5:1 – 3:1 για disabled states. Αόρατο ≠ disabled.

Links: το συχνότερο πρόβλημα του web

Τα WCAG έχουν έναν επιπλέον κανόνα μόνο για τα links μέσα σε παραγράφους: 1.4.1 Use of Color.

Αν διακρίνεις τα links μόνο με χρώμα (όχι underline), τότε:

1. Το link χρειάζεται 3:1 αντίθεση με το γύρω κείμενο, και
2. Το link χρειάζεται 4.5:1 αντίθεση με το background, και
3. Πρέπει να εμφανίζει κάποιο visual change στο hover/focus.

Πρακτικά, αυτό σημαίνει ότι ένα #0B5ED7 link μέσα σε #0B1320 κείμενο πάνω σε λευκό αποτυγχάνει τον κανόνα 1 (μόνο 1.7:1 διαφορά μεταξύ link και body text).

Λύση: κράτα το underline always-on για inline links. Λύνεται και η αντίθεση και η σαφήνεια. Αν επιμένεις να βγάλεις το underline, διάλεξε link colour πολύ πιο σκούρο ή πολύ πιο φωτεινό από το body.

Buttons και UI components

Dark mode — τα ίδια κανόνες, αντίστροφες προκλήσεις

Στο dark mode το κύριο λάθος είναι το αντίθετο: καθαρό λευκό κείμενο σε μαύρο φόντο (21:1) δημιουργεί halation effect — το κείμενο «λαμπυρίζει». Το μάτι κουράζεται πιο γρήγορα από όσο σε καλό light mode.

Λύση:

• Φόντο: όχι #000000. Δοκίμασε #0A0F1A ή #0B1320.
• Κείμενο: όχι #FFFFFF. Δοκίμασε #E2E8F0 ή #F1F5F9.
• Αυτό ακόμα δίνει ~14:1 — άνετα AAA — αλλά είναι πιο μαλακό στα μάτια.

Είναι ο λόγος που το dark mode σε iOS, GitHub και VS Code δεν είναι ποτέ pure black/white.

APCA: η επόμενη γενιά (και γιατί δεν έχει υιοθετηθεί ακόμα)

Ο τρέχων WCAG τύπος έχει γνωστές αδυναμίες — π.χ. τιμωρεί υπερβολικά τα σκούρα κείμενα σε σκούρα backgrounds και είναι too lenient στα πολύ φωτεινά. Η APCA (Advanced Perceptual Contrast Algorithm) είναι μια νέα μέθοδος που προτείνεται για το WCAG 3 και προσαρμόζεται καλύτερα στην ανθρώπινη όραση.

Πρακτικά για το 2026:

• Επίσημο πρότυπο είναι ακόμα WCAG 2.1 / 2.2 (AA) — αυτό ζητάει ο νόμος.
• Η APCA χρησιμοποιείται ως έξτρα έλεγχος, ειδικά για design systems σε large products.
• Αν είσαι σε φάση R&D ή χτίζεις custom CMS, αξίζει να το γνωρίζεις. Αλλά μην το θέτεις ως compliance target ακόμα.

Εργαλεία που χρησιμοποιούμε

Όλα δωρεάν, browser-based ή plugins:

• WebAIM Contrast Checker — το standard. Δίνει AA / AAA verdict άμεσα.
• Contrast Ratio (Lea Verou) — minimalist, υποστηρίζει alpha channels.
• TPGi Colour Contrast Analyser — desktop app με eyedropper. Καλό για να ελέγξεις screenshots από competitors.
• Chrome DevTools — Inspect element → Computed → contrast ratio εμφανίζεται δίπλα στο color. Δείχνει επίσης suggested colours για να φτάσεις AA.
• axe DevTools — browser extension που σκανάρει όλη τη σελίδα και βρίσκει contrast failures.
• Figma «Contrast» plugin — ελέγχει live στο design tool, πριν φτάσεις στο dev.

Πρακτικό checklist για κάθε σελίδα

Πριν δημοσιεύσεις, πέρνα από αυτά:

1. ☐ Body copy: ratio ≥ 4.5:1 με το background (όχι «secondary» exception).
2. ☐ Όλα τα headings: ≥ 3:1 (συνήθως περνάει εύκολα — είναι large).
3. ☐ Links: distinguishable από το γύρω κείμενο και ικανό contrast με background. Underline always αν δεν είσαι σίγουρος.
4. ☐ Button text + button background: ≥ 4.5:1.
5. ☐ Button border / outline: ≥ 3:1 με γύρω background.
6. ☐ Form labels & placeholders: ≥ 4.5:1.
7. ☐ Focus rings: ≥ 3:1 με background (WCAG 2.2).
8. ☐ Icons που μεταφέρουν info: ≥ 3:1.
9. ☐ Hover/active states: κράτα contrast και κάνε visible diff.
10. ☐ Dark mode (αν υπάρχει): off-white σε off-black, όχι 100% pure.

Συμπέρασμα

Το contrast δεν είναι «accessibility tax» — είναι το πιο cost-effective UX upgrade που μπορείς να κάνεις. Καμία optimization, design tweak ή copy rewrite δεν έχει τόσο μεγάλο impact στο conversion όσο το να μην δυσκολεύεται ο χρήστης να διαβάσει τι του δείχνεις.

Και επειδή είναι μετρήσιμο (τα ratios είναι αριθμοί, όχι gut feeling), δεν υπάρχει «μου φαίνεται καλό» επιχείρημα. Είτε περνάει το 4.5:1 είτε όχι.

Στα έργα που τρέχουμε στο studio, κάθε σελίδα περνάει από axe DevTools πριν το launch. Αν χτίζεις eshop, corporate site ή AI dashboard και θες κανένα έλεγχο, πες μας.

Πηγές & περαιτέρω ανάγνωση

• WCAG 2.2 — Επίσημο πρότυπο (W3C)
• 1.4.3 Contrast (Minimum) — Understanding
• 1.4.6 Contrast (Enhanced) — Understanding
• 1.4.11 Non-text Contrast — Understanding
• The A11y Project — What is colour contrast?
• APCA — Advanced Perceptual Contrast Algorithm
• European Accessibility Act — επιβλήθηκε Ιούνιο 2025