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

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

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

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

שימוש בצבע

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

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

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

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

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

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

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

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

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

.

.

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

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

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

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

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

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

בדיקת ההבנה

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