Interfețe de contrast și lizibilitate

1) De ce contrast

• reduce sarcina cognitivă și oboseala,
• îmbunătățește viteza de scanare a interfeței,
• crește accesibilitatea pentru persoanele cu deficiențe de vedere și culoare,
• reduce erorile din scenariile interconectate (plăți, formulare, confirmări).

2) Concepte și formule de bază

2. 1 Contrast prin WCAG

• Contrast = (L1 + 0. 05 )/( L2 + 0. 05), în cazul în care „L1 ≥ L2”, „L” este luminozitatea relativă (0.. 1).

2. 2 Luminozitate relativă (sRGB)

1. Aduceți componentele R, G, B în intervalul 0.. 1.

• dacă "c ≤ 0. 04045 ', then' c _ lin = c/12. 92`
• altfel 'c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. Luminozitate: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin'

2. 3 Reprezentări de culori

HSL/HSV - convenabil pentru ajustarea manuală, dar nu uniform perceptual.
Lab/LCH/OKLCH - mai aproape de percepția umană; OKLCH este convenabil pentru variația sistematică a luminii/saturației, menținând în același timp lizibilitatea.

3) Norme și obiective (WCAG 2. 2)

Text ≥ 14 pt aldine sau ≥ 18 pt (normal): contrast cel puțin 3:1 (AA).
Restul textului: contrast cel puțin 4. 5:1 (AA).
AAA (lizibilitate crescută): 7:1 pentru text simplu; 4. 5-1 pentru unul mare.
Iconografie și elemente non-fotografice importante (margini ale câmpurilor de intrare, casete de selectare, switch-uri, indicatori de eroare): 3:1 punct de reper cu fundal.
Statele (hover/focus/pressed/disabled) trebuie să fie cel puțin 3:1 distinctibile între state sau cu un fundal, plus indicatori non-fotografici expliciți (link subliniere, umbre/cadre, schimbare de grosime).

4) Sistem de proiectare: jetoane de contrast

Vă recomandăm ca sistemul de proiectare să înregistreze contrastul ca proprietate a jetoanelor.

• „fg/primar” ↔ „bg/base” ≥ 7:1 (AAA pentru text critic)
• „fg/secundar” ↔ „bg/bază” ≥ 4. 5:1
• 'fg/muted' ↔ 'bg/subtil' ≥ 3:1 (text de serviciu)
• „border/default” ↔ „bg/base” ≥ 3:1 (frontierele câmpurilor, cardurilor)
• „interactive/default” ↔ „bg/base” ≥ 4. 5:1 (legături/butoane)
• „interactiv/cu handicap” nu ar trebui să imite statele active; utilizați reducerea contrastului și atributele cursor/ARIA.

• ușurința de bază a temei (L), apoi abaterile "Δ L' pentru straturi/suprafețe (" bg/subtil "," bg/elevat "),
• fixați perechile minime de contrast în teste.

5) Teme ușoare și întunecate

Tema de lumină: textul este aproape negru (nu este o nuanță pură # 000, ci o nuanță caldă/rece), fundalul este alb până la ușor colorat pentru a reduce „strălucirea”.
Temă întunecată: evitați fundalul curat # 000 - grafit profund/cărbune cu L≈0. 12–0. 16 reduce strălucirea; se înmoaie textul alb pentru a L≈0. 9.
Păstrați aceleași obiective contrastante în ambele teme; nu permiteți accentelor de culoare să-și piardă lizibilitatea pe un fundal întunecat (adesea este necesară o schimbare „Δ L” și o scădere a saturației).

6) Text în imagini și videoclipuri

Utilizați suprapuneri (gradient/strat translucid 40-60%) sau moare sub text.
Fixați cel puțin 4. 5:1 între textul și fundalul local al matriței.
Pentru video dinamic - fundal adaptiv/suprapunere prin analiza luminozității cadrului (eșantionarea zonei centrale/de fundal).

7) Stări și interactivitate

Referințele trebuie să se distingă nu numai prin culoare: implicit subliniați sau subliniați pe hover/focus + contrast ≥ 3:1 cu text simplu.
Butoane: text și pictogramă ≥ 4. 5:1 pentru a umple; 3:1 ≥ umple la mediul înconjurător.
Erori/succes/avertismente: nu vă bazați pe culoare; adăugați icoane/solicitări de text; oferă cel puțin 4 contrast text. 5:1.

8) Persoanele cu deficiențe de culoare

• Deuteranopia/Protanopia (zona roșu-verde): Evitați combinațiile „roșu vs verde” fără semne suplimentare.
• Tritanopia: perechi albastru-galben pentru a verifica separat.
• Asigurați-forme și grafice clare: etichete text, diferite tipuri de contururi/markeri, modele de umplere, subtitrări de segment.

9) Tipografie și fundal

Dimensiunea corpului: 14-16 px minim (web), 16-18 px pentru zonele de conținut.
Distanța de linie 1. 4–1. 6 îmbunătățește lizibilitatea pe un fundal de contrast ridicat.
Evitați stilurile subtile pe contrast insuficient.
Text despre fundalurile colorate: Reduceți saturația de fundal și/sau creșteți ușurința pentru a atinge raportul țintă.

10) Diagrame, tabele, grafice

Linii/coloane ≥ 3:1 la grilă/fundal.
Etichete axe și legende ≥ 4. 5:1.
Utilizați forme/modele distinctive dincolo de culoare.

11) Contrast dinamic/adaptiv

Contrast automat: calculați culoarea de contrast a textului la umplerea selectată (de ex. prin OKLCH: meci „L” pentru a ajunge la 4. 5:1).
Setări de sistem: respectaţi „preferă contrastul”, „culori forţate”, moduri de operare cu contrast ridicat.
Personalizare: setarea „Contrast ridicat” în aplicație (consolidarea „Δ L”, înlocuirea accentelor de brand cu cele mai neutre, menținând în același timp identitatea mărcii prin forma/pictogramele).

12) Procese de control și automatizare

12. 1 Pentru designeri

Verificați contrastul pe machete (în ambele teme și pe fundaluri cheie).
Introduceți „sloturi de contrast” în componente (titlu/primar/secundar/indiciu).
Context de fundal valabil pentru fiecare componentă.

12. 2 Pentru dezvoltatori

Ajutoare de unitate: funcția de calcul al contrastului și afirmă în teste pentru perechi de token.
Instantanee vizuale cu contrast măsurători de verificare (ecran randare + eșantion L1/L2 calcul).
Lintere de stil: interzicerea culorii „brute”, numai prin jetoane.

12. 3 V CI/CD

Verifică toate „fg/bg” perechi în teme și stări.
Raport de încălcare cu componentă, variantă, temă și valoare reală (de ex. 3. 9:1 cu 4 necesar. 5:1).

13) iGaming specific (opțional)

bannere promo luminoase și cărți de turneu de multe ori mânca textul. Placă/suprapunere și limitarea saturației de fundal necesare.
Elementele sistemului de notificări critice (18 +, limite, riscuri) - AAA prin contrast.
În clasamente/coeficienți: numere și semne „+/-” ≥ 4. 5:1, evidențiind câștigul - nu numai în culori (icoane/etichete).

14) Antipattern

Bazați-vă doar pe culoare pentru a distinge condiția.
Fonturi gri subțiri pe un fundal colorat, fără a calcula contrastul.
„Întuneric pe întuneric” în Dark Mode, „luminos pe luminos” în zonele promoționale.
Text pe fundal cu detalii/zgomot fără mor.

15) Lista de verificare

Text de bază

• ≥ 4. 5:1 (normal), ≥ 3:1 (mare/gras).

Legături/Butoane

• Text buton ≥ 4. 5:1 pentru a umple.
• Distinctibil 3:1 ≥ stări sau indicatori expliciți.

Icoane/Frontiere

• ≥ 3:1 la fundal.

Teme întunecate/luminoase

• Aceleași obiective de contrast sunt atinse.

Medii media

• Suprapunere/placă, coeficientul este menținut.

Disponibilitate

• Există caracteristici non-fotografice în afară de culoare.

Automatizare

• Contrast teste în CI/CD pe token-uri și componente.

16) Injecție cu token (exemplu de notație)

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

Notă: valori aproximative; cele finale sunt selectate prin calcularea contrastului într-un anumit subiect.

17) Documentația echipei

În liniile directoare, specificați: obiective de contrast, exemple de perechi adevărate/false, matricea „fg × bg” pentru componente cheie, reguli pentru medii media și cum să activați modul Contrast ridicat.
Păstrați pagina Excepții și cauze în viață (de exemplu, permis 3. 8:1 în cazul îngust al unui antet de afișare mare).

Scurt rezumat

Contrastul este un parametru măsurat, nu un parametru de gust. Setați obiective (AA/AAA), gestionați-le prin jetoane (de preferință în OKLCH), verificați automat în CI și vizual în machete, luați în considerare temele întunecate/ușoare și persoanele cu deficiențe de vedere de culoare. Acest lucru garantează lizibilitatea, reduce erorile și crește conversia.