Հակասական ինտերֆեյսներ և ընթերցանություն

1) Ինչու՞ հակադրություն

Հակադրությունը որոշում է, թե որքան արագ և անխուսափելի օգտագործողը ճանաչում է տեքստը, իկոնիկները և վիճակը։ Բարձր հակադրություն

նվազեցնում է ճանաչողական բեռը և հոգնածությունը,

բարելավում է ինտերֆեյսի արագությունը,

մեծացնում է տեսողության և գունային ընկալման մարդկանց հասանելիությունը,

նվազեցնում է փոխկապակցված սցենարների սխալների քանակը (վճարումներ, ձևեր, ապացույցներ)։

2) Հիմնական հասկացությունները և բանաձևերը

2. 1 Հակադրություն WCAG

Հակադրությունը առջևի պլանի և ֆոնի պայծառության հարաբերությունն է

Contrast = (L1 + 0. 05) / (L2 + 0. ե.), որտեղ "L1" -ը L2 "," L "հարաբերական պայծառություն է (0.. 1)։

2. 2 Հարաբերական պայծառություն (sRGB)

1. Բերեք R, G, B բաղադրիչները 0.. 1 սահմաններում։

2. Linearization sRGB

եթե '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-ը հարմար է ձեռքի շարժիչի համար, բայց հավասարաչափ չէ։

Lab/LCH/OKLCH-ը ավելի մոտ է մարդու ընկալմանը։ OKLCH-ը հարմար է պայծառ/հագեցվածության համակարգված տատանումների համար, երբ պահպանվում է ընթերցանությունը։

3) Նորմերն ու նպատակները (WCAG 2։ 2)

Տեքստը 2414 pt bold կամ 2418 pt (սովորական) ՝ հակադրություն առնվազն 3: 1 (AA)։

Մնացած տեքստը 'հակադրություն առնվազն 4։ 5:1 (AA).

AAA (կարդացածի բարձրացում) '7: 1 սովորական տեքստի համար; 4. 5:1 մեծ համար։

Իկոնոգրաֆիան և կարևոր նեֆոտոգրաֆիկ տարրերը (մուտքի դաշտերի սահմանները, չեկբոքսները, անջատիչները, սխալների լուծիչները) 'ֆոնի հետ։

Վիճակը (hover/focus/pressed/wwww.abled) պետք է ունենան տարբերություններ ոչ պակաս, քան 3: 1 միջև, կամ ֆոնի հետ, գումարած ակնհայտ նավթագրական լուծիչները (ընդգծելով հղումները, ստվերը/շրջանակները, հաստության փոփոխությունը)։

4) Դիզայնի համակարգը 'հակաբեղմնավորիչներ

Պլանավորվում է դիզայնի համակարգում ամրագրել հակադրությունը որպես հոսանքների հատկություն։

Մակարդակների օրինակ

'fg/primary' bg/bert '247: 1 (AAA կրիտիկական տեքստի համար)

`fg/secondary` ↔ `bg/base` ≥ 4. 5: 1

"fg/muted 'bg/www.tle '353: 1 (պաշտոնական տեքստը)

'border/wwww.d.me' bg/brig '243: 1 (դաշտերի սահմաններ, քարտեր)

`interactive/default` ↔ `bg/base` ≥ 4. 5: 1 (հղում/կոճակներ)

«interactive/www.abled» չպետք է ընդօրինակել ակտիվ վիճակը։ օգտագործեք հակադրության նվազեցում և ARIA ատրիբուտներ։

Խորհուրդ 'պահպանեք հոսանքները OKLCH-ում

www.lt թեմաներ (L), ապա շեղումները '"Winl L' շերտերի/մակերեսների համար (" bg/www.tle "," bg/elevated "),

գրանցեք նվազագույն հակառակ զույգերը թեստերում։

5) Լուսավոր և մութ թեմաներ

Լուսավոր թեմա 'տեքստը գրեթե սև է (ոչ թե մաքուր # 000, այլ տաք/ցուրտ երանգ), ֆոնը' սպիտակամորթից մինչև մի փոքր տոնայնացված, որպեսզի նվազեցնի «փչացումը»։

Մութ թեմա 'խուսափեք մաքուր # 000 ֆոն - խորը գրաֆիտ/ածուխ L-0։ 12–0. 16 նվազեցնում է լուսավորությունը. սպիտակ տեքստը մեղմացրեք մինչև L 240։ 9.

Պահպանեք նույն հակադրությունները երկու թեմաներում. թույլ մի տվեք, որ գունավոր շեշտադրումները կորցնեն ընթերցանությունը մութ ֆոնի վրա (հաճախ անհրաժեշտ է «Core L» և նվազեցնել հարստությունը)։

6) Պատկերների և տեսահոլովակների տեքստը

Օգտագործեք օվերելներ (գրադիենտ/կիսաթափանցիկ շերտ 40-60%) կամ տեքստի տակ գտնվող սալիկներ։

Ամրացրեք առնվազն 4։ 5: 1 տեքստի և տեղական ֆոնի միջև։

Դինամիկ տեսահոլովակի համար 'հարմարվողական ֆոն/վանդալներ շրջանակի պայծառության վերլուծման համար (կենտրոնական/կեղծ ոլորտի սեմպլինգ)։

7) Վիճակը և ինտերակտիվ լինելը

Հղումները պետք է տարբերվեն ոչ միայն գույնով 'ընդգծելով լռելյայն կամ ընդգծելով hover/focus + հակադրությունը' 3: 1 սովորական տեքստով։

Կոճակներ ՝ տեքստ և սրբապատկեր թիվ 4։ 5: 1 դեպի ծոց; ծոցը 3:1 է շրջակա միջավայրին։

Սխալներ/հաջողություններ/նախազգուշացումներ, մի ապավինեք գույնին։ ավելացրեք սրբապատկերներ/տեքստային հուշումներ։ առնվազն 4 տեքստի հակադրություն տրամադրեք։ 5:1.

8) Գունավոր ընկալման խախտումներ ունեցող մարդիկ

Պահպանեք տարբերությունները ռեժիմներում

Deuteranopia/Delanopia (կարմիր-կանաչ գոտի) 'խուսափեք «կարմիր vs կանաչ» համադրություններից առանց ավելացված նշանների։

Tritanopia: կապույտ-դեղին զույգեր ստուգել առանձին։

Ձևերն ու գրաֆիկները պարզ դարձրեք ՝ տեքստային կոդեր, տարբեր տեսակի հարվածներ/մարկերներ, ծոցի նախշեր, սեգմենտներ։

9) Տպագրություն և ֆոն

Հիմնական տեքստի քեգլը '14-16 px նվազագույն (web), 16-18 px կոնտենտային գոտիների համար։

Միջտարածաշրջանային թիվ 1։ 4–1. 6-ը բարելավում է ընթերցանությունը բարձր հակադրության ֆոնի վրա։

Խուսափեք աննշան հակադրություններից։

Տեքստը գունավոր ֆոնների վրա 'նվազեցրեք ֆոնի և/կամ ավելացրեք պայծառությունը, որպեսզի հասնեք նպատակային հարաբերությանը։

10) Դիագրամներ, սեղաններ, գրաֆիկա

Գծեր/սյունակներ թիվ 3: 1 ցանցին/ֆոնին։

Առանցքի ստորագրությունները և լեգենդները ՝ 4։ 5:1.

Օգտագործեք տարբեր ձևեր/փամփուշտներ բացի գույներից։

11) Դինամիկ/հարմարվողական հակադրություն

Directrance: Հաշվեք տեքստի հակասական գույնը ընտրված ծոցի (օրինակ ՝ OKLCH-ի միջոցով 'ընտրություն' L '4-ի համար։ 5:1).

System: Հարգեք 'wwww.fers-www.r.r.ru "," forced-colors ", high-ww.r.ru ՕՀ ռեժիմները։

Կերպարացում '"Բարձր հակադրություն" կարգաբերումը խմբագրության մեջ (www.L. ", բրենդային ակցենտների փոխարինումը ավելի չեզոք ձևով/իկոնայի միջոցով)։

12) Գործընթացները և կառավարման ավտոմատացումը

12. 1 Դիզայներների համար

Ստուգեք հակադրությունը մակետների վրա (երկու թեմաներում և հիմնական ֆոնների վրա)։

Ներկայացրեք «հակադիր արցունքները» բաղադրիչներում (title/primary/secondary/hint)։

Փաստաթղթավորեք թույլատրելի ֆոնային համատեքստերը յուրաքանչյուր բաղադրիչի համար։

12. 2 Մշակողների համար

Unit-helpers 'հակաբիոտիկների հաշվարկման ֆունկցիա և token-զույգերի թեստերում։

Տեսողական սարքավորումը, որը ստուգում է հակամարմինները (սքրինային ռենդեր + հաշվարկել L1/L2 սեմպլով)։

Լինդերները նշում են, որ «հում» գույնի արգելքը միայն հոսանքների միջոցով է։

12. 3 CI/CD

Բոլոր զույգերի «fg/bg» ստուգումը թեմաներում և պայմաններում։

Խախտումների զեկույցը, որը ցույց է տալիս բաղադրիչը, տարբերակը, թեմաները և իրական արժեքը (օրինակ ՝ 3։ 9:1 պահանջվող 4։ 5:1).

13) iGaming-ի առանձնահատկությունները (oporational)

Պայծառ պրոմո-բանները և մրցույթների քարտերը հաճախ «ուտում են» տեքստը։ Հարկավոր է լաց լինել և սահմանափակել ֆոնի հագեցվածությունը։

Ռուսական ծանուցման տարրերը (18 +, լիմիտներ, ռիսկեր) - AAA հակադրությամբ։

Առաջնորդների/գործակիցների մեջ 'թվեր և նշաններ «+/-» 244։ 5: 1, հաղթելու լուսավորությունը ոչ միայն գույնով (իկոնիկներ/105)։

14) Անտիպատերնի

Ապավինել միայն գույներին, որոնք տարբերվում են վիճակից։

Գունավոր ֆոնի վրա բարակ մոխրագույն տառատեսակներ առանց հակադրության հաշվարկելու։

«Մութ-մութ» -ը Dark Mode-ում, «պայծառ-պայծառ» արդյունաբերական գոտիներում։

Տեքստը մասերի/աղմուկի ֆոնի վրա առանց կրակի։

15) Խանդի համար չեկի ցուցակ

Հիմնական տեքստը

• ≥ 4. 5:1 (սովորական), 243:1 (մեծ/ճարպային)։

Հղումներ/կոճակներ

• Թիվ 4 կոճակի տեքստը։ 5:1 դեպի ծոց։
• Պետությունների տարբերությունը 3:1 կամ ակնհայտ ցուցանիշներ է։

Իկոնկի/սահմաններ

• 353: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 nobg» -ը, լրատվամիջոցների ֆոնների կանոնները և ինչպես ներառել «Բարձր հակադրություն» ռեժիմը։

Պահպանեք «Բացառություններ և պատճառներ» կենդանի էջը (օրինակ, թույլատրված է 3։ 8: 1 մեծ ցուցադրական վերնագրի նեղ սենյակում)։

Ռուսական ռեզյումե

Հակադրությունը չափված պարամետրն է, ոչ թե համը։ Նշեք նպատակները (AA/AAA), դրանք կառավարեք հոսանքների միջոցով (ավելի լավ է OKLCH-ում), ինքնաբերաբար ստուգեք CI-ում և տեսողական մոդելներում, հաշվի առեք մութ/պայծառ թեմաները և մարդիկ գունային տեսողության խախտումներով։ Դա երաշխավորում է ընթերցանությունը, նվազեցնում է սխալները և բարձրացնում ծրարը։