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

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

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

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

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

עין שצופה בגלגל הצבעים.

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

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

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

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

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

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

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

חול קשת מקורי.
תמונה מאת אלכסנדר גריי ב-Un אימיילים.
דפוס הקשת המקורי.
תמונה מאת קלארק ואן דר בדאן ב-Unspark.

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

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

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

דטראנופיה (המכונה בדרך כלל עיוורון ירוק) מתרחשת ב-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

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

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

שימוש בצבע

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

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

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

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

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

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

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

תמיכה בדפדפנים

  • Chrome: 76.
  • Edge:‏ 79.
  • Firefox: 67.
  • Safari: 12.1.

מקור

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

ההגדרות הכלליות של macOS לגבי המראה.

העדפה לניגודיות

תמיכה בדפדפנים

  • Chrome:‏ 96.
  • Edge:‏ 96.
  • Firefox: 101.
  • Safari:‏ 14.1.

מקור

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

דוגמה לקוד במצב בהיר ללא העדפת ניגודיות.
מצב בהיר, ללא העדפה לגבי ניגודיות.
דוגמה לקוד במצב כהה עם העדפה לניגודיות גבוהה.
מצב כהה, העדפה לניגודיות גבוהה.

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

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

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

בדיקת ההבנה

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

צבע בלבד לא מספיק כמזהה למסמכים. מה עוד יעזור לקוראים לזהות רכיבי ממשק משתמש?

כל האפשרויות
טקסט
סמל
דוגמת קוד