קריטריון 1.4.3: ניגודיות (מינימום) רמה AA
בקצרה
קריטריון 1.4.3 ניגודיות (מינימום) (Contrast Minimum, רמה AA) דורש יחס ניגודיות של לפחות 4.5:1 בין טקסט רגיל לרקע שלו, ו-3:1 לטקסט גדול. הדרישה חלה גם על תמונות של טקסט. זהו קריטריון מחייב לפי ת"י 5568.
פרטי הקריטריון
| מספר | 1.4.3 |
|---|---|
| שם | ניגודיות (מינימום) (Contrast Minimum) |
| רמה | AA |
| גרסה | WCAG 2.0 |
| עיקרון | 1 - מורגש (Perceivable) |
| הנחיה | 1.4 - ניתן להבחנה |
| מחייב לפי ת"י 5568 | כן |
מה דורש קריטריון 1.4.3?
הקריטריון דורש שיחס הניגודיות הויזואלי בין טקסט לרקע שלו יעמוד על סף מינימלי מוגדר. יחס הניגודיות נמדד על פי נוסחת הלומינוסיות היחסית של WCAG ומתבטא כיחס (למשל 4.5:1). הדרישות על פי גודל הטקסט:
- טקסט רגיל (קטן מ-18pt, או קטן מ-14pt ומודגש) - יחס ניגודיות של לפחות 4.5:1.
- טקסט גדול (18pt ומעלה, או 14pt ומעלה ומודגש) - יחס ניגודיות של לפחות 3:1.
- תמונות של טקסט - אותן דרישות כמו טקסט רגיל.
חריגים שאינם נכללים בדרישה: לוגו ולוגוטיפ, טקסט דקורטיבי שאינו נושא מידע, טקסט בתמונות אינפורמטיביות כלליות, וטקסט השייך לפקדים מושבתים.
למי זה עוזר?
לכבדי ראייה שרואים תוכן אך מתקשים להבחין בטקסט בעל ניגודיות נמוכה. כן מסייע למבוגרים שיכולת הראייה שלהם פוחתת עם הגיל, לאנשים עם עיוורון צבעים שגוונים מסוימים נראים להם כמעט זהים, ולמשתמשים שגולשים בתנאי תאורה קשים (שמש ישירה על המסך, מסכים ישנים). ניגודיות טובה משפרת את קריאות הטקסט לכלל המשתמשים.
איך עומדים בקריטריון?
- בחרו צבעי טקסט ורקע שעומדים ביחס הנדרש - בדקו אותם בכלי מדידה לפני הפיתוח.
- הימנעו מטקסט אפור בהיר על רקע לבן, טקסט לבן על צבעים בהירים, וצבעים דומים בגוון.
- בדקו גם טקסט על גבי תמונות ורקעים מדורגים (gradient) - הניגודיות עשויה להשתנות לאורך הטקסט.
- ודאו שגם טקסט ב-placeholder של שדות קלט, טקסט בכותרות בצבעוניות, וטקסט על כפתורים עומדים ביחס הנדרש.
טיפ
כלי חינמי מומלץ: WebAIM Contrast Checker ו-Colour Contrast Analyser. ניתן לבדוק ניגודיות גם ישירות בכלי הפיתוח של Chrome (DevTools) תחת Accessibility.
איך בודקים?
- השתמשו בכלי מדידת ניגודיות (Colour Contrast Analyser, WebAIM, axe DevTools) לבדיקת כל שילובי הצבעים בדף.
- בדקו את כל גדלי הטקסט - ודאו שאתם מיישמים את הסף הנכון (4.5:1 לטקסט רגיל, 3:1 לטקסט גדול).
- שימו לב במיוחד לאלמנטים אינטראקטיביים: כפתורים, קישורים, שדות טופס.
- בדקו טקסט על גבי תמונות ורקעים מדורגים - דגמו נקודות שונות לאורך הטקסט.
- כלים אוטומטיים כגון axe יסמנו ניגודיות לא מספקת, אך לא בהכרח יתפסו את כל המקרים - בדיקה ידנית נדרשת.
שאלות נפוצות
מה יחס הניגודיות הנדרש לפי קריטריון 1.4.3?
לטקסט רגיל (מתחת ל-18pt או 14pt מודגש) - יחס של לפחות 4.5:1 בין צבע הטקסט לצבע הרקע. לטקסט גדול (18pt ומעלה, או 14pt ומעלה ומודגש) - יחס של לפחות 3:1.
מהי רמת הקריטריון 1.4.3?
רמה AA. הקריטריון נכלל ב-WCAG 2.0 ולכן הוא מחייב לפי ת"י 5568.
האם הדרישה חלה על לוגו וטקסט דקורטיבי?
לא. הקריטריון אינו חל על לוגוטיפ, טקסט המהווה חלק מלוגו, טקסט דקורטיבי שאינו נושא מידע, וטקסט בתמונות שאינן מהותיות. כמו כן, טקסט לא פעיל (כפתורים מושבתים) פטור מהדרישה.
מקורות
- W3C - Understanding SC 1.4.3 Contrast (Minimum) (w3.org/WAI)
- W3C - How to Meet WCAG (Quick Reference) (w3.org/WAI/quickref)
צריכים לעמוד בקריטריון הזה באתר שלכם?
ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.
לצ'ק-ליסט הנגישות