בדיקת ניגודיות הצבעים בעיצוב האתר

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

Adam Argyle
Charlie Gleason

נניח שיש לכם טקסט על רקע בהיר, כמו זה:

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

יכול להיות שכל הדוגמאות קריאות לכם, אבל זה לא המצב אצל כולם.

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

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

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

הקשר בין שני צבעים ב-WCAG 2.1 מתאר על ידי יחס הניגודיות שלהם – כלומר, המספר שמתקבל כשמשווים את הבהירות של שני צבעים. בהירות היא דרך לתאר את מידת הקרבה של צבע לשחור (0%) או ללבן (100%). תקן WCAG מגדיר כמה כללים ואלגוריתמים לחישוב של יחס הניגוד שצריך להיות כדי שהאינטרנט יהיה נגיש. עם זאת, יש בעיות ידועות בחישוב הזה. בסופו של דבר נאמץ דרך אמינה עוד יותר, אבל בינתיים, WCAG היא הדרך הטובה ביותר שיש לנו.

מהם הכללים?

AA AAA
טקסט של גוף המודעה (פחות מ-24px) 4.5 7
טקסט גדול (יותר מ-24px) 3 4.5
ממשק משתמש (סמלים, תרשימים וכו') 3 לא מוגדר

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

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

בדיקת הניגודיות בין צבעים

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

  1. Pika
    אפליקציה ל-MacOS עם יכולת ייחודית להציג את הניגודיות של כל צבע במסך כולו, צבעים בגוונים, צבעים עם שקיפות ועוד. הכוונה היא מפורשת, והמשתמשים בוחרים ידנית את הפיקסלים להשוואה. קצת פחות אוטומציה, אבל עם הרבה יותר תכונות.
  2. VisBug
    תוסף לדפדפנים שונים, שמאפשר להציג יותר משכבת-על אחת של ניגודיות בו-זמנית, אבל בדומה ל-DevTools, לפעמים הוא לא מצליח לזהות את הכוונה.
  3. כלי הפיתוח של Chrome
    כלי הפיתוח מובנה ב-Chrome ומכיל דרכים שונות לבדוק, לתקן ולפתור באגים בבעיות שקשורות לצבעים. עם זאת, יש לו חסרונות כשבודקים צבעים דהויים וצבעים שקופים למחצה, ולפעמים הוא לא מצליח לזהות את הכוונה.

Pika (אפליקציה ל-macOS)

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

הורדת Pika

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

  • השוואה בין שני צבעים, גם אם הם לא בדפדפן – אם אתם רואים את הצבע במסך, אתם יכולים לבדוק אותו.
  • השוואה בין צבעים עם שקיפות.
  • השוואה בין צבעים בתוך שינויי צבע הדרגתיים.
  • השוואת צבעים שמשתמשים בשיטות מיזוג, כמו mix-blend-mode ב-CSS.

השוואה בין שני צבעים כלשהם

השוואת טקסט לצבע רקע:

שני גוונים אפורים מוצגים זה לצד זה, יחס הניגודיות שלהם הוא 13.01 והם עומדים ביעדים AA ו-AAA.

השוואה בין צבעי הקווים והמילוי של גרפיקה וקטורית:

מתבצעת השוואה בין שני גוונים של סגול מסמל דו-גווני. לצבעים יש יחס ניגודיות של 1.63 והם לא עומדים ביעדים של WCAG.

השוואה בין צבעים עם שקיפות

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

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

השוואת צבעים עם מעברים

השוואה של טקסט על שיפוע או על תמונה. כאן האות L מ-Lasso מול הכחול הבהיר של התמונה:

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

VisBug

VisBug הוא כלי בהשראת FireBug שעוזר למעצבים ולמפתחים לבדוק באופן חזותי את עיצוב האתר, לנפות באגים ולשחק בו. המטרה היא להציע פתרון עם חסמי כניסה נמוכים יותר מכלי הפיתוח של Chrome, על ידי הדמיה של ממשק המשתמש (UI) וממשק המשתמש (UX) של כלי העיצוב שהמשתמשים כבר מכירים ואוהבים להשתמש בהם.

כדאי לנסות את VisBug או להתקין אותו ב-Chrome, ב-Firefox, ב-Edge, ב-Brave או ב-Safari.

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

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

בדיקה בדפדפנים שונים (וגם בנייד)

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

רכיב עם כותרת וסמל מוצגים עם תיבת גבול ורודה מסביבם. תיבת עזרה עם מידע על נגישות של VisBug מצביעה על התיבה הוורודה עם דוח השוואת צבעים של צבע הטקסט והרקע שלו. היחס הוא 13.86 והוא עומד גם ביעד AA וגם ביעד AAA.

בדיקה של נכס אחד או כמה נכסים

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

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

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

כלי פיתוח ל-Chrome

אם כבר התקנתם את Chrome, יש לכם כבר גישה לכלים רבים לבדיקת הניגודיות:

בוחר הצבעים של כלי הפיתוח ל-Chrome

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

בדוגמה הבאה, בוחר הצבעים נפתח עבור ערך צבע של נכס בהתאמה אישית. הציון של יחס הניגודיות הוא 15.79, ומוצגות שתי סימניות ירוקות, שמציינות שהציון עומד בדרישות של AA ו-AAA ב-WCAG 2.1:

צילום מסך של חלונית הרכיבים ב-DevTools. בסגנונות מוצג בורר הצבעים, ובאמצע מוצג דיווח על יחס הניגודיות של הצבע (4.98).

תיקון אוטומטי בבורר הצבעים

קל לראות את הדירוג בזמן שבוחרים צבעים, אבל בכלי הפיתוח ל-Chrome יש תכונה נוספת לתיקון אוטומטי. כשבורר הצבעים מדווח על ציון ניגודיות צבעים לא נגיש, אפשר להרחיב אותו כדי להציג את יעדי הציונים AA ו-AAA, וגם את הכלי eye dropper. לצד AA ו-AAA מופיעים דוגמיות צבע וסמל לרענון. לחיצה על הסמל תמצא את הצבע הקרוב ביותר שעומד בדרישות:

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

הסבר קצר על הבדיקה

בכלי לבחירת רכיבים יש תכונה מיוחדת במהלך מעבירת העכבר מעל הדף, שמספקת מידע כללי על הגופן, הצבע והנגישות. כלי הבחירה של האלמנטים הוא הסמל שמשמאל בצילום המסך הבא. זו התיבה עם הסמן בצורת חץ בפינה השמאלית התחתונה. אפשר גם לבחור אותו באמצעות מקש הקיצור Control+Shift+C (או Command+Shift+C ב-MacOS).

צילום מסך של התיבה והחץ בסמל DevTools שמפעילים את הכלי לבחירת רכיבים.

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

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

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

ממשיכים להקיש עד שמגיעים 🎶

אני בודק לעיתים קרובות שילוב צבעים באמצעות הכלי הזה לבדיקה מהירה, ומגלה שהוא לא עומד ביחס הנדרש. במקום להשתמש בתכונה של תיקון אוטומטי בבורר הצבעים (כי אני בררן), אני משפר את ערוצי הצבעים ב-CSS ומעקב אחריהם עד שאגיע ליחס הרצוי. אני קורא לתהליך הזה bump bump til you pass כי אני משנה את מספרי הערוצים של צבע עד שהם עומדים בדרישות של WCAG 2.1.

השלבים הם:

  1. ממקמים את מוקד המקלדת בתוך צבע בחלונית 'סגנונות'.
  2. מפעילים את הכלי לבדיקת רכיבים באמצעות מקשי הקיצור Control+Shift+C (או Command+Shift+C ב-MacOS).
  3. מצביעים על יעד.
  4. מקישים על מקשי החיצים למעלה/למטה במקלדת כדי לשנות את המספרים בערך הצבע.

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

סקירה כללית של CSS

עד עכשיו, כלי הפיתוח ל-Chrome סיפקו דרכים לבחון שילוב צבעים אחד בכל פעם, אבל סקירה כללית של CSS יכולה לסרוק את הדף כולו ולהציג את כל השילובים שאינם נגישים בבת אחת:

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

מידע נוסף על התכונה הזו זמין בפוסט סקירה כללית על CSS: זיהוי שיפורים פוטנציאליים ב-CSS. אפשר גם לצפות בסרטון של Jecelyn Yeen ב-YouTube בסדרה DevTools Tips, שבו היא מסבירה איך לזהות שיפורים פוטנציאליים ב-CSS באמצעות החלונית 'סקירה כללית על CSS'.

Lighthouse

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

כך התוצאות האלה עשויות להיראות:

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

מסוף JS

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

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

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

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

אמולציה לאנשים עם עיוורון צבעים

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

צילום מסך של האפשרויות ב-DevTools של האמולציה לאמולציה של לקויות ראייה: ללא אמולציה, ראייה מטושטשת, פרוטונופיה, דיטיראנופיה, טריטנופיה, אכרומטופסיה.

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

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

יותר ויותר משתמשים משנים את הגדרות הניגודיות במערכת ההפעלה שלהם, ומאפשרים להם לבקש התאמה אישית של הניגודיות בממשק המשתמש שלהם. אפשר להשתמש בהגדרה הזו ב-CSS, בדיוק כמו בהעדפות של העיצוב הבהיר או הכהה. כלי הפיתוח ל-Chrome מאפשרים לחקות את ההעדפה הזו כדי שאפשר יהיה לבדוק את העיצובים ולהתאים אותם לבקשת המשתמש בלי לשנות את ההגדרה במערכת.

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

ניסיון ב-WCAG 3.0 APCA

ניסוי נוסף שאפשר לנסות הוא בדיקת שילובי הצבעים באמצעות מערכת הניקוד הניסיונית של APCA ליחסי צבעים. הבדיקה הזו מופעלת דרך 'הגדרות' > 'ניסויים', והיא מחליפה את מערכת היחסים של WCAG 2.1 באלגוריתם חדש ומשופר לבדיקת הניגודיות, שמאפשר לכם לראות תצוגה מקדימה של התוצאות שלה בזמן שההצעה מתקדמת לתקן.

צילום מסך של תיבת סימון מופעלת: 'הפעלת אלגוריתם חדש של ניגודיות חזותית מתקדמת (APCA) שמחליף את יחס הניגודיות הקודם ואת ההנחיות ל-AA/AAA'.

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

הסבר קצר על אלמנט בבדיקה של Devtools מציג 100.2% שלילי עבור דירוג הניגודיות של אלמנט dd.

סיכום

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