Έγχρωμη αντίθεση για το σχεδιασμό διασύνδεσης

Υπάρχουν περίπου 285 εκατομμύρια άνθρωποι στον κόσμο που έχουν προβλήματα όρασης. Αυτός ο αριθμός περιλαμβάνει όσους είναι από τυφλούς, σε όσους έχουν ορατότητα κάτω από 20/20.

Αυτός ο σύντομος οδηγός, γραμμένος κατά τη δημιουργία της εφαρμογής Contrast MacOS, θα σας βοηθήσει να επιτύχετε τα πρότυπα προσβασιμότητας που περιγράφονται στο WCAG 2.0, ειδικά με το χρώμα του προσκηνίου και του φόντου όταν πρόκειται για κείμενο σε ψηφιακές οθόνες.

TL · DR

  • Αποτυχία - Το κείμενο σας δεν έχει αρκετή αντίθεση με το φόντο. Πιθανότατα θέλετε να το κάνετε πιο σκούρο. Αυτό είναι ένα σκορ λιγότερο από 3,0.
  • AA Μεγάλο - Η μικρότερη αποδεκτή ποσότητα αντίθεση για μεγέθη τύπου 18px και μεγαλύτερα. Αυτό είναι ένα σκορ τουλάχιστον 3,0.
  • AA - Αυτό είναι το γλυκό σημείο για μεγέθη κειμένου κάτω από ~ 18pt. Αυτό είναι ένα σκορ τουλάχιστον 4,5.
  • AAA - Αυτό είναι ενισχυμένη αντίθεση με βαθμολογία τουλάχιστον 7,0. Σκεφτείτε πλέον τα άρθρα που θα διαβαστούν για μια σημαντική χρονική περίοδο.

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

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

Βαθμολογία και αναλογία

Υπάρχει μια εξίσωση που παρέχεται από τις οδηγίες προσβασιμότητας περιεχομένου (WCAG) που καθορίζουν αυτές τις δύο τιμές.

  1. Το σκορ
  2. Η αναλογία

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

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

Υπάρχουν τεχνικά 5 αποτελέσματα.

  1. AAA
  2. AAA Μεγάλο
  3. ΑΑ
  4. AA Μεγάλο
  5. Αποτυγχάνω

AAA

Το ΑΑΑ σημαίνει ότι το κείμενό σας έχει αναλογία αντίθεσης τουλάχιστον 7,0. Για παράδειγμα, κείμενο 595959 σε φόντο ffffff και αντίστροφα.

Σημειώστε ότι για να επιτευχθεί μια πραγματική βαθμολογία ΑΑΑ, στο τμήμα 1.4.8.1 του WCAG αναφέρεται επίσης ότι "τα χρώματα των νέων στοιχείων και του φόντου μπορούν να επιλεγούν από το χρήστη".

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

Αυτό το αποτέλεσμα προκύπτει για άτομα με χαμηλή όραση 20/80. Αυτή η βαθμολογία οπτικής οξύτητας συχνά δεν μπορεί να διορθωθεί με γυαλιά κλπ.

Σημείωση πλευρά, 20/200 είναι νομικά τυφλή.

ISO 9241-3 Εργονομικές απαιτήσεις για εργασίες γραφείου με τερματικά οπτικής απεικόνισης (VDT) - Μέρος 3: Απαιτήσεις οπτικής απεικόνισης. Τροπολογία 1.

AAA Μεγάλο

Το AAA Μεγάλο σημαίνει ότι το μεγάλο κείμενο έχει αναλογία αντίθεσης 4,5 ή μεγαλύτερο, το οποίο είναι το ίδιο με το ΑΑ, γι 'αυτό δεν θα δείτε το AAA Μεγάλο ως εμφανή σκορ στην εφαρμογή.

Το WCAG περιγράφει 14pt έντονα και 18pt ως "μεγάλα" μεγέθη. Αυτό μεταφράζεται κατά προσέγγιση σε 18,5 px τολμηρό και 24 px @ 1x. Πρόκειται για μια προσέγγιση, δεδομένου ότι τα μεγέθη των γραμματοσειρών μπορούν να διαφέρουν σημαντικά μεταξύ των γραμματοσειρών.

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

ΑΑ

Το ΑΑ σημαίνει ότι το κείμενό σας έχει αναλογία αντίθεσης τουλάχιστον 4,5 ή υψηλότερη. Για παράδειγμα, 757777 κείμενο σε φόντο ffffff και αντίστροφα.

Υπάρχουν εμπειρικές ενδείξεις ότι η οπτική οξύτητα 20/40 σχετίζεται με απώλεια ευαισθησίας αντίθεσης περίπου 1,5, που είναι εκεί όπου προκύπτει η βαθμολογία 4,5.

Gittings, NS και Fozard, JL (1986). Μεταβολές στην οπτική οξύτητα που σχετίζονται με την ηλικία. Experimental Gerontology, 21 (4-5), 423-433.
ANSI-HFES-100-1988. Αμερικανικό Εθνικό Πρότυπο για την Ανίχνευση Ανθρώπινων Παράγοντες των Σταθμών Εργασίας Οπτικής Οθόνης, Τμήμα 6, σελ. 17-20.

AA Μεγάλο (AA +)

AA Μεγάλο σημαίνει ότι το κείμενό σας έχει αναλογία αντίθεσης τουλάχιστον 3,0. Για παράδειγμα, το κείμενο 949595 σε φόντο ffffff.

Αυτό είναι το ελάχιστο επίπεδο που συνιστάται από τα πρότυπα ISO-9241-3 και ANSI-HFES-100-1988 για το τυποποιημένο κείμενο και την κανονική όραση, από τα οποία προκύπτει το WCAG.

Κάναμε την απόφαση να συντομεύσουμε Μεγάλο σε + στην εφαρμογή έτσι ώστε κάθε σκορ θα ήταν παρόμοιο στο μήκος χαρακτήρα και δεν επηρεάζει το σταθερό πλάτος της διασύνδεσης.

ΑΠΟΤΥΓΧΑΝΩ

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

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

Τι γίνεται με τις εφαρμογές για κινητά και τις μεγάλες οθόνες απότομης αμφιβληστροειδούς;

Υπάρχει ένα σχέδιο εργασίας των οδηγιών για το WCAG Mobile που λέει ...

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

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

Περισσότερο από απλή αντίθεση

Υπάρχει πολύ περισσότερη προσβασιμότητα απ 'ότι η αντίθεση χρώματος. Ακολουθούν μερικά αποσπάσματα από το WCAG για παράδειγμα:

1.4.8 Οπτική Παρουσίαση: Για την οπτική παρουσίαση μπλοκ κειμένου, υπάρχει διαθέσιμος μηχανισμός για να επιτευχθούν τα εξής: (Επίπεδο ΑΑΑ) Τα χρώματα του προσκηνίου και του φόντου μπορούν να επιλεγούν από το χρήστη. Το πλάτος δεν υπερβαίνει τους 80 χαρακτήρες ή τα glyphs (40 αν CJK). Το κείμενο δεν είναι αιτιολογημένο (ευθυγραμμισμένο με το αριστερό και το δεξιό περιθώριο). Η απόσταση γραμμής (προς τα εμπρός) είναι τουλάχιστον μισό και μισό μέσα στις παραγράφους και η απόσταση των διαστημάτων είναι τουλάχιστον 1,5 φορές μεγαλύτερη από την απόσταση γραμμών. Το κείμενο μπορεί να μετατραπεί σε μέγεθος χωρίς υποστηρικτική τεχνολογία έως και 200 ​​τοις εκατό κατά τρόπο που δεν απαιτεί ο χρήστης να μετακινηθεί οριζόντια για να διαβάσει μια γραμμή κειμένου σε ένα παράθυρο πλήρους οθόνης.

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

Εάν θέλετε να δείτε πόσο βαθιά είναι η τρύπα του κουνελιού WCAG, πάρτε το κόκκινο χάπι.

Και αν θέλετε ένα super duper, εύκολος τρόπος για να ελέγξετε την αντίθεση χρωμάτων σας, ακριβώς από τη γραμμή μενού του Mac σας, κατεβάστε το Contrast και ξεκινήστε να σχεδιάζετε καλύτερες διεπαφές. Ίσως να έχετε τη διασκέδαση με τη χρήση του.

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

Αντίθεση που χρησιμοποιείται στο SketchΗ αντίθεση που χρησιμοποιείται στο Adobe XDΗ αντίθεση που χρησιμοποιείται στο IllustratorΗ αντίθεση που χρησιμοποιείται με το Figma

Αυτός ο οδηγός δημοσιεύθηκε αρχικά στο usecontrast.com/guide. Η αντίθεση σχεδιάστηκε από τον Matt D. Smith () και αναπτύχθηκε από τον Sam Soffes.