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

קונטרסט הוא הבסיס

העיקרון הראשון בנגישות צבעים הוא קונטרסט, כלומר כמה צבע הטקסט או האלמנט בולט לעומת הרקע שלו. לפי WCAG, טקסט "גדול" מוגדר ככזה שגודלו לפחות 18pt (שווה ערך ל־24px) או 14pt bold (שווה ערך לכ־18.5px מודגש). עבור טקסטים כאלה נדרש קונטרסט של לפחות 3:1 (לרמת AA).
לכל טקסט שאינו עומד בהגדרה הזו, כלומר טקסט רץ סטנדרטי בגודל של כ־14-16px, נדרש קונטרסט גבוה יותר של לפחות 4.5:1 (לרמת AA).

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

מה זה AA ו-AAA?

אלה רמות שונות של דרישות נגישות.

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

שלוש עמודות המציגות טקסט גדול (24px ו־19px bold) עם יחס קונטרסט משתנה:
– עמודה ראשונה (Fail) – יחס 2.22:1, לא עומד בדרישות AA.
– עמודה שנייה (AA) – יחס 3.06:1, עומד ברמת AA.
– עמודה שלישית (AAA) – יחס 4.54:1, עומד גם ב־AAA. — השוואה בין שלוש דרגות נגישות לקונטרסט בטקסט גדול – טקסט בגודל 24px או 19px bold לפי תקן WCAG. יחס הקונטרסט משפיע על רמות הנגישות AA ו-AAA

שלוש עמודות עם טקסט קטן בגודל 14px: – עמודה ראשונה (Fail) – יחס 3.06:1, לא עומד בדרישות AA. – עמודה שנייה (AA) – יחס 4.54:1, עובר AA. – עמודה שלישית (AAA) – יחס 7.03:1, עומד גם ב־AAA. — השוואת קונטרסט בטקסט קטן – 14px לפי תקן WCAG

צבעים – לא רק בטקסטים

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

כפתור כחול וכפתור אוואטר אדום בממשק שמסומנים כלא נגישים לפי רמת AA, עקב קונטרסט נמוך מול הרקע — הסנדלר הולך יחף: בפיגמה כפתור ה-Primary הכחול והאוואטר לא עומדים בקונטרסט המינימלי של AA

מה לא חייב לעמוד בדרישות הקונטרסט?

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

WCAG 2.2 סעיף 1.4.3 – Contrast (Minimum) (רמת AA)
WCAG 2.2 סעיף 1.4.6 – Enhanced Contrast (רמת AAA)
WCAG 2.2 סעיף 1.4.11 – Non-text Contrast (רמת AA)

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

איך כדאי לבדוק את נגישות הצבעים?

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

איך ניגשים לנגישות של צבעים בתוך הדיזיין סיסטם?

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

מה להגדיר ברמת היסודות

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

דיאגרמה המציגה שלושה כרטיסי קונטרסט עם יחסים של 7:1, 4.5:1 ו־3:1 לפי סוג הטקסט וגודל הפונט, לצד טבלת טוקנים של צבעים ניטרליים וסמנטיים עם הסבר אילו גוונים עומדים ביחסי קונטרסט מול רקע כהה או בהיר. — הנחיות קונטרסט וטבלת צבעים מדיזיין סיסטם – דיאגרמה שמדגימה אילו צבעים עומדים ביחסי קונטרסט תקניים (3:1, 4.5:1, 7:1) לטקסטים, אלמנטים גרפיים וקומפוננטות ואילו ערכים מתאימים לשימוש עם לבן או שחור.

מה להגדיר ברמת הקומפוננטות והפאטרנים

קומפוננטות עם מצבים שונים – תכנון סטייטים, כמו hover ו-active, עם קונטרסט מתאים בכל וריאציה.

איך דואגים שהצבעים בממשק יהיו נגישים?