Το χρώμα δεν είναι διακόσμηση. Είναι επικοινωνία.
Κάθε φορά που σχεδιάζουμε ένα site, διαλέγουμε χρώματα με βάση αυτό που βλέπουμε εμείς: στη δική μας οθόνη, στον δικό μας φωτισμό, με τα δικά μας μάτια. Το πρόβλημα είναι ότι δεν βλέπουν όλοι τα χρώματα το ίδιο.
Δυσχρωματοψία, χαμηλή όραση, καταρράκτης, ακόμη και ένα κινητό σε έντονο ήλιο: όλα αλλάζουν το πώς φτάνει η παλέτα σου στον επισκέπτη. Όταν η μόνη πληροφορία είναι το χρώμα, κάποιοι απλά δεν την παίρνουν.
Περίπου 1 στους 20 επισκέπτες δεν θα δει την παλέτα σου όπως τη σχεδίασες. Δοκίμασε τα παρακάτω κουμπιά για να δεις μια τυπική διεπαφή όπως τη βλέπουν εκείνοι, και μετά δοκίμασε το εργαλείο ελέγχου αντίθεσης για τα δικά σου χρώματα.
Γιατί έχει σημασία για την επιχείρησή σου
Δεν είναι μόνο θέμα ηθικής. Έχει άμεση σχέση με πωλήσεις, ρίσκο και την εικόνα του brand σου.
Χαμένες μετατροπές
Ένα κουμπί με χαμηλή αντίθεση ή ένα μήνυμα σφάλματος που φαίνεται μόνο με κόκκινο χρώμα δεν είναι απλώς άσχημο, είναι ένα στοιχείο που κάποιοι επισκέπτες απλά δεν βλέπουν. Κάθε δυσανάγνωστο κουμπί είναι μια πιθανή πώληση που χάνεται σιωπηλά.
Κανονιστικός κίνδυνος
Στην Ευρωπαϊκή Ένωση, ο Ευρωπαϊκός Νόμος για την Προσβασιμότητα απαιτεί από πολλές κατηγορίες ιστότοπων και e-shops συμμόρφωση με το WCAG από τον Ιούνιο του 2025. Η προσβασιμότητα γίνεται σταδιακά κανονιστική υποχρέωση, όχι απλώς καλή πρακτική.
Εμπιστοσύνη & εικόνα
Ένα site που διαβάζεται εύκολα από όλους στέλνει ξεκάθαρο μήνυμα επαγγελματισμού. Η προσβασιμότητα δεν είναι κόστος, είναι μέρος της ποιότητας του προϊόντος σου, όπως η ταχύτητα φόρτωσης ή το responsive design.
Δες το μέσα από διαφορετικά μάτια
Πρόκειται για απλοποιημένες προσομοιώσεις του πώς γίνονται αντιληπτά το χρώμα και η ευκρίνεια σε διαφορετικές οπτικές συνθήκες. Διάλεξε μία και σύγκρινε τις δύο εικονικές διεπαφές παρακάτω.
Συνήθεις μύθοι
Λίγες παρανοήσεις που ακούμε συχνά, και τι ισχύει στην πραγματικότητα.
Οι δυσχρωματοψικοί βλέπουν τον κόσμο σε ασπρόμαυρο.
Η πλήρης αχρωματοψία είναι εξαιρετικά σπάνια. Οι περισσότεροι δυσχρωματοψικοί βλέπουν χρώματα κανονικά, απλώς δυσκολεύονται να ξεχωρίσουν συγκεκριμένα ζευγάρια αποχρώσεων, συνήθως κόκκινο και πράσινο.
Αν χρησιμοποιώ ωραία, μοντέρνα χρώματα, το site μου είναι εντάξει.
Η αισθητική και η αντίθεση είναι διαφορετικά πράγματα. Πολλές δημοφιλείς παλέτες, όπως ανοιχτό γκρι σε λευκό, αποτυγχάνουν στο WCAG παρότι φαίνονται καθαρές και σύγχρονες.
Η προσβασιμότητα αφορά μόνο τυφλούς χρήστες.
Η δυσχρωματοψία, η χαμηλή όραση, ο καταρράκτης, ακόμη και μια προσωρινή δυσκολία όπως η οθόνη σε έντονο φως, επηρεάζουν πολύ περισσότερους ανθρώπους από όσο νομίζουμε.
Αν προσθέσω περισσότερη αντίθεση, το design θα γίνει βαρετό.
Αντίθεση δεν σημαίνει μόνο μαύρο σε λευκό. Πετυχαίνεις υψηλή αντίθεση και με χρωματιστές παλέτες, αρκεί οι αποχρώσεις να έχουν αρκετή διαφορά φωτεινότητας μεταξύ τους.
Δοκίμασε τη δική σου παλέτα
Διάλεξε ένα χρώμα κειμένου και φόντου και δες σε πραγματικό χρόνο τον λόγο αντίθεσης κατά WCAG 2.1: τα πραγματικά μαθηματικά, όχι μια εικασία.
Δείγμα επικεφαλίδας
Δείγμα κειμένου σώματος στα 15px, το μέγεθος που χρησιμοποιούν οι περισσότερες παράγραφοι.
Τι σημαίνουν τα «AA» / «AAA» και «Κανονικό» / «Μεγάλο»;
Το ελάχιστο επίπεδο συμμόρφωσης που ορίζει το WCAG 2.1. Είναι το πρότυπο που ζητούν οι περισσότερες νομοθεσίες και οδηγίες προσβασιμότητας.
Ενισχυμένο επίπεδο συμμόρφωσης με αυστηρότερα όρια αντίθεσης. Δεν είναι υποχρεωτικό παντού, αλλά είναι πιο ασφαλής επιλογή.
Κείμενο μικρότερο από 24px (ή 18,66px αν είναι έντονο). Οι λεπτές γραμμές των γραμμάτων χρειάζονται μεγαλύτερη αντίθεση για να παραμείνουν ευανάγνωστες, γι’ αυτό το όριο είναι 4,5:1 (AA) ή 7:1 (AAA).
Κείμενο από 24px και πάνω (ή 18,66px αν είναι έντονο, π.χ. τίτλοι). Επειδή είναι εξ ορισμού πιο ευανάγνωστο, περνάει τον έλεγχο με χαμηλότερη αντίθεση: 3:1 (AA) ή 4,5:1 (AAA).
Με απλά λόγια: ο αριθμός των A δηλώνει πόσο αυστηρό είναι το κριτήριο, ενώ «Κανονικό» / «Μεγάλο» δηλώνει το μέγεθος της γραμματοσειράς που ελέγχεται. Μεγαλύτερο κείμενο περνάει με χαμηλότερη αντίθεση, μικρότερο κείμενο χρειάζεται περισσότερη.
Έτοιμες παλέτες που περνούν τον έλεγχο
Αν θες κάτι έτοιμο για να ξεκινήσεις, αυτοί οι συνδυασμοί κειμένου και φόντου περνάνε άνετα το WCAG AA, και οι περισσότεροι το AAA.
#FFFFFF σε #5963C8
5,19:1 · AA#111111 σε #FFFFFF
18,88:1 · AAA#14532D σε #ECFDF3
8,64:1 · AAA#7F1D1D σε #FEF2F2
9,16:1 · AAAΠρακτικός οδηγός: τι να κάνεις
Μια σύντομη λίστα για να ξεκινήσεις να χτίζεις πιο προσβάσιμες παλέτες από σήμερα.
- Στόχευσε τουλάχιστον 4,5:1 αντίθεση για κανονικό κείμενο, 3:1 για μεγάλο κείμενο και τίτλους.
- Μην στηρίζεσαι ποτέ μόνο στο χρώμα: πρόσθεσε εικονίδιο, ετικέτα ή σχήμα σε ό,τι δηλώνει κατάσταση.
- Έλεγξε την παλέτα σου με ένα εργαλείο σαν αυτό πριν την οριστικοποιήσεις, όχι μετά.
- Απόφυγε τον συνδυασμό κόκκινο-πράσινο ως μοναδική διαφοροποίηση σε γραφήματα και κουμπιά.
- Δοκίμασε το site σου σε πραγματικές συνθήκες: κινητό στον ήλιο, χαμηλή φωτεινότητα, μεγέθυνση κειμένου.
- Δώσε προτεραιότητα στην αντίθεση για κείμενο, κουμπιά και εικονίδια, όχι μόνο για διακοσμητικά στοιχεία.
- Μην τη θεωρείς βήμα τελευταίας στιγμής: είναι πιο εύκολο και φθηνότερο να τη σχεδιάσεις εξαρχής.