נגישות של הצבע והניגודיות

Dave Gash

Meggin Kearney

Rachel Andrew

Rob Dodson

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

ההנחיות של WebAIM ממליצות על יחס ניגודיות AA (מינימלי) של 4.5:1 לכל הטקסט. יש חריגים לטקסט גדול מאוד (שגדול ב-120% עד 150% מטקסט ברירת המחדל של גוף הטקסט), שבו היחס יכול לרדת ל-3:1. שימו לב להבדלים ביחסי הניגודיות שמוצגים כאן:

יחס הניגודיות של 4.5:1 נבחר לרמה AA כי הוא מפצה על אובדן רגישות הניגודיות בדרך כלל על ידי משתמשים עם אובדן ראייה השווה לראייה של כ-20/40. השיעור 20/40 נחשב בדרך כלל לחדות החזותית האופיינית לאנשים בגיל 80 בערך. עבור משתמשים עם ליקויי ראייה או ליקויי צבע, אנחנו יכולים להגדיל את הניגודיות עד 7:1 לטקסט בגוף הטקסט.

אפשר להשתמש בבדיקת הנגישות ב-Lighthouse כדי לבדוק את ניגודיות הצבעים. כדי להפעיל את הדוח:

1. פותחים את כלי הפיתוח.
2. לוחצים על Audits (ביקורות).
3. בוחרים באפשרות נגישות.

ב-Chrome יש גם תכונה ניסיונית שעוזרת לזהות את כל הטקסט בניגודיות נמוכה בדף. אפשר גם להשתמש בהצעות לצבעים נגישים כדי לתקן את הטקסט בניגודיות נמוכה.

כדי לקבל דוח מקיף יותר, צריך להתקין את תוסף Accessibility Insights. דוחות ה-Fastpass כוללים פרטים על רכיבים שנכשלו בבדיקות הניגודיות של הצבעים.

אלגוריתם ניגודיות מתקדם (APCA)

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

בהשוואה להנחיות AA ו-AAA, APCA תלוי יותר בהקשר.

הניגודיות מחושבת לפי התכונות הבאות:

• מאפיינים מרחביים (עומס גופן וגודל טקסט)
• צבע הטקסט (הבדל הבהירות בין הטקסט לרקע)
• הקשר (תאורת אווירה, סביבה ומטרת הטקסט)

דפדפן Chrome כולל תכונה ניסיונית שמחליפה את ההנחיות ליחס ניגודיות של AA/AAA ב-APCA.

אין להעביר מידע באמצעות צבע בלבד

יש כ-320 מיליון אנשים ברחבי העולם עם לקות בראיית צבעים. בערך אחד מכל 12 גברים ו-1 מתוך 200 נשים יש צורה מסוימת של עיוורון צבעים, כך שכחמישה אחוזים מהמשתמשים שלך לא יחוו את האתר שלך כפי שהתכוונת. הסתמכות על צבע להעברת מידע עלולה להעביר את המספר לרמות לא מקובלות.

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

ברשימת המשימות של WebAIM מוסבר בסעיף 1.4.1 ש "אין להשתמש בצבע כשיטה היחידה להעברת תוכן או להבחנה בין אלמנטים חזותיים". חשוב גם לציין ש'אין להשתמש בצבע לבדו כדי להבדיל בין קישורים לטקסט שמסביב', אלא אם הם עומדים בדרישות ניגודיות מסוימות. במקום זאת, ברשימת המשימות מומלץ להוסיף אינדיקטור נוסף, כמו קו תחתון (באמצעות מאפיין text-decoration ב-CSS) כדי לציין מתי הקישור פעיל.

אחת הדרכים הבסיסיות לתקן את הדוגמה הקודמת היא להוסיף עוד הודעה לשדה, שיודיעה שהשדה לא תקין ומה הסיבה לכך.

כשאתם בונים אפליקציה, חשוב לזכור את הדברים האלה ושימו לב לאזורים שבהם אתם מסתמכים יותר מדי על צבע כדי להעביר מידע חשוב.

אם אתם סקרנים לדעת איך האתר נראה לאנשים שונים, או אם אתם מסתמכים במידה רבה על השימוש בצבע בממשק המשתמש, תוכלו להשתמש בכלי הפיתוח כדי לדמות סוגים שונים של ליקויי ראייה. ב-Chrome יש את התכונה 'הדמיה של ליקויי ראייה'. כדי לגשת אליו, פותחים את כלי הפיתוח ופותחים את הכרטיסייה עיבוד שבחלונית ההזזה. משם, תוכלו לדמות את לקוי הצבע הבאים:

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

מצב ניגודיות גבוהה

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

במערכות הפעלה כמו Mac OSX ו-Windows יש מצבי ניגודיות גבוהה, שאפשר להפעיל בכל הפעולות ברמת המערכת.

כדאי להפעיל את ההגדרות של ניגודיות גבוהה ולוודא שכל ממשק המשתמש באפליקציה גלוי ושאפשר להשתמש בו.

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

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

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