→ חזרה לבלוג

נגישות צבעים וניגודיות באתר - מדריך לעיצוב נגיש

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

מהי ניגודיות ולמה היא חשובה?

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

ניגודיות נמדדת ביחס מתמטי שנע בין 1:1 (אין ניגודיות - שני צבעים זהים) ל-21:1 (ניגודיות מקסימלית - שחור על לבן). תקן WCAG מגדיר יחסי ניגודיות מינימליים שנועדו להבטיח קריאות לאנשים עם לקויות ראייה קלות עד בינוניות.

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

דרישות הניגודיות של תקן WCAG

תקן WCAG 2.0 (שעליו מבוסס התקן הישראלי) מגדיר שתי רמות של דרישות ניגודיות:

רמת AA (הדרישה החוקית בישראל)

• טקסט רגיל: יחס ניגודיות מינימלי של 4.5:1 בין צבע הטקסט לצבע הרקע.
• טקסט גדול: יחס ניגודיות מינימלי של 3:1. טקסט נחשב "גדול" כאשר הוא בגודל 18px ומעלה (רגיל) או 14px ומעלה (מודגש/bold).
• רכיבי ממשק: רכיבים גרפיים ואלמנטים של ממשק המשתמש (כפתורים, שדות טופס, אייקונים) צריכים ניגודיות של 3:1 לפחות.

רמת AAA (מומלצת אך לא חובה)

• טקסט רגיל: יחס ניגודיות של 7:1.
• טקסט גדול: יחס ניגודיות של 4.5:1.

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

דוגמה: טקסט אפור בהיר (#999999) על רקע לבן (#FFFFFF) נותן יחס ניגודיות של 2.85:1 בלבד - נכשל בשתי הרמות. שינוי לאפור כהה יותר (#595959) יתן יחס של 7:1 שעומד גם ברמת AAA.

עיוורון צבעים - מה חשוב לדעת?

עיוורון צבעים (Color Vision Deficiency) הוא מצב שכיח הרבה יותר ממה שרוב האנשים חושבים. כ-8% מהגברים וכ-0.5% מהנשים סובלים מדרגה כלשהי של עיוורון צבעים. זה אומר שבקהל של 100 גולשים, סביר שלפחות 4-5 יתקשו לראות צבעים מסוימים.

הסוגים העיקריים של עיוורון צבעים:

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

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

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

למרבה המזל, קיימים כלים רבים שמאפשרים לבדוק ניגודיות בקלות:

• WebAIM Contrast Checker: כלי מקוון פשוט ויעיל. הזינו שני צבעים וקבלו את יחס הניגודיות ואת תוצאת העמידה בתקן. כתובת: webaim.org/resources/contrastchecker
• Colour Contrast Analyser (CCA): תוכנה שולחנית חינמית שמאפשרת לבחור צבעים ישירות מהמסך באמצעות pipette ולקבל ניתוח ניגודיות מפורט.
• Chrome DevTools: כלי הפיתוח של Chrome כוללים בדיקת ניגודיות מובנית. העבירו את העכבר מעל אלמנט צבעוני בעורך ה-CSS וראו את יחס הניגודיות.
• Stark (תוסף לפיגמה): תוסף לכלי העיצוב Figma שמאפשר לבדוק ניגודיות ולדמות סוגים שונים של עיוורון צבעים ישירות בתהליך העיצוב.
• axe DevTools: תוסף לדפדפן שמבצע סריקת נגישות מקיפה, כולל בדיקת ניגודיות באלמנטים שונים באתר.

טיפים מעשיים לעיצוב נגיש בצבעים

הנה כללים מעשיים שיעזרו לכם לעצב אתר נגיש מבחינת צבעים:

1. אל תסתמכו על צבע בלבד: כל מידע שמועבר באמצעות צבע צריך להיות זמין גם בדרך אחרת - טקסט, אייקון, תבנית, קו תחתון או צורה. לדוגמה, קישורים צריכים להיות מובחנים לא רק בצבע אלא גם בקו תחתון או בעיצוב אחר.
2. בדקו ניגודיות מוקדם: שלבו בדיקת ניגודיות כבר בשלב העיצוב, לפני הפיתוח. שינוי צבעים בשלב מאוחר יכול להיות יקר ומסובך.
3. היזהרו מטקסט על תמונות: טקסט על רקע תמונה בעייתי מבחינת ניגודיות כי חלקים שונים בתמונה מציעים ניגודיות שונה. אם חייבים, השתמשו בשכבת רקע חצי-שקופה מאחורי הטקסט.
4. שימו לב לשדות טופס: גבולות שדות טופס צריכים להיות בניגודיות מספקת לרקע. שדה עם גבול אפור בהיר על רקע לבן עלול להיות בלתי נראה לאנשים עם ראייה מוגבלת.
5. בדקו מצב מיקוד (Focus): כאשר משתמש מנווט באמצעות מקלדת, אלמנט הפוקוס צריך להיות מודגש בצורה ברורה עם ניגודיות מספקת. אל תסירו את outline ברירת המחדל בלי לספק חלופה נגישה.
6. עקביות בשימוש בצבעים: השתמשו באותו צבע לאותו מטרה בכל האתר. לדוגמה, אם כפתורים ראשיים הם כחולים, שמרו על עקביות זו בכל הדפים.

נגישות מצב כהה (Dark Mode)

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

כללים חשובים למצב כהה נגיש:

• אל תשתמשו בשחור מוחלט (#000000) כרקע: שחור טהור על מסכי OLED יוצר ניגודיות גבוהה מדי שעלולה לגרום לעומס על העיניים. עדיף להשתמש באפור כהה מאוד כמו #121212 או #1a1a2e.
• אל תשתמשו בלבן מוחלט (#FFFFFF) לטקסט: במצב כהה, טקסט לבן טהור על רקע כהה יכול ליצור "הילה" שמקשה על הקריאה. עדיף להשתמש בלבן מעומעם כמו #E0E0E0 או #CCCCCC.
• בדקו ניגודיות גם במצב כהה: אותן דרישות ניגודיות של WCAG חלות גם במצב כהה. ודאו שכל הטקסט והאלמנטים עומדים ביחסי הניגודיות הנדרשים.
• התאימו צבעים: צבעים שעובדים היטב על רקע בהיר עשויים להיראות שונה לגמרי על רקע כהה. ייתכן שתצטרכו ליצור פלטת צבעים נפרדת למצב כהה.
• אפשרו למשתמש לבחור: תנו למשתמשים לבחור בין מצב בהיר לכהה, ואל תכפו את הבחירה עליהם. כבדו את הגדרות המערכת (prefers-color-scheme) אך אפשרו גם שינוי ידני.

כיצד מנגיש עוזר בנגישות צבעים?

סרגל הנגישות של מנגיש כולל מספר תכונות שמסייעות ישירות בנגישות צבעים:

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

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

סיכום - עיצוב נגיש הוא עיצוב טוב

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

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

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