HEX, RGB, HSL, CMYK και έλεγχος αντίθεσης κειμένου

Ο κωδικός χρώματος είναι ένα χρώμα γραμμένο με άλλον συμβολισμό. Τα HEX, RGB και HSL περιγράφουν το ίδιο φως στην οθόνη, οπότε μετατρέπονται μεταξύ τους με ακρίβεια, εκτός από στρογγυλοποιήσεις. Το CMYK περιγράφει μελάνι στο χαρτί, γι' αυτό η μετατροπή του από τιμές οθόνης είναι μόνο εκτίμηση. Ο λόγος αντίθεσης WCAG είναι ξεχωριστός αριθμός που συγκρίνει πόσο ανοιχτά είναι δύο χρώματα και αποφασίζει αν το κείμενο διαβάζεται. Επικολλήστε ένα χρώμα στον Μετατροπέα χρωμάτων για να δείτε όλες τις μορφές μαζί.

Μετατροπέας χρωμάτωνΧρειάζομαι χρώμα σε άλλη μορφήΚάντε το δωρεάν

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

Το HEX και το RGB είναι ίδιοι αριθμοί

Ένας κωδικός HEX είναι τρία ζεύγη δεκαεξαδικών ψηφίων. Το #34D6A0 περιέχει μια τιμή κόκκινου, πράσινου και μπλε. Κάθε ζεύγος είναι αριθμός από 00 έως FF, δηλαδή από 0 έως 255 στο δεκαδικό σύστημα. Άρα το 34 είναι 52, το D6 είναι 214 και το A0 είναι 160, και η μορφή RGB είναι rgb(52, 214, 160).

Η γραφή του αριθμού στο δεκαεξαδικό σύστημα αλλάζει μόνο την εμφάνισή του. Η συντομευμένη μορφή #abc σημαίνει #aabbcc, με κάθε ψηφίο διπλασιασμένο. Ο κωδικός με οκτώ ψηφία προσθέτει στο τέλος ένα ζεύγος άλφα, από 00 για πλήρη διαφάνεια έως FF για πλήρη αδιαφάνεια, οπότε το #34D6A080 είναι περίπου μισο-διαφανές. Το RGBA γράφει την ίδια άλφα ως αριθμό από 0 έως 1.

Η CSS δέχεται και ονόματα χρωμάτων. Το rebeccapurple είναι το #663399. Ο μετατροπέας διαβάζει τα ονόματα μέσω του ίδιου του browser, οπότε θα λειτουργεί κάθε όνομα που γνωρίζει ο browser.

Το HSL περιγράφει ένα χρώμα όπως το περιγράφουν οι άνθρωποι

Το HSL σημαίνει χροιά (hue), κορεσμός (saturation) και φωτεινότητα (lightness). Η χροιά είναι μια γωνία πάνω σε τροχό χρωμάτων: το κόκκινο είναι 0 μοίρες, το πράσινο 120 και το μπλε 240. Ο κορεσμός δείχνει πόσο απέχει το χρώμα από το γκρι, ενώ η φωτεινότητα δείχνει πόσο απέχει από το μαύρο ή το λευκό.

Το ίδιο #34D6A0 είναι hsl(160, 66%, 52%). Η χροιά του βρίσκεται ανάμεσα στο πράσινο και το μπλε, ο κορεσμός του είναι υψηλός και η φωτεινότητά του είναι λίγο πάνω από το μέσο. Το HSL είναι η πιο εύκολη μορφή για χειροκίνητη επεξεργασία, επειδή μπορείτε να κρατήσετε τη χροιά και να αλλάξετε μόνο τη φωτεινότητα για να πάρετε πιο ανοιχτή ή πιο σκούρα απόχρωση.

Το HSV μοιάζει με το HSL, αλλά χρησιμοποιεί την τιμή (value), δηλαδή τη φωτεινότητα του ισχυρότερου καναλιού, αντί για τη φωτεινότητα. Κάποιοι επιλογείς χρωμάτων το χρησιμοποιούν, οπότε μπορεί να το συναντήσετε σε άλλα εργαλεία. Ο μετατροπέας το εμφανίζει δίπλα στο HSL ώστε να συγκρίνετε τα δύο.

Το CMYK είναι για μελάνι, επομένως είναι εκτίμηση

Οι οθόνες προσθέτουν φως: κόκκινο, πράσινο και μπλε μαζί δίνουν λευκό. Οι εκτυπωτές αφαιρούν φως με μελάνι: κυανό, ματζέντα, κίτρινο και μαύρο πάνω σε λευκό χαρτί. Τα δύο συστήματα δεν μπορούν να ταιριάξουν ακριβώς, οπότε μια τιμή CMYK είναι πάντα μετάφραση.

Ο μετατροπέας χρησιμοποιεί τον απλό τύπο. Το μαύρο είναι το K, ένα μείον το μεγαλύτερο από τα κόκκινο, πράσινο και μπλε σε κλίμακα 0 έως 1. Το κυανό, η ματζέντα και το κίτρινο υπολογίζονται από ό,τι αφήνει το K. Ο τύπος αγνοεί το μελάνι, το χαρτί και το προφίλ χρώματος που χρησιμοποιεί ο εκτυπωτής. Γι' αυτό το εκτυπωμένο αποτέλεσμα θα διαφέρει, και πολύ φωτεινά χρώματα μπορεί να βρίσκονται έξω από ό,τι μπορούν να εκτυπώσουν τα μελάνια CMYK. Χρησιμοποιήστε την τιμή CMYK για να ξεκινήσετε τη συζήτηση με τον εκτυπωτή και ζητήστε δοκιμαστική εκτύπωση πριν από μεγάλη παραγωγή.

Η αντίθεση αφορά τη φωτεινότητα, όχι την απόχρωση

Ο λόγος αντίθεσης WCAG συγκρίνει δύο χρώματα με βάση τη σχετική φωτεινότητά τους (relative luminance). Η φωτεινότητα υπολογίζεται από τις τιμές κόκκινου, πράσινου και μπλε μετά τη διόρθωση γάμμα, και το πράσινο μετράει περισσότερο επειδή το ανθρώπινο μάτι το αντιλαμβάνεται περισσότερο. Κάθε κανάλι μετατρέπεται πρώτα από την κλίμακα 0 έως 255, και η φωτεινότητα είναι 0,2126 επί το κόκκινο, συν 0,7152 επί το πράσινο, συν 0,0722 επί το μπλε.

Ο λόγος είναι η ανοιχτότερη φωτεινότητα συν 0,05, διαιρεμένη με τη σκουρότερη φωτεινότητα συν 0,05. Μαύρο σε λευκό δίνει 21 προς 1, που είναι το μέγιστο δυνατό. Δύο χρώματα μπορεί να διαφέρουν αρκετά στην απόχρωση και να έχουν ωστόσο χαμηλό λόγο, αν έχουν την ίδια φωτεινότητα, και αυτή είναι η περίπτωση που σκοπεύει να εντοπίσει ο έλεγχος. Την ίδια χαμηλή αντίθεση έχει και η αιτία για την οποία δεν σκανάρονται οι κωδικοί QR.

Τα όρια

Το WCAG 2.x ορίζει δύο επίπεδα, και ο απαιτούμενος λόγος εξαρτάται από το μέγεθος του κειμένου.

• Επίπεδο AA: 4,5 προς 1 για κανονικό κείμενο και 3 προς 1 για μεγάλο κείμενο.
• Επίπεδο AAA: 7 προς 1 για κανονικό κείμενο και 4,5 προς 1 για μεγάλο κείμενο.

Μεγάλο κείμενο είναι αυτό των 24 pixel ή περισσότερο, ή των 18,66 pixel και έντονο. Ό,τι είναι μικρότερο θεωρείται κανονικό. Συχνό πρόβλημα είναι το γκρι κείμενο σε λευκό φόντο. Ένα μεσαίο γκρι, όπως το #777777 σε λευκό, έχει λόγο περίπου 4,48 προς 1. Αποτυγχάνει στο AA για κανονικό κείμενο με μικρή διαφορά, αλλά περνάει το AA για μεγάλους τίτλους.

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

Αποχρώσεις και σκιάσεις

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

Πώς να το κάνετε με το fixmint

1. Επικολλήστε ένα χρώμα στο πεδίο Χρώμα ως HEX, RGB, HSL ή όνομα CSS, όπως rebeccapurple.
2. Διαβάστε τις γραμμές HEX, RGB, HSL, HSV και CMYK. Πατήστε Αντιγραφή δίπλα σε αυτή που χρειάζεστε. Το CMYK σημειώνεται ως προσεγγιστικό.
3. Γράψτε το χρώμα του φόντου σας στο πεδίο Φόντο ή χρησιμοποιήστε το δείγμα του, και διαβάστε τον λόγο κάτω από Σε λευκό, Σε μαύρο και Στο φόντο σας.
4. Ελέγξτε τις τέσσερις ενδείξεις κάτω από κάθε λόγο: AA και AAA, καθένα για κανονικό και μεγάλο κείμενο.
5. Στην ενότητα Αποχρώσεις και σκιάσεις, πατήστε ένα δείγμα για να το αντιγράψετε.

Γρήγορες απαντήσεις

Είναι ακριβής η τιμή CMYK;

Όχι. Είναι μια απλή αριθμητική μετατροπή που αγνοεί τον εκτυπωτή, το χαρτί και το προφίλ χρώματος. Αντιμετωπίστε την ως αφετηρία και ζητήστε δοκιμαστική εκτύπωση.

Ένας επιτυχής λόγος αντίθεσης κάνει έναν σχεδιασμό προσβάσιμο;

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

Ποια μορφή να αποθηκεύσω σε φύλλο στιλ;

Όποια διαβάζετε και επεξεργάζεστε πιο εύκολα. Το HEX είναι συμπαγές και διαδεδομένο. Το HSL είναι πιο εύκολο να προσαρμοστεί με το χέρι, επειδή αλλάζετε τη φωτεινότητα χωρίς να αλλάζετε τη χροιά.