ממשקי ניגוד וקריאה

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.

• אם כן, אם 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 מודגש או time 18 pt (רגיל): ניגוד לפחות 3:1 (AA).
שאר הטקסט: ניגוד לפחות 4. 5:1 (אלכוהוליסטים אנונימיים).
AAA (יכולת קריאה מוגברת): 7:1 לטקסט רגיל; 4. 5-1 עבור אחד גדול.
איקונוגרפיה ואלמנטים חשובים שאינם מצולמים (גבולות של שדות קלט, תיבות צ 'ק, מתגים, מדדי שגיאות): 3:1 עם רקע.
מצבים (ריחוף/מיקוד/לחץ/נכה) חייבים להיות לפחות 3:1 להבחין בין מצבים או עם רקע, בנוסף לאינדיקטורים שאינם מצולמים מפורשים (קו תחתי קישור, צללים/מסגרות, שינוי עובי).

4) מערכת עיצוב: אסימוני ניגוד

אנו ממליצים שמערכת העיצוב תרשום את הניגוד כתכונה של אסימונים.

• ↔ bg/base 7:1 (AAA לטקסט ביקורתי)
• 'fg/משני' ↔ 'bg/base' v4. 5:1
• 'fg/med' ↔ 'bg/עדין' -3: 1 (טקסט שירות)
• 'בורדר/ברירת מחדל' ↔ 'bg/base' -3: 1 (גבולות של שדות, קלפים)
• 'לא פעיל/ברירת מחדל' ↔ 'bg/base' -4. 5:1 (קישורים/כפתורים)
• לא פעיל/נכה לא צריך לחקות מדינות פעילות; השתמש בהפחתת ניגודיות ותכונות הסמן/ARIA.

• קלילות בסיסית של הנושא (L), ואז סטיות 'Tonnel' L' for שכבות/משטחים ('bg/עדין', 'bg/מוגבה'),
• תקן זוגות ניגודים מינימליים במבחנים.

5) נושאים בהירים וחשוכים

נושא האור: הטקסט הוא כמעט שחור (לא טהור # 000, אלא גוון חם/קר), הרקע הוא לבן עד מעט כהה כדי להפחית ”נוצץ”.
ערכת נושא אפלה: הימנע מנקוי # 000 רקע - גרפיט/פחם עמוקים עם L ו ־ 0. 12–0. 16 מפחית את הזוהר; לרכך טקסט לבן ל 0. 9.
שמור על אותן מטרות מנוגדות בשני הנושאים; אין לאפשר למבטאים צבעוניים לאבד את יכולת הקריאה על רקע כהה (לעתים קרובות יש צורך בהזזה ”Honey L” וירידה ברוויה).

6) טקסט בתמונות ובסרטונים

השתמש במשקפים (שכבת שיפוע/שקוף 40-60%) או מת מתחת לטקסט.
לתקן לפחות 4. 5:1 בין הטקסט והרקע המקומי של המוות.
עבור וידאו דינמי - רקע אדפטיבי/כיסוי על ידי ניתוח הבהירות של המסגרת (דגימת אזור מרכז/רקע).

7) מצבים ואינטראקטיביות

אזכורים חייבים להיות מובחנים לא רק על ידי צבע: קו תחתון ברירת מחדל או קו תחתי על ריחוף/מיקוד + ניגוד 3:1 עם טקסט רגיל.
כפתורים: טקסט וסמל 4. 5:1 למלא; 3:1 למלא לסביבה.
שגיאות/הצלחה/אזהרות: לא להסתמך על צבע; הוסף סמלים/טקסט פלסט; לספק לפחות 4 ניגודי טקסט. 5:1.

8) אנשים עם ליקויי צבע

• Deuteranopia/Protanopia (אזור אדום-ירוק): הימנע משילובי אדום נגד ירוק ללא סימנים נוספים.
• טריטנופיה: זוגות כחולים-צהובים לבדוק בנפרד.
• הפוך צורות וגרפים ברורים: תוויות טקסט, סוגים שונים של שבץ/סמנים, תבניות מילוי, כיתובי מקטעים.

9) טיפוגרפיה ורקע

גודל הגוף: 14-16 px מינימום (web), 16-18 px עבור אזורי תוכן.
מרווח קו 1. 4–1. 6 משפר את היכולת מול רקע ניגודי גבוה.
הימנע מסגנונות עדינים על ניגודים לא מספיקים.
טקסט על רקע צבעוני: הפחת את רווית הרקע ו/או להגביר את הקלות כדי להגיע ליחס היעד.

10) תרשימים, שולחנות, גרפים

שורות/עמודות 3:1 לרשת/רקע.
תוויות ציר ואגדות 4. 5:1.
השתמש בצורות/תבניות מובחנות מעבר לצבע.

11) ניגוד דינמי/אדפטיבי

ניגודיות אוטומטית: לחשב את צבע הניגודיות של הטקסט למילוי הנבחר (למשל: להתאים 'I' to להגיע 4. 5:1).
הגדרות מערכת: כבוד ”מעדיף ניגוד”, ”מאולץ צבעים”, מצבי מערכת הפעלה ניגודיות גבוהה.
Personalization: הגדרת ”ניגודיות גבוהה” ביישום (חיזוק ”Honely 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 בניגוד.
בלוחות מובילים/מקדמים: מספרים וסימנים ”+/” Window 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 ופריסות ויזואליות, לקחת בחשבון נושאים כהים/קלים ואנשים עם ליקויי ראיית צבע. זה מבטיח יכולת קריאה, מפחית שגיאות ומגדיל את ההמרה.