טקסט אפור בהיר על רקע לבן יכול להיראות אלגנטי ומינימליסטי בעין מהירה — ולהיות בלתי קריא לגמרי למשתמשים עם ליקויי ראייה, אור שמש חזק על המסך, או פשוט עייפות עיניים רגילה בסוף יום עבודה. ניגודיות צבעים היא אחד הקריטריונים ה"טכניים" ביותר בנגישות — יש מספרים מדויקים לעמוד בהם — אבל גם אחד שהכי קל לבדוק ולתקן מראש.

בקיצור — מה נסביר במדריך

  1. מהם היחסים הנדרשים לפי WCAG
  2. למה לטקסט גדול מותר פחות ניגודיות
  3. איך בודקים יחס ניגודיות בפועל
  4. איך בוחרים פלטת צבעים נגישה מראש

מהם היחסים הנדרשים לפי WCAG

WCAG מגדיר יחס ניגודיות כמספר בין 1:1 (אין ניגודיות בכלל — צבע זהה) ל-21:1 (הניגודיות המקסימלית האפשרית — שחור מוחלט על לבן מוחלט). ברמה AA (הרמה המחייבת ברוב המקומות, כולל ישראל), הדרישה היא יחס של לפחות 4.5:1 בין טקסט רגיל לרקע שמאחוריו. ברמה AAA, החמורה יותר, הדרישה עולה ל-7:1.

למה לטקסט גדול מותר פחות ניגודיות

טקסט גדול קריא יותר גם עם ניגודיות נמוכה יותר, ולכן ה-WCAG מגדיר לו סף מקל: 3:1 ברמה AA (במקום 4.5:1), ו-4.5:1 ברמה AAA (במקום 7:1). "טקסט גדול" מוגדר כטקסט בגודל 18 נקודות ומעלה (כ-24px), או 14 נקודות ומעלה (כ-18.7px) אם הוא מודגש (bold). כותרות גדולות, למשל, יכולות "להרשות לעצמן" ניגודיות מעט נמוכה יותר מפסקת טקסט רגיל, ועדיין לעמוד בדרישה.

תרשים להמחשה השוואת יחסי ניגודיות שלוש דוגמאות טקסט על רקע עם יחסי ניגודיות שונים יחס ניגודיות בין טקסט לרקע טקסט לדוגמה 1.8:1 — ✕ נכשל טקסט לדוגמה 7.1:1 — ✓ עומד גם ב-AAA טקסט לדוגמה 5.4:1 — ✓ עומד ברמה AA טקסט רגיל: לפחות 4.5:1 · טקסט גדול (24px ומעלה, או 18.7px מודגש): לפחות 3:1 כלי בדיקה כמו WebAIM Contrast Checker נותנים את היחס המדויק לפני שמאשרים פלטת צבעים
שלוש דוגמאות טקסט על רקע: יחס נמוך מדי (1.8:1) נכשל אפילו ברמה הבסיסית; שני היחסים האחרים עומדים בדרישות AA ו-AAA בהתאמה.

איך בודקים יחס ניגודיות בפועל

אין צורך לחשב ידנית — כלים חינמיים כמו WebAIM Contrast Checker מאפשרים להזין קוד צבע של טקסט ורקע ומקבלים מיד את היחס המדויק ואת הציון (עובר/נכשל) לכל רמה. שווה לבדוק לא רק טקסט על רקע אחיד, אלא גם טקסט על תמונות רקע או גרדיאנטים — שם הניגודיות יכולה להשתנות בין אזורים שונים של אותה תמונה, ולכן כדאי לבדוק את הנקודה הכי "בעייתית".

💡 טיפ מעשי

לא רק טקסט: אותה דרישת ניגודיות (בסף מקל יותר, 3:1) חלה גם על רכיבי ממשק גרפיים כמו קווי מתאר של שדות טופס, אייקונים פונקציונליים, וגבולות כפתורים — לא רק על אותיות.

איך בוחרים פלטת צבעים נגישה מראש

הדרך היעילה ביותר היא לבדוק ניגודיות בשלב עיצוב מסמך התבנית (Template), לא בכל מסמך בנפרד. כשבוחרים את צבעי המותג לכותרות, טקסט גוף, וקישורים, כדאי לוודא מראש שכל שילוב טקסט-רקע שבו משתמשים בפועל עומד ב-4.5:1 לפחות. כך כל מסמך חדש שנוצר מהתבנית "יורש" ניגודיות תקינה אוטומטית, במקום לבדוק כל מסמך בנפרד אחרי שהוא כבר נכתב.

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

הכלי שלנו בודק ניגודיות צבעים כחלק מהסריקה האוטומטית של כל קובצי ה-PDF באתר.

לסריקת האתר בחינם ←