הערה: כאשר משתמש עם לקות ראייה אינו יכול לקרוא טקסט באתר שלך עקב ניגודיות לא מספקת, זה לא רק חוויית משתמש ירודה — זו איום ישיר של תביעות משפטיות. תקן WCAG 2.1 AA הפך לסטנדרט דה-פקטו (ראה הנחיות נגישות לתוכן אינטרנט): יחס ניגודיות מינימלי של 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול (18pt רגיל או 14pt מודגש). ניגודיות WCAG היא אחת הבעיות הנפוצות ביותר שאנו מתקנים. גודל גופן ונגישות קשורים紧密: טקסט גדול מאפשר ניגודיות נמוכה יותר. ביצענו מעל 50 ביקורות נגישות (5+ שנות ניסיון) ואנו יודעים כיצד להביא את הניגודיות והגופנים שלך לעמידה בדרישות ללא שכתוב כל ה-CSS. חיסכון בזמן בבדיקות ידניות יכול להגיע ל-70%, ואתה נמנע מסיכונים משפטיים משמעותיים. תמחור הביקורת תלוי בהיקף הפרויקט וזמין לפי בקשה.
בעיות עם ניגודיות וגופנים
טעות אופיינית היא שימוש בצבע הדגשה יחיד לטקסט על כל הרקעים. אפילו מעצבים ממותגים גדולים לפעמים מאפשרים ניגודיות של 2.8:1 להנחיות בשדות קלט או 2.1:1 לכפתורים מושבתים. מעברי צבע (גרדיאנטים), שכבות שקופות למחצה ומצבי ריחוף הם מאתגרים במיוחד — בדיקות אוטומטיות לעיתים קרובות מפספסות אותם.
אנו משלבים שיטות בדיקה אוטומטיות (Pa11y, Axe) וידניות. האוטומציה תופסת עד 80% מהשגיאות, אך 20% הנותרים דורשים עין אנושית. השווה בין הגישות המרכזיות:
| שיטה | כיסוי | זמן לדף | מה מפספסים |
|---|---|---|---|
| אוטומטי (Pa11y עם WCAG2AA) | 70–80% | 2–5 שניות | מעברי צבע, טקסט על תמונות, אנימציות |
| ידני (Axe + בדיקה ויזואלית) | 95%+ | 10–15 דקות | מצבים נדירים, רקעים מורכבים |
הכלים היעילים ביותר לבדיקת ניגודיות
למדידה מהירה של זוג צבעים, בודק הניגודיות של WebAIM הוא כלי מקוון נוח שמציג את היחס ורמת AA/AAA. לביקורת המונית, אנו משתמשים ב-Pa11y עם תצורה מותאמת אישית. אנו מטמיעים בדיקה לכל דף בצינור CI — אם דף כלשהו נכשל, הבנייה נשברת.
npx wcag-contrast "#333333" "#ffffff" # 12.63:1 — отлично הערה: בדיקת ניגודיות מקוונת חייבת להתחשב גם במצבים. לשם כך אנו משתמשים ב-Axe Core עם תצורות WCAG 2.1 AA.
כיצד אנו משיגים עמידה ב-WCAG AA תוך 5 ימים
התהליך כולל חמישה שלבים:
- ביקורת — הפעלת Pa11y ו-Axe על כל הדפים, בדיקה ויזואלית של מצבים מורכבים.
- עיצוב — יצירת משתני CSS סמנטיים שמבטיחים ניגודיות.
- יישום — החלפת צבעים במשתנים, תיקון גופנים ורווחים.
- בדיקה — הפעלה חוזרת של בדיקות אוטומטיות ובדיקה ידנית של מסכים מרכזיים.
- פריסה והדרכה — שילוב בדיקת CI, העברת תיעוד ותצורות.
גישה זו מהירה פי 4 מתיקון ידני כאוטי של כל אלמנט. לדוגמה, בפרויקט מסחר אלקטרוני, בדיקה אוטומטית פספסה כרטיס עם ניגודיות של 4.1:1 על רקע אפור — החשכנו את צבע הטקסט ותיעדנו טוקן חדש. תוצאה: הניגודיות הפכה ל-4.6:1, וכל מערכת העיצוב עודכנה ביום אחד.
מערכת עיצוב ומשתני CSS
מה לעשות כשניגודיות נכשלת במערכת עיצוב?
תרחיש אופייני: הטוקן npx wcag-contrast "#333333" "#ffffff" # 12.63:1 — отлично נותן ניגודיות של 4.2:1 במקום 4.5:1. הפתרון הוא או להחכים את הצבע או להגדיל את גודל הגופן לגדול. אנו ממליצים על הראשון: שנה את הצבע במקום אחד, לא את הגודל בכל רכיב.
דוגמה לתיקון:
:root {
--color-text-primary: #1a1a1a; /* 17.1:1 AAA */
--color-text-secondary: #595959; /* 7.0:1 AA */
--color-text-muted: #767676; /* 4.54:1 AA */
--color-accent: #005EA2; /* 5.9:1 AA */
}היה --color-text-muted (4.0:1) → הפך ל-:root { --color-text-primary: #1a1a1a; /* 17.1:1 AAA */ --color-text-secondary: #595959; /* 7.0:1 AA */ --color-text-muted: #767676; /* 4.54:1 AA */ --color-accent: #005EA2; /* 5.9:1 AA */ } (4.54:1). שינוי בהירות של 10% פתר את הבעיה.
אוטומציה של בדיקות ב-CI
כדי למנוע שבירת ניגודיות בכל commit, אנו משלבים את Pa11y ב-GitHub Actions.
// .pa11yrc.json
{
"standard": "WCAG2AA",
"runners": ["axe", "htmlcs"],
"ignore": ["color-contrast"]
}הצינור עוצר את הבנייה אם בדיקה כלשהי נכשלת — הפגם לעולם לא מגיע לייצור.
תוצאות ואחריות
יישום שיטתי של WCAG משתלם תוך 3–6 חודשים באמצעות חיסכון בבדיקות והיעדר תביעות. השווה בין הגישות:
| גישה | עלות יישום | סיכון לקנס | זמן תחזוקה |
|---|---|---|---|
| תיקונים כאוטיים | נמוכה | גבוה | גבוה |
| ביקורת שיטתית + CI | בינונית | מינימלי | נמוך |
ציר זמן: בין 3 ל-5 ימי עבודה לפרויקט בגודל ממוצע. אנו מציינים צירי זמן מדויקים לאחר סקירת הקוד שלך.
מה העבודה שלנו כוללת
- ביקורת מלאה של ניגודיות לכל מצבי ה-UI (רגיל, ריחוף, פוקוס, מושבת) על 2–3 רקעים שונים.
- ביקורת של גדלי גופנים וגבהי שורות בדסקטופ ומובייל.
- יצירה או שיפור של מערכת עיצוב (משתני CSS, תיעוד).
- שילוב Pa11y ב-CI של הפרויקט שלך.
- הדרכת צוות: כיצד לבדוק ניגודיות ב-Figma וב-DevTools.
- אחריות: אם דף חדש נכשל ב-AA לאחר יישום הטוקנים שלנו, אנו מתקנים זאת בחינם.
עם מעל 100 פרויקטים שהושלמו ורקורד של 5 שנים, אנו מביאים מומחיות מוכחת למסע הנגישות שלך. צור קשר כדי לבקר את הפרויקט שלך. הזמן בדיקה חינמית של 5 דפים — ראה את איכות העבודה שלנו.