Διεπαφές αντίθεσης και αναγνωσιμότητα

1) Γιατί η αντίθεση

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

2) Βασικές έννοιες και τύποι

2. 1 αντίθεση από WCAG

• Αντίθεση = (L1 + 0. 05 )/( L2 + 0. 05), όπου «L1 ≥ L2», «L» είναι η σχετική φωτεινότητα (0.. 1).

2. 2 Σχετική φωτεινότητα (sRGB)

1. Φέρτε τα συστατικά στοιχεία R, G, B στην περιοχή 0.. 1.

• εάν 'c ≤ 0. 04045 ', στη συνέχεια' c _ lin = c/12. 92`
• άλλως 'c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. Φωτεινότητα: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin'

2. Αναπαράσταση 3 χρωμάτων

HSL/HSV - βολικό για χειροκίνητη ρύθμιση, αλλά όχι ομοιόμορφα αντιληπτά.
Εργαστήριο/LCH/OKLCH - πιο κοντά στην ανθρώπινη αντίληψη. Το OKLCH είναι βολικό για συστηματική διακύμανση της ελαφρότητας/κορεσμού διατηρώντας παράλληλα την αναγνωσιμότητα.

3) Κανόνες και στόχοι (WCAG 2. 2)

Κείμενο ≥ 14 pt έντονο ή ≥ 18 pt (κανονικό): αντίθεση τουλάχιστον 3:1 (AA).
Υπόλοιπο κείμενο: αντίθεση τουλάχιστον 4. 5:1 (ΑΑ).
AAA (αυξημένη αναγνωσιμότητα): 7:1 για απλό κείμενο· 4. 5-1 για ένα μεγάλο.
Εικονογραφία και σημαντικά μη φωτογραφικά στοιχεία (όρια πεδίων εισόδου, κιβώτια ελέγχου, διακόπτες, δείκτες σφάλματος): 3:1 ορόσημο με φόντο.
Τα κράτη (hover/focus/pressed/απενεργοποιημένα) πρέπει να είναι τουλάχιστον 3:1 διακριτά μεταξύ των κρατών ή με φόντο, καθώς και σαφείς μη φωτογραφικοί δείκτες (έμφαση σύνδεσης, σκιές/πλαίσια, μεταβολή πάχους).

4) Σύστημα σχεδιασμού: αντικρουόμενες μάρκες

Συνιστούμε το σύστημα σχεδιασμού να καταγράφει την αντίθεση ως ιδιότητα των μαρκών.

• 'fg/πρωτογενές' ↔ 'bg/bg' ≥ 7:1 (AAA για κρίσιμο κείμενο)
• 'fg/δευτερεύουσα' ↔ 'bg/βάση' ≥ 4. 5:1
• 'fg/μεταλλαγμένο' ↔ 'bg/λεπτό' ≥ 3:1 (κείμενο υπηρεσίας)
• 'border/εξ ορισμού' ↔ 'bg/base' ≥ 3:1 (όρια πεδίων, καρτών)
• 'αδρανής/εξ ορισμού' ↔ 'bg/base' ≥ 4. 5:1 (σύνδεσμοι/κουμπιά)
• «ανενεργές/απενεργοποιημένες» μη μιμούμενες ενεργές καταστάσεις· χρήση της μείωσης της αντίθεσης και των χαρακτηριστικών του δρομέα/ARIA.

• βασική ελαφρότητα του θέματος (L), στη συνέχεια αποκλίσεις 'Δ for στρώματα/επιφάνειες (' bg/λεπτή ',' bg/αυξημένη '),
• καθορίζουν τα ελάχιστα ζεύγη αντίθεσης στις δοκιμές.

5) Ελαφρά και σκοτεινά θέματα

Θέμα φωτός: το κείμενο είναι σχεδόν μαύρο (όχι καθαρό # 000, αλλά ζεστό/κρύο σκιά), το φόντο είναι λευκό έως ελαφρώς χρωματισμένο για να μειώσει τη «λάμψη».
Σκοτεινό θέμα: αποφύγετε το καθαρό # 000 φόντο - βαθύ γραφίτη/κάρβουνο με L≈0. 12–0. 16 μειώνει τη λάμψη; να μαλακώσει το λευκό κείμενο σε L≈0. 9.
Διατήρηση των ίδιων αντικρουόμενων στόχων και στα δύο θέματα· δεν επιτρέπουν στις χρωματικές προφορές να χάνουν την αναγνωσιμότητα σε σκούρο φόντο (συχνά απαιτείται μετατόπιση «Δ L» και μείωση του κορεσμού).

6) Κείμενο σε εικόνες και βίντεο

Χρησιμοποιήστε επικαλύψεις (κλίση/ημιδιαφανές στρώμα 40-60%) ή πεθαίνουν κάτω από το κείμενο.
Φτιάξτε τουλάχιστον 4. 5:1 μεταξύ του κειμένου και του τοπικού φόντου του θανάτου.
Για το δυναμικό βίντεο - προσαρμοστικό υπόβαθρο/επικάλυψη αναλύοντας τη φωτεινότητα του πλαισίου (δειγματοληψία της κεντρικής/παρασκηνιακής περιοχής).

7) Κράτη και διαδραστικότητα

Οι αναφορές πρέπει να διακρίνονται όχι μόνο από το χρώμα: προκαθορισμένη έμφαση ή έμφαση στο hover/focus + αντίθεση ≥ 3:1 με απλό κείμενο.
Πλήκτρα: κείμενο και εικονίδιο ≥ 4. 5:1 για πλήρωση· 3:1 ≥ γεμίστε το περιβάλλον.
Σφάλματα/επιτυχία/προειδοποιήσεις: μην βασίζεστε στο χρώμα. προσθήκη εικονιδίων/προτροπών κειμένου· παρέχει τουλάχιστον 4 αντίγραφα κειμένου. 5:1.

8) Άτομα με διαταραχές του χρώματος

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

9) Τυπογραφία και ιστορικό

Μέγεθος σώματος: τουλάχιστον 14-16 px (ιστός), 16-18 px για ζώνες περιεχομένου.
Απόσταση γραμμής 1. 4–1. 6 βελτιώνει την αναγνωσιμότητα σε υψηλό επίπεδο αντίθεσης.
Αποφύγετε διακριτικά στυλ σε ανεπαρκή αντίθεση.
Κείμενο σε έγχρωμο υπόβαθρο: Μείωση του κορεσμού υποβάθρου ή/και αύξηση της ελαφρότητας ώστε να επιτευχθεί ο λόγος στόχου.

10) Διαγράμματα, πίνακες, γραφήματα

Γραμμές/στήλες ≥ 3:1 έως πλέγμα/φόντο.
Ετικέτες και θρύλοι άξονα ≥ 4. 5:1.
Χρησιμοποιήστε διακριτά σχήματα/μοτίβα πέρα από το χρώμα.

11) Δυναμική/προσαρμοστική αντίθεση

Αυτόματη αντίθεση: υπολογισμός του χρώματος αντίθεσης του κειμένου στην επιλεγμένη πλήρωση (π.χ. VIA OKLCH: ταιριάζει με το 'L' για να φτάσει το 4. 5:1).
Ρυθμίσεις συστήματος: σεβασμός 'προτιμώμενων-αντίθεσης', 'αναγκαστικών-χρωμάτων', λειτουργιών OS υψηλής αντίθεσης.
Εξατομίκευση: καθορισμός της «υψηλής αντίθεσης» στην εφαρμογή (ενίσχυση της «Δ L», αντικατάσταση των προφορών με πιο ουδέτερες, διατηρώντας παράλληλα την ταυτότητα της μάρκας μέσω της μορφής/εικονιδίων).

12) Διαδικασίες ελέγχου και αυτοματοποίηση

12. 1 Για τους σχεδιαστές

Ελέγξτε την αντίθεση στις διατάξεις (και στα δύο θέματα και στο βασικό υπόβαθρο).
Εισάγετε τα «slots αντίθεσης» στα συστατικά στοιχεία (τίτλος/πρωτογενής/δευτερεύουσα/υπόδειξη).
Τεκμηρίωση έγκυρων πλαισίων για κάθε συστατικό.

12. 2 Για προγραμματιστές

Βοηθητές μονάδων: η λειτουργία του υπολογισμού της αντίθεσης και των ισχυρισμών στις δοκιμές για συμβολικά ζεύγη.
Οπτικά στιγμιότυπα με έλεγχο μετρήσεων αντίθεσης (απόδοση οθόνης + υπολογισμός δείγματος).
Χιτώνια στυλ: απαγόρευση του «ακατέργαστου» χρώματος, μόνο μέσω μαρκών.

12. 3 V CI/CD

Ελέγχει όλα τα ζεύγη «fg/bg» σε θέματα και κράτη.
Έκθεση παραβίασης με συστατικό στοιχείο, παραλλαγή, θέμα και πραγματική τιμή (π.χ. 3. 9:1 με το απαιτούμενο 4. 5:1).

13) Ιδιαιτερότητες iGaming (προαιρετικά)

Φωτεινά διαφημιστικά πανό και κάρτες τουρνουά συχνά τρώνε το κείμενο. Απαιτείται περιορισμός πλάκας/επικάλυψης και κορεσμού υποβάθρου.
Στοιχεία συστήματος των κρίσιμων κοινοποιήσεων (18 +, όρια, κίνδυνοι) - AAA, αντίθετα.
Σε πίνακες/συντελεστές: αριθμοί και σημεία «+/-» ≥ 4. 5:1, τονίζοντας τη νίκη - όχι μόνο σε χρώμα (εικονίδια/ετικέτες).

14) Αντιπατερίδια

Βασιστείτε μόνο στο χρώμα για να διακρίνετε την κατάσταση.
Λεπτές γκρι γραμματοσειρές σε έγχρωμο φόντο χωρίς υπολογισμό αντίθεσης.
«Σκοτεινό σε σκούρο» σε σκοτεινή λειτουργία, «φωτεινό σε φωτεινό» σε promo περιοχές.
Κείμενο στο φόντο με λεπτομέρειες/θόρυβο χωρίς θάνατο.

15) Κατάλογος ελέγχου

Βασικό κείμενο

• ≥ 4. 5:1 (κανονικό), ≥ 3:1 (μεγάλο/λιπαρό).

Σύνδεσμοι/Κουμπιά

• Κείμενο κουμπί ≥ 4. 5:1 για πλήρωση.

Εικονίδια/Σύνορα

Διακριτό 3:1 ≥ δηλώνει ή ρητούς δείκτες.

• ≥ 3:1 στο φόντο.

Σκοτεινά/ελαφρά θέματα

• Επιτυγχάνονται οι ίδιοι αντίθετοι στόχοι.

Υπόβαθρο των μέσων ενημέρωσης

• Διατηρείται ο συντελεστής επικάλυψης/πινακίδας.

Διαθεσιμότητα

• Υπάρχουν μη-φωτογραφικά χαρακτηριστικά εκτός από το χρώμα.

Αυτοματοποίηση

• Δοκιμές αντίθεσης σε CI/CD σε μάρκες και κατασκευαστικά στοιχεία.

16) Ενδεικτική ένεση (παράδειγμα σημειογραφίας)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

Σημείωση: κατά προσέγγιση τιμές. τα τελικά επιλέγονται με υπολογισμό της αντίθεσης σε συγκεκριμένο θέμα.

17) Ομαδική τεκμηρίωση

Στις κατευθυντήριες γραμμές προσδιορίζονται: αντικρουόμενοι στόχοι, παραδείγματα αληθινών/ψευδών ζευγών, ο πίνακας 'fg × bg' για βασικά συστατικά, κανόνες για το υπόβαθρο πολυμέσων, και πώς να ενεργοποιήσετε τη λειτουργία υψηλής αντίθεσης.
Κρατήστε ζωντανή τη σελίδα Εξαιρέσεις και Αιτίες (για παράδειγμα, επιτρέπεται 3. 8:1 στη στενή περίπτωση μιας μεγάλης κεφαλίδας απεικόνισης).

Σύντομη περίληψη

Η αντίθεση είναι μια μετρούμενη παράμετρος, όχι μια παράμετρος γεύσης. Ορίστε στόχους (AA/AAA), διαχειριστείτε τους μέσω μαρκών (κατά προτίμηση σε OKLCH), ελέγξτε αυτόματα σε CI και οπτικά σε διατάξεις, λάβετε υπόψη θέματα σκούρου/φωτός και άτομα με προβλήματα όρασης χρωμάτων. Αυτό εγγυάται την αναγνωσιμότητα, μειώνει τα σφάλματα και αυξάνει τη μετατροπή.