Интерфейси контраст ва хондан

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/base' ≥ 7:1 (AAA барои матни интиқодӣ)
• 'fg/миёна' ↔ 'bg/base' ≥ 4. 5:1
• 'fg/хомӯш' ↔ 'bg/нозук' ≥ 3:1 (матни хидмат)
• 'border/default' ↔ 'bg/base' ≥ 3:1 (сарҳади майдонҳо, кортҳо)
• 'ғайрифаъол/пешфарз' ↔ 'bg/base' ≥ 4. 5:1 (пайвандҳо/тугмаҳо)
• 'ғайрифаъол/маъюбон' давлатҳои фаъоли тақлидӣ нестанд; коҳиш додани контраст ва хусусиятҳои курсор/ARIA -ро истифода баред.

• сабукии асосии мавзӯъ (L), пас инҳироф 'Δ қабатҳои 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 + contrast ≥ 3:1 бо матни оддӣ.
Тугмаҳо: матн ва нишонаи ≥ 4. 5:1 пур кардан; 3:1 ≥ пур кардани муҳит.
Хатогиҳо/муваффақият/огоҳиҳо: ба ранг такя накунед; илова кардани нишонаҳо/матн; ҳадди аққал 4 контрасти матнро таъмин кунед. 5:1.

8) Одамони дорои нуқсонҳои ранг

• Deuteranopia/Protanopia (минтақаи сурх-сабз): Бе аломатҳои иловагӣ аз таркиби "сурх ва сабз" канорагирӣ кунед.
• Тританопия: ҷуфтҳои кабуд-зард барои алоҳида тафтиш кардан.
• Шаклҳо ва графикҳоро равшан созед: тамғакоғазҳои матнӣ, намудҳои гуногуни зарбаҳо/нишонаҳо, намунаҳои пур кардан, сарлавҳаҳои сегмент.

9) Типография ва замина

Андозаи бадан: 14-16 px ҳадди аққал (веб), 16-18 px барои минтақаҳои мундариҷа.
Фосилаи хати 1. 4–1. 6 хонишро дар заминаи контрасти баланд беҳтар мекунад.
Дар муқоиса бо нокифоя сабкҳои нозукро пешгирӣ кунед.
Матн дар заминаи ранга: Сатҳи пасзаминаро кам кунед ва/ё сабукиро барои расидан ба таносуби ҳадаф зиёд кунед.

10) Диаграммаҳо, ҷадвалҳо, графикҳо

Хатҳо/сутунҳо ≥ 3:1 ба шабака/замина.
Нишонаҳо ва афсонаҳои меҳвар ≥ 4. 5:1.
Шаклҳо/намунаҳои фарқкунандаи берун аз рангро истифода баред.

11) Муқоисаи динамикӣ/мутобиқшавӣ

Муқоисаи худкор: ранги контрасти матнро ба пуркунии интихобшуда ҳисоб кунед (мас. тавассути OKLCH: бозии 'L' барои расидан ба 4. 5:1).
Танзимоти система: эҳтиром 'афзалият-контраст', 'рангҳои маҷбурӣ', режими ОС-контрасти баланд.
Фардикунонӣ: муқаррар кардани "Контрасти баланд" дар барнома (мустаҳкам кардани 'Δ L', иваз кардани аксенти бренд бо рақамҳои бетараф ҳангоми нигоҳ доштани шахсияти бренд тавассути шакл/нишонаҳо).

12) Равандҳои назорат ва автоматизатсия

12. 1 Барои тарроҳон

Муқоисаро аз тарҳҳо санҷед (ҳам дар мавзӯъ ва ҳам дар заминаи асосӣ).
"Слотҳои контраст" - ро дар ҷузъҳо ворид кунед (сарлавҳа/ибтидоӣ/дуюмдараҷа/ишора).
Ҳуҷҷат заминаҳои пасзаминаи дурустро барои ҳар як ҷузъ.

12. 2 Барои таҳиягарон

Ёрдамчиёни воҳид: функсияи ҳисоб кардани контраст ва дар санҷишҳо барои ҷуфтҳои нишона тасдиқ мекунад.
Суратҳои визуалӣ бо санҷиши ченакҳои контраст (намоиши экран + намуна L1/L2 ҳисоб).
Линтерҳои услубӣ: манъи ранги "хом", танҳо тавассути токенҳо.

12. 3 V CI/CD

Ҳамаи ҷуфтҳои 'fg/bg' -ро дар мавзӯъҳо ва ҳолатҳо тафтиш мекунад.
Ҳисоботи вайронкунӣ бо ҷузъ, вариант, мавзӯъ ва арзиши воқеӣ (масалан, 3. 9:1 бо зарурияти 4. 5:1).

13) Хусусиятҳои IGaming (ихтиёрӣ)

Баннерҳои дурахшон ва кортҳои мусобиқа аксар вақт матнро мехӯранд. Плита/сарпӯш ва маҳдудияти пур кардани замина талаб карда мешавад.
Унсурҳои системаи огоҳиномаҳои интиқодӣ (18 +, маҳдудиятҳо, хатарҳо) - баръакс AAA.
Дар пешсафон/коэффисиентҳо: рақамҳо ва аломатҳои "+/-" ≥ 4. 5:1, бо ишора кардани бурд - на танҳо бо ранг (нишонаҳо/барчасбҳо).

14) Антипаттернҳо

Барои фарқ кардани ҳолат танҳо ба ранг такя кунед.
Ҳуруфҳои хокистарии лоғар дар заминаи ранга бидуни ҳисоб кардани контраст.
"Торик дар торикӣ" дар ҳолати торик, "дурахшон" дар минтақаҳои таблиғотӣ.
Матн дар замина бо тафсилот/садои бе мурдан.

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 санҷед ва дар тарҳҳо ба таври визуалӣ санҷед, мавзӯъҳои торик/сабук ва одамони дорои нуқсонҳои рангро ба назар гиред. Ин хонишро кафолат медиҳад, хатогиҳоро коҳиш медиҳад ва табдилдиҳиро зиёд мекунад.