בדיקת קונטרסט באתרי אינטרנט כתנאי לנגישות

נושא חוק נגישות אתרי אינטרנט ממשיך להסעיר את תחום בניית האתרים וגורר לא מעט מאמרים (בעיקר נגד). באופו אישי אני חושב שהשד לא כל כך נורא. אולי בגלל שאני שנים עובד בשוק הבינלאומי (אירופה או ארצות הברית) ושם כל אתר חייב להיות נגיש. אבל למחשבות שלי ושל אחרים אין כל כך השפעה בעניין הזה – התקנה עברה והיא מחייבת. אני יכול לעשות הוא להעביר את הידע והניסיון שלי בתחום הנגישות על מנת שתוכלו להבין יותר טוב את הכללים ולבנות אתרי אינטרנט נגישים. בחלק הנגישות באתר זה יש מאמרים על נגישות שמסבירים כמה עקרונות חשובים. בניית אתר נגיש היא לא בשמים והיא דבר יחסית קל לביצוע.

אחד הדברים הכי מלחיצים בבדיקות נגישות הוא בדיקת הקונטרסט – או בעברית הניגודיות (או ניגוד). מה זה בדיוק? באופן עקרוני זה מה שמאפשר לנו להבדיל בין עצם מסוים לעצם אחר או בבניית אתרים בין טקסט לבין הרקע שלו. למשל באינטרנט ישראל, בעיצוב הנוכחי, הטקסט הוא בצבע #555 והרקע הוא לבן (fff#). על מנת שאנשים עם ליקויי ראייה יוכלו לקרוא את הטקסט בקלות, צריך להיות יחס ניגודיות שה-W3C, הקונסורציום העולמי שכתב את תקנות הנגישות שהן התקן המחייב גישראל, קבע. איך מחשבים את הניגודיות? יש את אופן החישוב בחלק המדבר על ניגודיות:

(L1 + 0.05) / (L2 + 0.05),

L1 זה ערך התאורה של הצבע הבהיר ו-L2 הוא ערך התאורה של הצבע הכהה. ניגודיות יכולה לנוע בין 1:1 (כלומר אין ניגודיות כלל בין שני הצבעים – שחור מול שחור למשל) לבין 21:1 (ניגודיות מקסימלית).

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

אז איזו רמת ניגודיות אנחנו צריכים?

אין תקן לדרגה A של אתרי אינטרנט – לאחר בדיקה מעמיקה בתקנות הנגישות אין שום הנחיה בנוגע לניגודיות הטקסט אם אתם מכוונים אל דרגת A של הנגישות (הדרגה המינימלית הנדרשת מאתר אינטרנט). כלומר ברוב המקרים לא חייבים להתחשב בניגודיות אם אנחנו בונים אתר אינטרנט רגיל ולא ציבורי שצריך לעמוד ב-AA. למרות זאת, עבור הרבה אנשים (גם אני) ניגודיות נמוכה באתר אינטרנט מקשה מאוד על הקריאה ולפיכך שווה לנסות ולבדוק את הניגודיות.

התקן לדרגת AA קובע שהקונטרסט צריך להיות 4.5:1 (אלא אם מדובר בטקסט גדול – 150% em לפחות. במקרה של טקסט גדול מספיק 1:3.

אם אתם מכוונים לדרגת AAA – הקונטרסט צריך להיות 7:1 ובטקסט גדול: 4.5:1.

ומה קורה אם יש Gradient?

אם תשימו לב, גם באתר הזה יש Gradient:

איך אני בודק את זה? במקרים האלו ההנחיה ברורה: החלק הבהיר ביותר ב-gradient אל מול הצבע של הפונט. כיוון שהקוד המייצר את הגרדיאנט נעשה ב-CSS – אני יכול לבדוק בקלות את הערך:

background-image: -webkit-linear-gradient(top, #303030, #363636);

כיוון שהצבע של הטקסט בהיר, אני צריך לקחת את הצבע הבהיר יותר הוא #303030. צבע הטקסט הוא לבן והכנסה מהירה של הערכים בתוכנת הנגישות מראה לנו ש: הניגודיות היא 13.2 ועומדת יפה גם בתקן AA וגם בתקן AAA.

ומה עם תמונות? תקן AA וגם תקן AAA קובעים באופן מאוד מפורש שהניגודיות אינה כוללת תמונות ואלמנטים קישוטיים שאינם חלק מהטקסט. כלומר אם יש לכם ציורים, איורים או קישוטים שונים שאינם חלק מהטקסט באתר ואינם מהווים רקע כלשהו לטקסט חשוב – אין מה לבדוק אותם. אם יש לכם תמונה כלשהי שמשמשת כרקע לטקסט – אתם צריכים לקחת את הערך הכהה ביותר בתמונה (אם הטקסט שלכם בהיר) או את הערך הבהיר ביותר בתמונה (אם הטקסט שלכם כהה) ואז לפיו לעשות את החישוב.

סיכום

כאמור – לרוב בוני האתרים אין צורך בבדיקות ניגודיות אם אם מתכוונים לעמוד בתקן A בלבד. כל השאר יכולים לבדוק את הניגודיות בקלות אם הם צריכים לעמוד בתקן AA או בתקן AAA. למרות שלרוב בוני האתרים והמעצבים אין צורך לעמוד בבדיקת ניגודיות כלשהי – כדאי מאוד לעשות את זה. אתר עם נגישות גבוהה יותר הוא אתר שקל ונעים לקרוא ממנו ואתר שלגולש הזקן (למשל אני) יותר נעים להיות בו. אז בפעם הבאה שאתם בונים משהן – שימו עין על הניגודיות.