#Σημείο ελέγχου 1.4.11 Αντίθεση μη-κειμένου

Τι ελέγχεται;

Οι οπτικές πληροφορίες που απαιτούνται για την αναγνώριση των γραφικών και των γραφικών στοιχείων ελέγχου που μεταφέρουν πληροφορίες καθώς και των καταστάσεων τους θα πρέπει να έχουν αντίθεση τουλάχιστον 3:1 σε παρακείμενα χρώματα.

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

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

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

Γιατί ελέγχεται;

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

Πώς ελέγχεται;

1. Εφαρμογή του σημείου ελέγχου 1.4.11 Αντίθεση μη-κειμένου

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

2. Έλεγχος

Σημείωση: Για τους ελέγχους 2.2 έως 2.4, αρκεί μια οπτική επιθεώρηση εάν η αντίθεση είναι σημαντικά μεγαλύτερη από 3:1. Εάν έχετε αμφιβολίες, χρησιμοποιήστε πάντα τον Color Contrast Analyzer.

2.1 Έλεγχος απροσδιόριστων χρωμάτων

  1. Ελέγξτε εάν ένα χρώμα φόντου έχει οριστεί επίσης για γραφικά ή στοιχεία ελέγχου (π.χ. γραμματοσειρές εικονιδίων) για τα οποία έχει καθοριστεί ένα χρώμα προσκηνίου μέσω CSS (και αντίστροφα).
  2. 2. Χρησιμοποιείστε το Bookmarklet που ορίζει χρώματα προσκηνίου και φόντου ή ενεργοποιήστε ένα φύλλο στυλ χρήστη (User Stylesheet). Για παράδειγμα, με ακόλουθο κανόνα: html {background-color:black;color:white}.
  3. Ελέγξτε εάν τα γραφικά ή τα στοιχεία ελέγχου εξαφανίζονται τώρα ή είναι δύσκολο να τα δείτε. Σε αυτές τις περιπτώσεις, λείπει είτε ή επιλογή του χρώματος είτε το χρώμα του φόντου.

2.2 Έλεγχος στοιχείων ελέγχου στην αρχική προβολή

  1. Προσδιορίστε γραφικά στοιχεία ελέγχου (όπως εικονίδια) στη σελίδα που δεν έχουν κείμενο στο πλαίσιο το οποίο προσδιορίζει το νόημά τους και πιθανώς επίσης μεταβαλλόμενες καταστάσεις μετά την αλληλεπίδραση. Είναι σαφώς επαρκείς οι αντιθέσεις σε γειτονικά χρώματα (3:1 ή καλύτερα);
  2. Προσδιορίστε στοιχεία ελέγχου με πλαίσια (όπως κουμπιά ή πεδία εισαγωγής κειμένου). Μπορεί το στοιχείο ελέγχου να αναγνωριστεί από το πλαίσιο ή μέρος του πλαισίου; Εάν το πλαίσιο δεν περικλείει κείμενο ή σύμβολο πρέπει το πλαίσιο να έχει αντίθεση τουλάχιστον 3:1.

2.3 Έλεγχος καταστάσεων στοιχείων ελέγχου μετά την εστίαση ή την ενεργοποίηση

  1. Εστιάστε στα χειριστήρια χρησιμοποιώντας το πληκτρολόγιο και το ποντίκι. Είναι σαφώς επαρκής η αντίθεση του τονισμού εστίασης από τα γειτονικά χρώματα (3:1 ή καλύτερα);
  2. Για στοιχεία ελέγχου που έχουν διαφορετικές καταστάσεις λειτουργίας (π.χ. πλαίσια ελέγχου, κουμπιά επιλογής), καλέστε τις άλλες διαθέσιμες καταστάσεις. Είναι σαφώς επαρκής η αντίθεση των μερών των στοιχείων ελέγχου που μεταφέρουν πληροφορίες από τα γειτονικά χρώματα (3:1 ή καλύτερα). Σημείωση: Εξαιρούνται από την απαίτηση τα εγγενή στοιχεία ελέγχου, δηλαδή τα στοιχεία ελέγχου που δεν έχουν διαμορφωθεί από τον συντάκτη.

2.4 Έλεγχος γραφικών με πληροφοριακό χαρακτήρα

  1. Προσδιορίστε γραφικά πληροφοριακού χαρακτήρα όπου οι πληροφορίες μεταφέρονται μόνο μέσω του γραφικού και όχι (ή όχι επαρκώς) μέσω του συνοδευτικού κειμένου.
  2. Εάν υπάρχουν χρωματικές διαβαθμίσεις σε περιοχές του γραφικού, αγνοήστε τα μέρη με αντίθεση μικρότερη από 3:1 και αξιολογήστε εάν οι πληροφορίες εξακολουθούν να μεταφέρονται επαρκώς από το τμήμα υψηλότερης αντίθεσης του γραφικού.

2.5 Έλεγχος Styleswitcher, έλεγχος των γραφικών αντιθέσεων της εναλλακτικής προβολής

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

  1. Ελέγξτε τη γραφική αντίθεση του στοιχείου εναλλαγής στυλ.
  2. Ο λόγος αντίθεσης πρέπει να είναι 4,5:1 ή καλύτερος εάν ο διακόπτης φέρει ετικέτα με κείμενο (για γραφικούς διακόπτες ισχύει ελάχιστη αντίθεση 3,0:1. Πρέπει επίσης να πληρούνται όλες οι άλλες απαιτήσεις (π.χ. λειτουργικότητα πληκτρολογίου), διαφορετικά ακυρώστε τον έλεγχο της εναλλακτικής προβολής.
  3. Ανακαλέστε μια εναλλακτική προβολή υψηλότερης αντίθεσης χρησιμοποιώντας την εναλλαγή στυλ.
  4. Ελέγξτε τις γραφικές αντιθέσεις της εναλλακτικής προβολής (όπως περιγράφεται παραπάνω στα 2.2. και 2.4). Εάν εξακολουθούν να υπάρχουν ελλείψεις αντίθεσης σε γραφικά ή κείμενο μετά την ενεργοποίηση της εναλλακτικής προβολής, αυτή η προβολή δε θα ληφθεί υπόψη κατά την αξιολόγηση των αντιθέσεων.

Σημειώσεις

3.1 Εντοπισμός των απαραίτητων τμημάτων των ελέγχων

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

Παραδείγματα:
  • Το εστιασμένο χειριστήριο.
  • Η ενεργοποιημένη κατάσταση μιας καρτέλας.
  • Οι άκρες ενός πεδίου εισαγωγής ή ενός κουμπιού.
  • Το επιλεγμένο προσαρμοσμένο πλαίσιο ελέγχου (Custom-Checkbox).

Οπτικά παραδείγματα θα βρείτε στην ακόλουθη ιστοσελίδα. Understanding Success Criterion 1.4.11: Non-text Contrast.

3.2 Διαφορά αντίθεσης μεταξύ καταστάσεων

  • Δεν απαιτείται αντίθεση 3:1 για τη διαφορά μεταξύ διαφορετικών λειτουργικών καταστάσεων του ίδιου στοιχείου ελέγχου (π.χ. διακόπτης ενεργοποιημένος/μη ενεργοποιημένος).
  • Δεν απαιτείται επίσης αντίθεση 3:1 για τη διαφορά μεταξύ διαφορετικών καταστάσεων αλληλεπίδρασης του ίδιου στοιχείου ελέγχου (π.χ. εστιασμένο / μη εστιασμένο). Ωστόσο, εάν η κατάσταση αλληλεπίδρασης εμφανίζεται μόνο μέσω αλλαγής χρώματος (δηλαδή όχι με άλλο τρόπο, για παράδειγμα αλλάζοντας το σχήμα, αλλάζοντας το παρεχόμενο κείμενο, περιγράμματα ή παρόμοια), τότε η αντίθεση του ενός χρώματος στο άλλο θα πρέπει να είναι τουλάχιστον 3:1. Αυτό είναι το θέμα του ελέγχου στο σημείο ελέγχου 2.4.7 Τρέχουσα θέση εστίασης πάντα ορατή

Ωστόσο, η αντίθεση απαιτείται για κάθε μεμονωμένη κατάσταση προς το γειτονικό χρώμα.

Ταξινόμηση του σημείου ελέγχου

Διαφοροποίηση από άλλα σημεία ελέγχου

Αυτό το σημείο ελέγχου 1.14.11 "Αντίθεση μη-κειμένου" αφορά τις αντιθέσεις γραφικών και γραφικών χαρακτηριστικών, όπως περιγράμματα. Η αντίθεση των γραμματοσειρών, συμπεριλαμβανομένης της αντίθεσης των γραφικών γραμματοσειρών, αξιολογείται στο σημείο ελέγχου 1.4.3 «Αντίθεση (Ελάχιστη).

Ταξινόμηση του σημείου ελέγχου σύμφωνα με το WCAG 2.1

Κατευθυντήρια γραμμή

Κριτήριο επιτυχίας

Επαρκείς Τεχνικές

Αποτυχίες

Πηγές