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

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

Adam Argyle
Charlie Gleason

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

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

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

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

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

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

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

מהם הכללים?

AA AAA
טקסט של גוף המודעה (פחות מ-24px) 4.5 7
טקסט גדול (יותר מ-24 פיקסלים) 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 שונה מזו של DevTools או VisBug. כלי הפיתוח ו-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 על ידי אמולציה של ממשק המשתמש וחוויית המשתמש של כלי העיצוב שאנשים מכירים ואוהבים להשתמש בהם.

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

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

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

מסוף JS

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

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

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

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

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

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

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

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

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

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

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

ניסיון ב-WCAG 3.0 APCA

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

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

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

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

סיכום

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