צבע וניגודיות

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

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

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

תפיסת צבע

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

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

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

רוויה היא עוצמת הצבע, שנמדדת באחוזים בטווח של 0% עד 100%. צבע עם רוויה מלאה (100%) יהיה מאוד חי, בעוד שצבע ללא רוויה (0%) יהיה בגווני אפור או בשחור-לבן.

בהירות היא מאפיין של צבע שקובע אם הוא בהיר או כהה. היא נמדדת באחוזים שנעים בין 0% (שחור) ל-100% (לבן).

מדידת ניגודיות הצבעים

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

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

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

עיוורון לירוק

דוטרנופיה (ידועה גם כעיוורון לירוק) מתרחשת אצל 1% עד 5% מהגברים, ו-0.35% עד 0.1% מהנשים.

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

עיוורון לאדום

פרוטנופיה (ידועה גם כעיוורון לצבע אדום) מתרחשת אצל 1.01% עד 1.08% מהגברים ו-0.02% עד 0.03% מהנשים.

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

אכרומטופסיה או מונוכרומטיזם

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

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

חישוב ניגודיות הצבעים

בנוסחה לחישוב ניגודיות הצבעים נעשה שימוש בבהירות היחסית של הצבעים כדי לקבוע את הניגודיות, שיכולה להיות בין 1 ל-21. לרוב, מקצרים את הנוסחה הזו ל-[color value]:1. לדוגמה, יחס הניגודיות בין שחור טהור ללבן טהור הוא הגבוה ביותר – 21:1.

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

כדי לעמוד בדרישות המינימליות של WCAG לגבי צבע, יחס הניגודיות של צבע הטקסט בגודל רגיל, כולל תמונות של טקסט, צריך להיות 4.5:1. יחס הניגודיות של הצבעים בטקסט בגודל גדול ובסמלים חיוניים צריך להיות 3:1. טקסט בגודל גדול מוגדר כטקסט בגודל 18 נקודות / 24 פיקסלים לפחות או כטקסט מודגש בגודל 14 נקודות / 18.5 פיקסלים לפחות. סמלי לוגו ורכיבים דקורטיביים פטורים מדרישות הניגודיות של הצבעים.

למזלנו, לא נדרשת מתמטיקה מתקדמת, כי יש הרבה כלים שיבצעו בשבילכם את החישובים של ניגודיות הצבעים. בעזרת כלים כמו Adobe Color, Color Contrast Analyzer, Leonardo וכלי בחירת הצבעים בכלי הפיתוח ל-Chrome אפשר לראות במהירות את יחסי הניגודיות של הצבעים ולקבל הצעות שיעזרו לכם ליצור את הצמדים והפלטות הכי נגישים של צבעים.

שימוש בצבע

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

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

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

שאילתות מדיה שמתמקדות בצבע

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

לדוגמה, באמצעות שאילתת המדיה @prefers-color-scheme, אפשר ליצור עיצוב כהה, שיכול לעזור לאנשים עם פוטופוביה או רגישות לאור. אפשר גם ליצור עיצוב בניגודיות גבוהה באמצעות @prefers-contrast, שתומך באנשים עם ליקויי ראייה בצבעים ועם רגישות לניגודיות.

העדפת ערכת צבעים

שאילתת המדיה @prefers-color-scheme מאפשרת למשתמשים לבחור גרסה עם ערכת נושא בהירה או כהה של האתר או האפליקציה שבהם הם מבקרים. כדי לראות את השינוי הזה בעיצוב, משנים את הגדרות ההעדפה של העיצוב הבהיר או הכהה ועוברים לדפדפן שתומך בשאילתת המדיה הזו. אפשר לעיין בהוראות לשימוש במצב כהה ב-Mac וב-Windows.

השוואה בין מצב בהיר למצב כהה.

מעדיף ניגודיות

שאילתת המדיה @prefers-contrast בודקת את הגדרות מערכת ההפעלה של המשתמש כדי לראות אם מצב הניגודיות הגבוהה מופעל או מושבת. כדי לראות את השינוי הזה בעיצוב, אפשר לשנות את הגדרות העדפת הניגודיות ולעבור לדפדפן שתומך בשאילתת המדיה הזו (הגדרות מצב הניגודיות ב-Mac וב-Windows).

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

שאילתות מדיה של שכבות

אתם יכולים להשתמש בכמה שאילתות מדיה שמתמקדות בצבע כדי לספק למשתמשים עוד אפשרויות. בדוגמה הזו, הנחנו את @prefers-color-scheme על @prefers-contrast.

משווים בין הצבע והניגודיות.