ניגודיות צבעים: איך בודקים ומה היחס הנדרש
לפי סעיף 1.4.3 של WCAG, שנדרש בת"י 5568, טקסט רגיל צריך יחס ניגודיות של 4.5:1 לפחות מול הרקע, וטקסט גדול (18 נקודות, או 14 נקודות מודגש) צריך 3:1. את היחס מחשבים מהבהירות היחסית של שני הצבעים. במחשבון שבדף מזינים צבע טקסט וצבע רקע ורואים מיד אם הצירוף עובר.
נבדק מול המקורות:
בקצרה
- טקסט רגיל: 4.5:1 לפחות (1.4.3, רמה AA).
- טקסט גדול: 3:1 לפחות. גדול = 18pt (בערך 24px) או 14pt מודגש (בערך 18.66px).
- לוגו וטקסט קישוטי פטורים מהדרישה.
- 7:1 הוא רמה AAA, ולא נדרש בישראל.
מחשבון ניגודיות
בחרו צבע או הקלידו קוד HEX. המחשבון משתמש בנוסחת יחס הניגודיות של WCAG, ומראה אם הצירוף עובר לטקסט רגיל ולטקסט גדול.
מחשבון ניגודיות
טקסט לדוגמה בגודל רגיל: כך ייראה הטקסט באתר.
טקסט גדול לדוגמה
יחס הניגודיות: 5.32:1
- טקסט רגיל (AA), נדרש 4.5:1: עובר
- טקסט גדול: 18pt, או 14pt מודגש (AA), נדרש 3:1: עובר
- טקסט רגיל (AAA, לא נדרש בישראל), נדרש 7:1: לא עובר
החישוב לפי הנוסחה של WCAG, בדפדפן שלכם. לא נשלח דבר לשרת.
מקור: WCAG 2.0: הגדרת יחס ניגודיות (contrast ratio) (נפתח בחלון חדש)
מה נחשב טקסט גדול
ההמרה מנקודות לפיקסלים היא הערכה, לפי 1pt = 1.333px בדפדפן. בעברית כדאי להיות שמרנים, כי אותיות עבריות נראות קטנות יותר מלטיניות באותו גודל.
| סוג טקסט | גודל | יחס נדרש |
|---|---|---|
| רגיל | פחות מ-18pt, או פחות מ-14pt מודגש | 4.5:1 |
| גדול | 18pt ומעלה (כ-24px) | 3:1 |
| גדול מודגש | 14pt מודגש ומעלה (כ-18.66px) | 3:1 |
| לוגו, טקסט בתמונה קישוטית, רכיב מושבת | כל גודל | אין דרישה |
איך מתקנים בלי לשנות את העיצוב
- כהו את צבע הטקסט האפור. אפור בהיר על לבן הוא הכשל הנפוץ ביותר.
- שמרו את צבע המותג לרקעים, כפתורים גדולים וקישוטים, והשתמשו בגרסה כהה שלו לטקסט.
- טקסט על תמונה: הוסיפו שכבת צבע כהה חצי־שקופה מתחת לטקסט.
- כפתור עם טקסט לבן: בדקו את צבע הכפתור מול הלבן, לא מול רקע הדף.
- placeholder בשדות טופס הוא טקסט לכל דבר, וצריך לעמוד ב-4.5:1.
טיפ: בדקו גם מצב hover ומצב מיקוד. כפתור שעובר במצב רגיל עלול להיכשל כשהעכבר עליו.
ניגודיות של רכיבים שאינם טקסט
WCAG 2.1 הוסיף את סעיף 1.4.11: גבולות של שדות, אייקונים חיוניים ומסגרת מיקוד צריכים ניגודיות של 3:1. בת"י 5568 הסעיף הזה לא מחייב, כי התקן מבוסס על WCAG 2.0, אבל הוא עוזר מאוד לאנשים עם ראייה ירודה, ולכן אנחנו ממליצים עליו.
שאלות נפוצות
מה יחס הניגודיות הנדרש לפי התקן הישראלי?
4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול, לפי סעיף 1.4.3 של WCAG שנדרש בת"י 5568.
לוגו צריך לעמוד בדרישת הניגודיות?
לא. WCAG פוטר לוגו וטקסט שהוא חלק מלוגו או משם מותג.
איך בודקים ניגודיות בכל האתר?
בדיקה אוטומטית, כמו הבודק באתר, מוצאת את רוב כשלי הניגודיות בטקסט. טקסט על תמונות ובמצבי hover צריך לבדוק ביד.
מקורות
המידע בדף מבוסס על: WCAG 2.0 (W3C, 2008) (נפתח בחלון חדש) · WCAG 2.0: הגדרת יחס ניגודיות (contrast ratio) (נפתח בחלון חדש) · W3C WAI: What's New in WCAG 2.1 (נפתח בחלון חדש) · ת"י 5568 חלק 1, ספטמבר 2023 (gov.il) (נפתח בחלון חדש)