Kontrast interfeýsleri we okalmagy

1) Näme üçin kontrast

• aň-düşünjäni we ýadawlygy azaldar,
• interfeýsiň skaner tizligini ýokarlandyrýar,
• görüş we reňk duýgusy kemçilikli adamlar üçin elýeterliligi ýokarlandyrýar,
• özara baglanyşykly ssenariýalardaky ýalňyşlyklaryň sanyny azaldar (tölegler, görnüşler, tassyklamalar).

2) Esasy düşünjeler we formulalar

2. 1 WCAG kontrast

• Contrast = (L1 + 0. 05) / (L2 + 0. 05), bu ýerde 'L1 ≥ L2', 'L' - degişlilikde ýagtylyk (0.. 1).

2. 2 Degişlilikde ýagtylyk (sRGB)

1. R, G, B komponentlerini 0.. 1 diapazonyna getiriň.

• eger 'c ≤ 0. 04045 ', onda' c _ lin = c/12. 92`
• başgaça 'c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. Ýagtylyk: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin`

2. 3 Reňk görkezmeleri

HSL/HSV - el bilen sazlamak üçin amatly, ýöne birmeňzeş däl.
Lab/LCH/OKLCH - adamyň duýgusyna has ýakyn; OKLCH okalýan mahaly ýagtylygy/doýgunlygy yzygiderli üýtgetmek üçin amatlydyr.

3) Kadalar we maksatlar (WCAG 2. 2)

Teksti ≥ 14 pt bold ýa-da ≥ 18 pt (adaty): kontrast azyndan 3:1 (AA).
Galan tekst: kontrast azyndan 4. 5:1 (AA).
AAA (ýokary okalyşlyk): 7:1 adaty tekst üçin; 4. Uly üçin 5:1.
Ikonografiýa we möhüm nefotografiki elementler (giriş meýdanlarynyň çäkleri, çekbokslar, açarlar, ýalňyşlyk görkezijileri): fon bilen 3:1 görkeziji.
Şertler (hover/focus/pressed/disabled) ýagdaýlaryň arasynda ýa-da fon bilen 3: 1-den pes bolmadyk tapawut bolmaly, üstesine-de aç-açan fotografiki görkezijiler (baglanyşyklaryň, kölegeleriň/çarçuwalaryň, galyňlygyň üýtgemegi) bolmaly.

4) Dizaýn-ulgam: kontrast bellikleri

Dizaýn ulgamynda kontrasty bellikleriň emlägi hökmünde düzetmegi maslahat berýäris.

• 'fg/primary' ≥ 'bg/base' 7:1 (AAA möhüm tekst üçin)
• `fg/secondary` ↔ `bg/base` ≥ 4. 5:1
• 'fg/muted' ≥ 'bg/subtle' 3:1 (iş teksti)
• 'border/default' ≥ 'bg/base' 3:1 (meýdanlaryň, kartoçkalaryň çäkleri)
• `interactive/default` ↔ `bg/base` ≥ 4. 5:1 (baglanyşyklar/düwmeler)
• 'interactive/disabled' işjeň ýagdaýlara öýkünmeli däldir; kontrastyň peselmegini we kursoryny/ARIA atributlaryny ulanyň.

• mowzugyň esasy ýagtylygy (L), soňra gatlaklar/ýüzler üçin 'Δ L' gyşarmalary ('bg/subtle', 'bg/elevated'),
• synaglarda iň az kontrast jübütleri düzüň.

5) Açyk we garaňky temalar

Açyk tema: tekst gara diýen ýaly (# 000 arassa däl, ýöne ýyly/sowuk kölege), "ýalpyldawuklygy" azaltmak üçin ak reňkden birneme reňkli fon.
Garaňky tema: arassa # 000 fon - L ≈ 0 bilen çuňňur grafit/kömürden gaça duruň. 12–0. 16 ýagtylygy peseldýär; ak teksti L ≈ 0 çenli ýumşadyň. 9.
Iki mowzukda hem birmeňzeş gapma-garşylykly maksatlary saklaň; reňk aksentleriniň garaňky fonda okalmagyna ýol bermäň (köplenç 'Δ L' üýtgemegi we doýgunlygyň peselmegi zerurdyr).

6) Suratlarda we wideolarda tekst

Overleýleri (gradient/ýarym aç-açan gatlak 40-60%) ýa-da tekstiň aşagyndaky şekilleri ulanyň.
Iň azyndan 4. 5:1 tekst bilen plaçanyň ýerli fon arasynda.
Dinamiki wideo üçin - çarçuwanyň ýagtylygyny seljermek üçin uýgunlaşdyrylan fon/overley (merkezi/galp sebitiň samplingi).

7) Ýagdaýlar we interaktiwlik

Baglanyşyklar diňe bir reňk bilen tapawutlanmaly däl: adaty tekst bilen 3:1 ≥ hower/focus + kontrast bilen çyzmak ýa-da çyzmak.
Düwmeler: tekst we nyşan ≥ 4. 5:1 guýmak; daşky gurşawa 3:1 ≥ guýmak.
Ýalňyşlyklar/üstünlik/duýduryşlar: reňke bil baglamaň; nyşanlary/tekst maslahatlaryny goşuň; tekstiň gapma-garşylygyny azyndan 4. 5:1.

8) Reňk duýgusy bozulan adamlar

• Deuteranopia/Protanopia (gyzyl-ýaşyl zona): goşmaça alamatlar bolmazdan "gyzyl vs ýaşyl" kombinasiýalaryndan gaça duruň.
• Tritanopiýa: gök-sary jübütleri aýratyn barlamak.
• Şekilleri we grafikalary düşnükli ediň: tekst bellikleri, ştrih/markerleriň dürli görnüşleri, guýma nagyşlary, segmentlere gollar.

9) Çaphana we fon

Esasy tekstiň kegli: 14-16 px minimal (web), 16-18 px kontent zolaklary üçin.
Hatara aralyk 1. 4–1. 6 ýokary kontrast fonunda okalmagy gowulandyrýar.
Ýeterlik däl kontrastda inçe çyzgylardan gaça duruň.
Reňkli fon teksti: Maksatly gatnaşyga girmek üçin fon doýgunlygyny azaldyň we/ýa-da ýagtylygy artdyryň.

10) Diagrammalar, tablisalar, grafikler

Setirler/sütünler ≥ 3:1 tora/fon.
Oklaryň we rowaýatlaryň gollary ≥ 4. 5:1.
Reňkden başga tapawutly şekilleri/nusgalary ulanyň.

11) Dinamiki/uýgunlaşdyryjy kontrast

Auto contrast: 4-e ýetmek üçin OKLCH: 'L' saýlamak arkaly saýlanan doldurgyja (mysal üçin) ters reňk hasaplaň. 5:1).
Ulgam sazlamalary: 'prefers-contrast', 'forced-colors', OS-yň ýokary-contrast usullaryna hormat goýuň.
Şahsylaşdyrma: programmada "Ýokary kontrast" sazlamak ('Δ L' -ni güýçlendirmek, marka ünsüni forma/nyşan arkaly markany saklamak bilen has bitarap birine çalyşmak).

12) Gözegçiligiň amallary we awtomatlaşdyrylmagy

12. 1 Dizaýnerler üçin

Maketlerdäki gapma-garşylygy barlaň (iki mowzukda we esasy fonlarda).
Komponentlerde (title/primary/secondary/hint) "kontrast yuvalary" giriziň.
Her komponent üçin kabul ederlikli fon kontekstlerini resminamalaşdyryň.

12. 2 Işläp düzüjiler üçin

Birlik-halperler: token-jübütler üçin synaglarda kontrasty we assertany hasaplamak funksiýasy.
Kontrast metriklerini barlamak bilen wizual snapshotlar (ekran-render + sampllar boýunça L1/L2 hasaplamak).
Stilleriň linterleri: "çig" reňkli gadaganlyk, diňe bellikler arkaly.

12. 3 CI/CD

'fg/bg' jübütleriniň hemmesini mowzuklarda we ýagdaýlarda barlamak.
Komponenti, görnüşi, mowzugy we hakyky manysyny görkezmek bilen düzgün bozmalar boýunça hasabat (mysal üçin 3. Talap edilende 9:1 4. 5:1).

13) iGaming aýratynlygy (goşmaça)

Açyk mahabat bannerleri we ýaryşlaryň kartoçkalary köplenç teksti "iýýärler". Plush/overley we fon doýgunlygyny çäklendirmek talap edilýär.
Jogapkär habarnamalaryň ulgam elementleri (18 +, çäkler, töwekgelçilikler) - kontrast boýunça AAA.
Liderleriň/koeffisiýentleriň tablisalarynda: sanlar we "+/-" belgileri ≥ 4. 5:1, ýeňşiň yşyklandyrylyşy - diňe reňk bilen däl (nyşanlar/bellikler).

14) Antipatternler

Ýagdaýy tapawutlandyrmak üçin diňe reňke bil baglaň.
Gapma-garşylygy hasaplamazdan reňkli fonda inçe çal şriftler.
"Dark Mode" -da "Gara-gara", mahabat zolaklarynda "açyk-açyk".
Jikme-jiklikler/ses bilen fonda tekst.

15) Rebyu üçin çek-sanawy

Esasy tekst

• ≥ 4. 5:1 (adaty), ≥ 3:1 (uly/ýagly).

Baglanyşyklar/düwmeler

• Düwmäniň teksti ≥ 4. 5:1 guýmak.
• Ýagdaýlaryň tapawudy ≥ 3:1 ýa-da aýdyň görkezijiler.

Nyşanlar/serhetler

• ≥ 3:1.

Gara/açyk mowzuklar

• Şol kontrast maksatlaryna ýetildi.

Media fonlary

• Overley/plaşka, koeffisiýenti saklanýar.

Elýeterlilik

• Reňkden başga-da fotografiki alamatlar bar.

Awtomatlaşdyryş

• CI/CD-de bellikler we komponentler boýunça kontrast synaglary.

16) Bellikleri girizmek (notasiýa mysaly)

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

Bellik: gymmatlyklar takmynan; jemleýji belli bir mowzukda kontrasty hasaplamak boýunça saýlanýar.

17) Topar üçin resminamalar

Gidlinlerde: kontrastyň maksatlaryny, dogry/nädogry jübütleriň mysallaryny, esasy komponentler üçin 'fg × bg' matrisini, media fonlary üçin düzgünleri we "Ýokary kontrast" re modeimini nädip açmalydygyny görkeziň.
"Kadadan çykmalar we sebäpler" atly göni sahypany saklaň (mysal üçin, rugsat berilýär 3. Uly displeý sözbaşysynyň dar ýagdaýynda 8:1).

Gysgaça gysgaça

Kontrast - tagam däl-de, ölçenen parametr. Maksatlaryňyzy belläň (AA/AAA), bellikler arkaly dolandyryň (OKLCH-de has gowusy), CI-de awtomatiki we maketlerde wizual barlaň, garaňky/açyk temalary we reňkli görüjileri göz öňünde tutuň. Bu okalmagy kepillendirýär, ýalňyşlyklary azaldýar we öwrülişigi ýokarlandyrýar.