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

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

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

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

תופס את הצבע

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

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

Hue הוא דרך איכותית לתיאור צבע, כמו אדום, ירוק או כחול. לכל גוון יש כתם ספציפי בספקטרום הצבעים, עם ערכים שנעים בין 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

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

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

שימוש בצבע

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

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

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

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

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

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

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

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

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

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

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

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

בדיקת ההבנה

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