Interfacce di contrasto e leggibilità

1) Perché il contrasto

• riduce il carico cognitivo e la fatica,
• migliora la velocità di scansione dell'interfaccia,
• migliora la disponibilità delle persone con disturbi visivi e della percezione dei colori
• riduce il numero di errori negli script interconnessi (pagamenti, moduli, conferme).

2) Concetti e formule di base

2. 1 Contrasto WCAG

• Contrast = (L1 + 0. 05) / (L2 + 0. 05), dove L1 è L2, L è la luminosità relativa (0.. 1).

2. 2 Luminosità relativa (sRGB)

1. Inserire i componenti R, G, B nell'intervallo 0.. 1.

• Se c'è un C-0. 04045 ',' c _ lin = c/12. 92`
• altrimenti "c _ lin = (c + 0. 055) / 1. 055) ^ 2. 4`

3. Luminosità: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin`

2. 3 Viste colore

HSL/HSV è facile da personalizzare manualmente, ma non è uniforme in modo percettibile.
Lab/LCH/OKLCH - più vicino alla percezione umana; OKLCH è utile per variare sistematicamente luce/saturazione mantenendo la lettura.

3) Norme e obiettivi (WCAG 2. 2)

Testo ≥ 14 pt bold o ≥ 18 pt (normale): contrasto minimo 3:1 (AA).
Il resto del testo è un contrasto minimo di 4. 5:1 (AA).
AAA (maggiore leggibilità): 7:1 per il testo normale; 4. 5:1 per un grande.
Iconografia e importanti elementi non fotografici (bordi dei campi di input, checkbox, pulsanti di scelta, indicatori di errore): punto di riferimento 3:1 con sfondo.
Gli stati (hover/focus/pressed/disabled) non devono essere inferiori a 3:1 tra stati o con sfondo, più indicatori nefotici evidenti (sottolineare riferimenti, ombre/cornici, modificare lo spessore).

4) Sistema di progettazione: token di contrasto

Il sistema di progettazione consiglia di fissare il contrasto come proprietà dei token.

• 'fg/primary' ↔ 'bg/basè ≥ 7:1 (AAA per il testo critico)
• `fg/secondary` ↔ `bg/base` ≥ 4. 5:1
• «fg/muted» «bg/subtle» 3:1 (testo di servizio)
• 'border/default' 'bg/basè 3:1 (bordi dei campi, carte)
• `interactive/default` ↔ `bg/base` ≥ 4. 5:1 (collegamenti/pulsanti)
• «interattivo/disabled» non deve simulare gli stati attivi; Usa la riduzione del contrasto e il cursore/ARIA-attributi.

• la luminosità di base del tema (L), quindi le deviazioni « L» per i livelli/superfici («bg/subtle», «bg/elevated»),
• fissare le coppie minime di contrasto nei test.

5) Temi chiari e scuri

Tema luminoso: il testo è quasi nero (non puro # 000, ma calda/fredda tonalità), lo sfondo dal bianco al leggermente tonificato per ridurre il «bagliore».
Il tema oscuro è evitare il sottofondo puro # 000 - grafite profonda/carbone con L≈0. 12–0. 16 riduce le luci; attenuare il testo bianco a L≈0. 9.
Mantenere gli stessi obiettivi di contrasto in entrambi i temi; non lasciate che gli accenti del colore perdano la leggibilità su sfondo scuro (spesso è necessario spostarsi e ridurre la saturazione).

6) Testo in immagini e video

Usate gli overlay (sfumatura/semisconosciuto 40-60%) o le tinte sotto il testo.
Fissa almeno 4. 5:1 tra il testo e lo sfondo locale della piastra.
Per il video dinamico, lo sfondo/overlay adattivo per l'analisi della luminosità del fotogramma (sampling centrale/falso).

7) Stati e interattività

I riferimenti devono essere distinti non solo dal colore, come la sottolineatura predefinita o la sottolineatura hover/focus + contrasto 3:1 con testo normale.
I pulsanti sono testo e icona 4. 5:1 al riempimento; riempimento 3-1 all'ambiente.
Errori/successo/avvertenze: non fare affidamento sul colore; aggiungere icone/suggerimenti di testo; assicurate un contrasto minimo di 4 testo. 5:1.

8) Persone con disturbi della percezione del colore

• Deuteranopia/Protanopia (zona rossa e verde): evitare combinazioni di rosso vs verde senza segni aggiuntivi.
• Tritanopia - Coppie blu-gialle da controllare separatamente.
• Rendete chiari i moduli e i grafici: etichette di testo, diversi tipi di tratti/maniglie, pattern di riempimento, etichette di segmenti.

9) Tipografia e sfondo

Testo principale: 14-16 px minimo (web), 16-18 px per le zone contenute.
Intervallo tra righe 1. 4–1. 6 migliora la leggibilità in un contesto ad alto contrasto.
Evitare i disegni sottili su un contrasto insufficiente.
Testo sui fondali colorati: riduce la saturazione dello sfondo e/o aumenta la luminosità per raggiungere la posizione di destinazione.

10) Grafici, tabelle, grafici

Linee/colonne 3:1 alla griglia/fondo.
Le firme degli assi e le ≥ 4. 5:1.
Utilizzare forme o pattern diverse oltre al colore.

11) Contrasto dinamico/adattativo

Auto contrast: calcola il colore di contrasto del testo al riempimento selezionato (ad esempio, tramite OKLCH, selezione «L» per raggiungere il numero 4. 5:1).
Impostazioni di sistema: rispettate «prefers-contrast», «forced-colors», modalità high-contrast del sistema operativo.
Personalizzazione: Personalizzazione di contrasto elevato nell'applicazione (amplificazione dì L ", sostituzione degli accenti di marca con quelli più neutrali, mantenendo il marchio mediante forma/icone).

12) Processi e automazione del controllo

12. 1 Per designer

Verificare il contrasto sui layout (in entrambi i temi e sui fondi chiave).
Immettere slot di contrasto nei componenti (title/primary/secondary/hint).
Documentate i contesti di sfondo validi per ciascun componente.

12. 2 Per gli sviluppatori

Unit Helpers - Funzione di calcolo del contrasto e degli asserti nei test per le coppie di token.
Nastri visivi che controllano le metriche di contrasto (screen render + calcolo L1/L2 per sample).
Liner stile - Disattiva il colore crudo, solo attraverso i token.

12. 3 IN CI/CD

Controlla tutte le coppie fg/bg in argomenti e stati.
Report delle violazioni con un componente, un'opzione, un argomento e un valore effettivo (ad esempio 3). 9:1 con le 4 richieste. 5:1).

13) Specifica iGaming (opzionale)

I banner promozionali brillanti e le schede dei tornei spesso «mangiano» il testo. È necessario un piastrelle/overlay e limitare la saturazione dello sfondo.
Gli elementi di sistema di notifica responsabile (18 +, limiti, rischi) sono AAA per contrasto.
Le tabelle dei leader/coefficienti includono numeri e segni +/- 4. 5:1, l'evidenziazione della vincita non è solo colore (icone/etichette).

14) Antipattern

Fare affidamento solo sul colore per differenziare lo stato.
Sottili caratteri grigi su sfondo colorato senza calcolare il contrasto.
«Scuro su scuro» in Dark Mode, «luminoso su luminoso» nelle zone promozionali.
Testo su sfondo con dettagli/rumori senza piastra.

15) Foglio di assegno per la gelosia

Testo di base

• ≥ 4. 5:1 (normale), 3:1 (grande/grasso).

Collegamenti/pulsanti

• Il testo del pulsante ≥ 4. 5:1 al riempimento.
• Differenze di stato 3:1 o indicatori espliciti.

Icone/bordi

• ≥ 3:1 al fondo.

Temi scuri/luminosi

• Stessi obiettivi di contrasto raggiunti.

Fondi multimediali

• Overlay/piastra, coefficiente resistente.

Disponibilità

• Ci sono segni non fotografici oltre al colore.

Automazione

• Test di contrasto in CHI/CD per token e componenti.

16) Implementazione di token (esempio di notazione)

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)  # проверить на обоих фонах

Nota: i valori sono approssimativi; i finali vengono selezionati in base al calcolo del contrasto in un particolare argomento.

17) Documentazione per il team

Nelle haydline, specificare gli obiettivi di contrasto, gli esempi di coppie corrette/errate, la matrice «fg x bg» per i componenti chiave, le regole per i supporti multimediali e come includere la modalità «Contrasto elevato».
Tenere viva la pagina Eccezioni e cause (ad esempio, 3. 8:1 in una valigetta stretta di un grande titolo di schermo).

Breve riepilogo

Il contrasto è un parametro misurato, non gustativo. Impostate gli obiettivi (AA/AAA), controllateli attraverso i token (meglio in OKLCH), controllateli automaticamente in CI e visivamente nei layout, tenete conto dei temi scuri/chiari e delle persone con problemi di visione. Garantisce la leggibilità, riduce gli errori e aumenta la conversione.