יחס ניגודיות הוא המספר שמודד כמה צבע הטקסט שונה מצבע הרקע. הסולם נע בין 1:1, כמו לבן על לבן, ל-21:1, שחור על לבן. התקן לא אוסר על אף צבע. הוא קובע רק כמה ניגודיות צריכה להיות בין הטקסט לרקע שלו. זה אחד הליקויים הנפוצים ביותר שאני מוצא, ואחד הקלים ביותר לבדוק.
יחס ניגודיות נדרש: הטבלה
| מה | רמה AA (נדרש) | רמה AAA |
|---|---|---|
| טקסט רגיל | 4.5:1 | 7:1 |
| טקסט גדול: 18pt (כ-24px) ומעלה, או 14pt מודגש (כ-18.5px) ומעלה | 3:1 | 4.5:1 |
| לוגו וטקסט דקורטיבי | אין דרישה | אין דרישה |
שימו לב: הגבול של טקסט גדול נמדד בנקודות (pt), ולא בפיקסלים. טקסט של 18 פיקסלים הוא עדיין טקסט רגיל, וצריך 4.5:1. גם רכיבים שאינם טקסט, כמו גבול של שדה טופס או אייקון של כפתור, צריכים ניגודיות של 3:1 לפי WCAG 2.1. זה לא חלק מ-5568, שמבוסס על 2.0, אבל זו פרקטיקה טובה.
הפלטה שלכם עוברת?
נבדוק את הצבעים באתר ונציע חלופות קרובות שעוברות.
איך בודקים יחס ניגודיות
- פותחים את כלי הפיתוח של כרום (F12) ובוחרים את הטקסט עם כלי הבחירה.
- בחלון הסגנונות, לוחצים על ריבוע הצבע. הכלי מציג את יחס הניגודיות, וסימון האם הוא עובר AA ו-AAA.
- אם היחס נמוך, משנים את הטקסט או את הרקע ובודקים שוב.
- בודקים גם מצבים: ריחוף, פוקוס, כפתור לא פעיל, וטקסט על תמונה.
איפה זה נכשל הכי הרבה
טקסט אפור בהיר על לבן, טקסט לבן על כפתור בצבע המותג, placeholder בשדות טופס, וטקסט על תמונת רקע. בכפתורים זה קריטי במיוחד, ראו כפתור נגיש. ניגודיות היא רק חלק מהקריאות. גם הגופן משפיע, ראו פונט נגיש.
הכי זול לבדוק ניגודיות בשלב העיצוב, בפלטת הצבעים, ולא אחרי שהאתר בנוי. בהדרכות שלנו למעצבי UI/UX זה אחד הנושאים הראשונים. לבדיקה של אתר קיים, ראו את עמוד הנגשת אתרים.
שאלות נפוצות על יחס ניגודיות
מה יחס הניגודיות הנדרש לטקסט רגיל?
4.5:1 ברמה AA, שנדרשת בתקן הישראלי.
מה נחשב טקסט גדול?
18pt ומעלה, או 14pt מודגש ומעלה. זה בערך 24 פיקסלים, או 18.5 פיקסלים מודגש.
צריך לבדוק ניגודיות גם ללוגו?
לא. לוגו פטור מדרישת הניגודיות.
איך בודקים ניגודיות בלי כלי מיוחד?
בכלי הפיתוח של כרום: בוחרים טקסט ולוחצים על ריבוע הצבע.
placeholder בשדה טופס צריך ניגודיות?
כן, אם הוא מעביר מידע. ועדיף לא לסמוך עליו במקום תווית.
מומחה להנגשת אתרי אינטרנט וקצין הגנת פרטיות מוסמך (DPO). מעל 9 שנות ניסיון בליווי ארגונים לעמידה בתקנות הנגישות, ת"י 5568 ובחוק הגנת הפרטיות.
חושבים שהאתר שלכם חשוף?
אל תישארו עם התחושה. שלחו כתובת אתר ונחזור אליכם עם תמונת מצב ראשונית, בלי התחייבות.