💡


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

אבל הוא לא יכול לעמוד לבד

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

רגישות לעיוורון צבעים – חלק מתכנון חכם

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

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

  • עבור משתמש עם עיוורון צבעים, התמונה תיראה אחידה ולא ברורה.
  • אם הצבעים קרובים מדי בגוון – גם משתמשים ללא עיוורון יתקשו להבחין ביניהם.

ראו לדוגמא את התמונות הבאות:

לוגו גן ניברא - האותיות ניב באדום

 

לוגו גן ניברא - האותיות ניב באדום הופכות להיות בגווני אפור והמסר נעלם

 

זהו מצב שבו המסר תלוי בצבע בלבד וזו גישה שעלולה להגביל.

הדרך הנכונה – שילוב צבע עם אמצעי זיהוי נוספים

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

ומה עם משתמשים עם ראייה ירודה?

עבורם, לצבעים יש תפקיד אחרשיפור הניגוד והבהירות:

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

המסקנה? לא לבחור עבור המשתמש – אלא לאפשר לו לבחור בעצמו.

לסיכום

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


FAQ



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

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

באמצעות כלים שמדמים עיוורון צבעים (כמו Chrome DevTools → Emulate vision deficiencies), או צפייה בגווני אפור בלבד.

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

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

עודכן בתאריך: