Χρησιμοποιώντας Αντίθετα χρώματα προσκηνίου και φόντου στο Web Design

Βελτιώστε την αναγνωσιμότητα του δικτυακού σας τόπου και την εμπειρία του χρήστη με επαρκή αντίθεση

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

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

Οι ιστότοποι που είναι πολύ χαμηλοί σε αντίθεση μπορεί να είναι δύσκολο να διαβαστούν και να χρησιμοποιηθούν, γεγονός που θα έχει αρνητικό αντίκτυπο στην επιτυχία κάθε τοποθεσίας. Τα προβλήματα κακής αντίληψης χρώματος είναι συχνά εύκολα αναγνωρίσιμα. Μπορείτε να το κάνετε συνήθως μόνο αν αναζητήσετε μια σελίδα που αποδίδεται σε ένα web browser και μπορείτε να δείτε αν το κείμενο είναι πολύ δύσκολο να διαβαστεί εξαιτίας κακών επιλογών χρώματος. Ακόμα, ενώ μπορεί να είναι εύκολο να προσδιορίσετε ποια χρώματα δεν λειτουργούν καλά μαζί, μπορεί πραγματικά να είναι πολύ δύσκολο να αποφασίσετε ποια χρώματα λειτουργούν καλά σε αντίθεση με άλλα. Μπορεί να μην είναι αυτό που δεν λειτουργεί, αλλά πώς θα καθορίσετε τι λειτουργεί; Η εικόνα σε αυτό το άρθρο θα σας βοηθήσει να σας δείξουμε μια ποικιλία διαφορετικών χρωμάτων και τον τρόπο με τον οποίο αντιτίθενται ως τα χρώματα του προσκηνίου και του φόντου. Μπορείτε να δείτε μερικά "καλά" ζευγάρια και κάποια "κακή" αντιστοίχιση, που θα σας βοηθήσουν να κάνετε τις σωστές επιλογές χρωμάτων στα έργα σας.

Σχετικά με την αντίθεση

Ένα πράγμα που πρέπει να σημειώσετε είναι ότι η αντίθεση είναι κάτι περισσότερο από το πόσο φωτεινό είναι ένα χρώμα σε σχέση με το φόντο. Όπως θα πρέπει να δείτε στην προαναφερθείσα εικόνα, μερικά από αυτά τα χρώματα είναι πολύ φωτεινά και εμφανίζονται ζωντανά στο χρώμα του φόντου - όπως το μπλε στο μαύρο, αλλά εξακολουθώ να τα χαρακτηρίζω ως έχοντα κακή αντίθεση. Το έκανα αυτό γιατί, ενώ μπορεί να είναι φωτεινό, ο συνδυασμός χρωμάτων καθιστά το κείμενο δύσκολο να διαβάσει. Αν δημιουργούσατε μια σελίδα σε όλα τα μπλε κείμενα σε μαύρο φόντο, οι αναγνώστες σας θα είχαν πολύ γρήγορη κίνηση στα μάτια. Αυτός είναι ο λόγος για τον οποίο η αντίθεση δεν είναι μόνο μαύρο και άσπρο (ναι, η λεκάνη προοριζόταν). Υπάρχουν κανόνες και βέλτιστες πρακτικές για την αντίθεση, αλλά ως σχεδιαστής θα πρέπει πάντα να αξιολογείτε αυτούς τους κανόνες για να βεβαιωθείτε ότι δουλεύουν σε συγκεκριμένη περίπτωση.

Επιλέγοντας Χρώματα

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

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

Ηλεκτρονικά εργαλεία

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

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

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