בלוג

כי יש לנו מה לספר לכם...

מעצבים לעיוורי צבעים – הנחיות וכלים

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

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

ראשית בואו נגדיר - מה זה עיוורון צבעים?

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

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

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

איך מעצבים מסכים מותאמים לעיוורון צבעים?

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

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

טיפ ראשון - עשו שימוש באמצעים חזותיים נוספים מלבד צבע 

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

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

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

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

    במידה והמשתמש שוכח למלא שדה חובה מסוים, מומלץ להוסיף מלל בסמוך לשדה
  3. קישורים וכותרות ילוו בסטייל גרפי שונה מטקסט רציף, ולא יסתמכו רק על הבדל בצבע. בקישורים נוסיף קו תחתון, בכותרות נגדיל את הפונט ואף נשתמש בהבלטה (Bold).

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

טיפ שני - שמרו על ניגודיות צבעים נכונה

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

לשם כך חשוב שנשתמש בעיצוב שלנו בצבעים בעלי ניגודיות גבוהה (ביחס של 4.5 ל 1 לצורך הנגשה ברמת AA וביחס של 7 ל 1 לצורך הנגשה ברמת AAA), ולא בצבעים דומים, או צמדי צבעים שידועים בבעייתיות שלהם בכל הקשור לעיוורון צבעים, כמו אדום עם ירוק, או צהוב עם כחול. 

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

טיפ שלישי – שלבו צבעים בחוכמה

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

עלינו לוודא ששילוב הצבעים שלנו הוא נגיש בעבור עיוורי צבעים

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

טיפ רביעי – עשו שימוש במספר גוונים מאותו הצבע 

באמצעות שימוש בערכת צבעים מונוכרומטית (Monochromatic color schemes), אנו יכולים לעשות שימוש בגוונים מרובים של צבע אחד, ולא באמצעות צבעים שונים. באמצעות השימוש בטכניקת עיצוב זו, אנו יכולים ליצור עיצוב חזותי מרשים, ללא ויתור על נושא הנגישות, וההתאמה לעיוורי הצבעים. זאת מכיוון שגם עיוורי צבעים יכול להבחין בהבדל בין גוונים שונים של אותו הצבע.

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

בהצלחה

יש לך שאלות על התהליך שלנו ? רוצה לקבל הצעת מחיר ? אפשר להתחיל בשיחת טלפון או פגישה

כן! בואו נדבר