גרף שבו הקו האדום מסמן הפסד והירוק רווח, כפתור ״אישור״ ירוק ליד ״ביטול״ אדום, מפה עם אזורים בכתום ובירוק. לכ-8% מהגברים, כמעט אחד מכל שנים־עשר, ההבדל הזה כמעט לא נראה. סימולטור עיוורון צבעים וניגודיות מראה איך התמונה, האתר או המצגת שלכם נראים לאנשים עם עיוורון צבעים, ובודק אם צבע הטקסט והרקע עומדים בדרישות הנגישות.
סוגי עיוורון הצבעים
״עיוורון צבעים״ הוא בדרך כלל לא ראייה בשחור־לבן, אלא קושי להבחין בין צבעים מסוימים. הסימולטור מציג ארבעה סוגים:
- פרוטנופיה: חוסר ברגישות לאדום. אדום נראה כהה וחום, וקשה להבדיל בינו לבין ירוק. כ-1% מהגברים.
- דאוטרנופיה: חוסר ברגישות לירוק. יחד עם הגרסה הקלה שלה, דאוטרנומליה, זה הסוג הנפוץ ביותר, בערך 6% מהגברים.
- טריטנופיה: קושי בכחול וצהוב. נדיר מאוד.
- אכרומטופסיה: ראייה ללא צבעים בכלל, בגווני אפור. נדירה מאוד, אבל היא גם מבחן טוב לשאלה אם העיצוב עובד בהדפסה בשחור־לבן.
אצל נשים השכיחות נמוכה בהרבה, כחצי אחוז, כי הגנים לראיית אדום וירוק נמצאים בכרומוזום X.
איך בודקים תמונה בסימולטור עיוורון צבעים
- גוררים לאזור ההעלאה צילום מסך של אתר, לוגו, גרף, שקף או מפה. אפשר גם ללחוץ על ״נסו עם תמונת דוגמה״.
- הכלי מציג את התמונה המקורית ולידה ארבע הדמיות, זו לצד זו.
- בודקים את המקומות שבהם הצבע נושא מידע: מקרא של גרף, סטטוס, קישורים, שגיאות בטופס.
- אפשר להזיז את מחוון החומרה מתחת ל-100% כדי לראות חולשה קלה בראיית הצבע, שהיא המצב הנפוץ יותר.
- כל הדמיה אפשר להוריד כקובץ PNG, למשל כדי לצרף למצגת או לשלוח למעצב.
ההדמיה מבוססת על המודל של Machado ועמיתיו מ-2009, שבו משתמשים גם כלי הפיתוח של כרום ופיירפוקס. זה קירוב טוב, אבל כל אדם רואה קצת אחרת.
בודק ניגודיות צבעים לפי WCAG ות״י 5568
ניגודיות היא ההבדל בבהירות בין הטקסט לרקע. היא חשובה לאנשים עם ראייה ירודה, למבוגרים, ולכל מי שקורא בטלפון בשמש. התקן הישראלי לנגישות אתרים, ת״י 5568, מבוסס על WCAG ודורש רמה AA:
- טקסט רגיל: יחס של לפחות 4.5:1.
- טקסט גדול, 24 פיקסלים ומעלה או 18.5 פיקסלים מודגש: לפחות 3:1.
- אייקונים, גבולות של שדות וכפתורים ורכיבי ממשק: לפחות 3:1.
- ברמה AAA, שאינה חובה, הדרישה 7:1 לטקסט רגיל.
בחלק התחתון של הכלי בוחרים צבע טקסט וצבע רקע, או מדביקים קוד HEX, ומקבלים את יחס הניגודיות ואת התוצאה לכל רמה. מתחת מופיעה גם ההדמיה של השילוב אצל אנשים עם עיוורון צבעים, עם היחס המחושב לכל סוג. לחצן ״החלפה״ מחליף בין הטקסט לרקע.
טעויות נפוצות ואיך מתקנים
- מידע בצבע בלבד: ״השדות באדום הם חובה״. מוסיפים כוכבית או את המילה ״חובה״.
- גרף עם אדום וירוק: עוברים לכחול וכתום, שנבדלים היטב כמעט לכל סוגי עיוורון הצבעים, ומוסיפים תוויות ישירות על הקווים.
- קישורים שמסומנים רק בצבע: משאירים קו תחתון, או לפחות ניגודיות של 3:1 בין הקישור לטקסט שסביבו.
- טקסט אפור בהיר על לבן: נראה אלגנטי בעיצוב, אבל לרוב נכשל ב-4.5:1. אפור #767676 הוא בערך הבהיר ביותר שעובר על רקע לבן.
- טקסט על תמונה: מוסיפים שכבה כהה או רקע מאחורי הטקסט, ובודקים את החלק הבהיר ביותר של התמונה.
כשמתכננים אתר או מיתוג חדש, שווה לבדוק את פלטת הצבעים כבר בשלב העיצוב ולא אחרי ההשקה. בסטודיו טליה שלוש בונים פלטות ואתרי אלמנטור עם בדיקת ניגודיות ונגישות כבר מהסקיצה הראשונה. הכלי כאן לא מחליף בדיקת נגישות מלאה ואינו אישור משפטי, אבל הוא תופס את רוב הבעיות הנפוצות בתוך דקה.
עוד כלים שיעזרו
- קודי צבע: המרה בין HEX, RGB ו-HSL.
- כיווץ תמונות: להקטין את התמונות לפני שמעלים לאתר.
הכלים מהמדריך