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

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

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

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

קולט צבע

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

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

הערה: ב-CSS אפשר לציין צבע בדרכים רבות, למשל באמצעות שמות צבעים, RGB, RGBa, HEX, HSL, HSLa, HSV או HSVa. HSLa דומה ל-HSL, רק נוסף ערך אלפא. אלפא הוא מדד של אטימות ומוגדר כמספר בין 0.0 (שקוף מלא) ל-1.0 (אטום מלא).

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

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

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

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

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

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

תמונה מאת אלכסנדר גריי ב-Unbounce.

תמונה מאת קלארק ואן דר בקן ב-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. טקסט בגודל גדול מאופיין על ידי גודל של לפחות 18 פיקסלים / 24 פיקסלים או 14 נקודות / 18.5 פיקסלים מודגש. סמלי לוגו ואלמנטים דקורטיביים פטורים מהצבע הזה הדרישות בנוגע לניגודיות.

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

שימוש בצבע

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

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

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

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

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

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

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

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

תמיכה בדפדפן

• 76
• 79
• 67
• 12.1

מקור

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

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

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

מצב בהיר

.

מצב כהה

.

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

תמיכה בדפדפן

• 96
• 96
• 101
• 14.1

מקור

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

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

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

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

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

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

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

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

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

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

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

בדיקת ההבנה

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

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

דוגמת קוד

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

טקסט

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

סמל

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

כל האפשרויות

כן! שני מזהים או יותר יעזרו למשתמש לזהות רכיב בממשק המשתמש.