עיצוב אתרים לאנשים עם לקות ראיה ועיוורון צבעים

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

עיוורון-צבעים הוא מצב שבו אדם אינו מסוגל להבחין בצבעים שאנשים אחרים מסוגלים להבחין בהם. ברוב המקרים עיוורון-צבעים הוא תורשתי. במקרים נדירים יותר הוא תוצאה כתוצאה מפגיעה בעצב הראייה או ברשתית עקב מחלה או תאונה. הסוג הנפוץ ביותר של עיוורון-צבעים מכונה "דַלְטוֹנִיזְם", והוא מתבטא בקושי להבחין בין ירוק לאדום. כ-12% מהגברים ו-0.4% מהנשים מתקשים להבחין בין אדום לירוק.

כשמדברים על עיוורון-צבעים עולה השאלה: "האם אני עיוור צבעים?". ובכן, לסקרנים שביניכם מומלץ לנסות את המבחן לתפיסת צבע.

פָּלֶטַת צבעים כפי שהיא נראית בעיניהם של לוקים בשלושה סוגים של עיוורון-צבעים

הנחיות נגישות רלוונטיות

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

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

איך לבצע את 1.4.1 הסבר על 1.4.1

קריטריון 1.4.3  ניגוד (מינימום): הצגה חזותית של טקסט ושל תמונות טקסט תקיים יחס־ניגוד של 4.5:1 לפחות, למעט במקרים הבאים (רמה AA)  איך לבצע את 1.4.3 הסבר על 1.4.3

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

איך לבצע את 1.4.3 הסבר על 1.4.3

הבהרות

  • כאשר הטקסט הוא טקסט גדול, כלומר 14 נקודות BOLD ומעלה, או 18 נקודות ומעלה, אז אפשר להשתמש ביחס ניגוד נמוך יותר 3:1.
  • כאשר הטקסט הוא במצב לא-פעיל (disabled).
  • כאשר הטקסט הוא חלק מלוגו או משם של מותג, אין דרישה לניגוד-צבעים מסוים.

בחירת צבעים

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

דוגמאות:

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

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

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

בדוגמה 1 יש שתי בעיות:

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

הפתרון לשתי הבעיות כולל שני צעדים:

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

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

צעד שני: לוודא שהניגוד בין הצבע השחור לצבע הירוק עולה על 1:3. כך, גם עיוור-צבעים יוכל להבחין בין שני הצבעים. אמנם הוא לא יראה את הצבע הירוק כמו אדם עם ראייה תקינה, אבל הוא יבחין היטב בהבדל בין הצבע השחור לצבע הירוק. ראו דוגמה 4:

 

 

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

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

כלי להדמיית התאמה לעיוורי-צבעים

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

כלים לבדיקת ניגוד צבעים

בנוסף לפניכם רשימה של צבעים הנחשבים לצבעים "בעייתיים" מבחינת תפיסת צבע. מומלץ להמנע מהם.

רשימת צבעים שעלולים להקשות על לעיוורי-צבעים ועל אנשים עם תפיסת צבע נורמלית
Original
color		 Seen by a… HUE COLOR CODE
Protan Deutan Tritan
Black, 0° #000000; RVB 0,0,0
CMJN % 0,0,0,100.
Orange, 41° #E69F00; RVB 230,159,0
CMJN % 15,41,93,1.
Sky blue, 202° #56B4E9; RVB 86,180,233
CMJN % 66,16,4,0.
Bluish green, 160° #2B9F78; RVB 43,159,120
CMJN % 81,15,62,2.
Yellow, 56° #F0E442; RVB 240,228,66
CMJN % 15,6,79,0.
Blue, 202° #0072B2; RVB 0,114,178
CMJN % 90,49,12,1.
Vermillon, 27° #D55E00; RVB 213,94,0
CMJN % 17,71,96,5.
Reddish purple, 336° #CC79A7; RVB 204,121,167
CMJN % 26,62,12,0.
How color vision deficients may see our corporate colors:
Orange A, 36° #D88100; RVB 216,129,0
CMJN % 18,54,95,3.
Yellowish green, 92° #6DC023; RVB 109,192,35
CMJN % 81,15,62,2.
Protanopia: CVD resulting from insensitivity to red light, causing confusion of greens, reds, and yellows.
Deuteranopia: CVD resulting from insensitivity to green light, causing confusion of greens, reds, and yellows.
Tritanopia: a rare form of CVD resulting from insensitivity to blue light, causing confusion of greens and blues.

הטבלה מתוך האתר Archimedes' Lab

 

עודכן ע"י אילנה בניש בתאריך 20.05.2016