תוכלו להניח שכולם קולטים את הצבעים או הטקסט כמוכם. הדרך שבה אנחנו תופסים צבע יכולה להיות תלויה בסביבה שלנו (תאורה חלשה או חזקה) וביכולות הראייה שלנו. אתם או המשתמשים שלכם עשויים להיות בין מיליוני אנשים עם עיוורון צבעים או ליקויי ראייה.
כדי לתמוך באנשים עם מגוון מוגבלויות חזותיות, קבוצת WAI יצרה נוסחה של ניגודיות צבעים כדי לוודא שיש מספיק ניגודיות בין הטקסט לרקע שלו. כשעוקבים אחרי יחסי הניגודיות של הצבעים, אנשים עם ליקויי ראייה מתונים יכולים לקרוא טקסט ברקע בלי טכנולוגיה מסייעת לשיפור הניגודיות.
שימו לב להבדלים ביחסי הניגודיות שמוצגים באיור 1.
יחס הניגודיות הוא 4.5:1 הוא המינימום הנדרש שנקבע בהנחיות הנגישות לתוכן באינטרנט (WCAG) 2.0. הנימוק הזה נבחר כי הוא מפצה על אובדן הרגישות הניגודיות שבדרך כלל חוו משתמשים עם אובדן ראייה, שווה ערך לראייה של כ-20/40.
שוב, 4.5:1 הוא בדיוק המינימום. כדי לתמוך במשתמשים עם ליקויי ראייה או עיוורון צבעים אחר, עליכם לעמוד ברמת AAA וליצור תוכן עם ניגודיות 7:1.
אפשר לבדוק את הניגודיות של הצבעים באמצעות Lighthouse Accessibility Audit ב-DevTools.
אלגוריתם ניגודיות מתקדם של תפיסה
אלגוריתם הניגודיות המתקדם (APCA) מאפשר לחשב את הניגודיות על סמך מחקר מודרני על תפיסת צבעים.
רמת ה-APCA תלויה יותר בהקשר מאשר ברמות AA ו-AAA של WCAG.
במודל הזה, הניגודיות מחושבת על סמך התכונות הבאות:
- מאפיינים מרחביים (עומס גופן וגודל טקסט)
- צבע הטקסט (הבדל הבהירות בין הטקסט לרקע)
- הקשר (תאורת אווירה, סביבה ומטרת הטקסט)
דפדפן Chrome כולל תכונה ניסיונית שמחליפה את ההנחיות ליחס ניגודיות של AA/AAA ב-APCA.
העברת מידע חשוב עם יותר מצבע
בכל פעם שמעבירים מידע חשוב למשתמשים, כדאי להסתמך על טקסט או על טקסט חלופי בנוסף לרמזים חזותיים כשמשתפים מידע חשוב. סימנים חזותיים כוללים צבעים, תבניות, תמונות, עיצוב גופנים ושפה בכיוון מסוים.
לדוגמה, יכול להיות שיש לכם טופס ליצירת קשר שמציין כי הזנת קלט לא חוקי באמצעות קו תחתון (קו תחתון) בצבע אדום. חיווי הצבע הזה לא מיידע את קורא המסך או משתמשים עם ליקויי ראייה בצבעים שמשהו לא עובד. המשתמשים עשויים לחשוב למה שליחת הטופס לא עובדת ומוותר.
יש להקפיד להתריע למשתמש במספר דרכים לגבי השגיאה הספציפית. לדוגמה, אפשר להוסיף הודעת שגיאה כדי להודיע שהקלט הספציפי לא תקין ואת הסיבה לכך. אפשר גם להוסיף טקסט עזרה שיסביר איך צריך להיראות הקלט.
אפשר עדיין לסמן את הקלט הלא חוקי בקו תחתון אדום, כל עוד יש סימנים נוספים שאינם ויזואליים.
אם אתם מסתמכים במידה רבה על השימוש בצבע בממשק, תוכלו לגלות בעיות ניגודיות ב-Chrome DevTools.
הגברת הניגודיות והיפוך הצבעים
למשתמשים עם ליקויי ראייה, מצבי ניגודיות גבוהה יכולים להקל על הניווט בתוכן בדף. יש כמה דרכים להגדיר ניגודיות גבוהה.
גם ב-macOS וגם ב-Windows אפשר להעלות את רמת הניגודיות במערכת ההפעלה.
המשתמשים יכולים גם להפוך את צבעי החזית והרקע (לדוגמה, ב-macOS). האפשרות הזו שימושית במיוחד באפליקציות ובאתרים שלא תומכים במצבים כהים.
בתור מפתחים, אתם יכולים לבדוק כדי לוודא שהממשק שלכם עדיין גלוי ושניתן להשתמש בו על ידי הפעלת ההגדרות האלה ואימות ידני של נוחות השימוש.
לדוגמה, סרגל ניווט עשוי להשתמש בצבע רקע עדין כדי לציין איזה דף נבחר. כשמציגים אותה במצב ניגודיות גבוהה, העדינות הזו נעלמת לחלוטין ועולה לקורא להבין איזה דף פעיל.
אם אתם עומדים ברמה AA או בניגודיות גבוהה יותר, התוכן שלכם עדיין אמור לפעול כצפוי כשהצבעים הופכים או עם ניגודיות גבוהה. עם זאת, עדיין כדאי לבדוק אותם כדי לוודא שחוויית השימוש תהיה צפויה.