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

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

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

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

מהי הנגשת צבעים באתר?

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

התקן שקובע את הכללים הוא WCAG, קווים מנחים בינלאומיים לנגישות תכנים באינטרנט. הוא מגדיר שתי רמות עיקריות לניגודיות: רמת AA, הרף המקובל והמחייב, ורמת AAA המחמירה יותר. בישראל, תקן ישראלי 5568 מאמץ את WCAG ברמת AA ומחיל אותו על אתרים שנותנים שירות.

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

WCAG AA - מה זה אומר?

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

סוג הטקסט	רמת AA	רמת AAA
טקסט רגיל	4.5:1	7:1
טקסט גדול	3:1	4.5:1
רכיבי ממשק וגרפיקה	3:1	-

"טקסט גדול" מוגדר בתקן במדויק: 24 פיקסלים ומעלה, או 18.66 פיקסלים ומעלה כשהוא מודגש. ניגודיות של רכיבי ממשק כמו כפתורים וגבולות של שדות מוגדרת בסעיף 1.4.11. לרוב האתרים, עמידה ברמת AA מספיקה כדי לענות על הדרישה. רמת AAA שמורה למקומות שבהם הקריאוּת קריטית במיוחד.

איך עובד בודק הניגודיות של לקסה

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

1. בוחרים צבע טקסט וצבע רקע, בעזרת בוחר צבעים או הדבקת קוד HEX.
2. הכלי מחשב את יחס הניגודיות בין השניים.
3. התוצאה מוצגת מיד ומפורקת לחמש בדיקות: טקסט רגיל וגדול ברמת AA, אותם שניים ברמת AAA, ורכיבי ממשק וגרפיקה.
4. אם צריך, מקבלים הצעת תיקון ומעתיקים קוד CSS מוכן.

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

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

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

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

1. חילוץ הצבעים. מזהים את צבע הטקסט וצבע הרקע של האלמנט הבעייתי, דרך כלי הפיתוח של הדפדפן (לחיצה ימנית על הטקסט ואז "Inspect"), או על ידי הדבקת קטע CSS מהאתר לתוך הכלי.
2. הבדיקה. מדביקים את הצבעים ומקבלים מיד את היחס ואת רמת התקן שהם עומדים בה.
3. התיקון או הדוח. אם השילוב נכשל, מקבלים צבע חלופי תקין. אם בודקים אתר שלם, מפיקים דוח מסודר.

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

איך לתקן ניגודיות צבעים שנכשלה

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

התהליך פשוט: זיהוי אוטומטי של הכיוון הנדרש (להכהות או להבהיר), התאמת הבהירות עד שהיחס עובר את 4.5:1, והחלה בלחיצה אחת. אחר כך מעתיקים את קוד ה-CSS החדש ומדביקים באתר. תוך פחות מדקה, טקסט שלא היה קריא הופך לקריא ותקין.

בדיקה לפי גודל הטקסט שלכם

נקודה שרבים מפספסים: אותו יחס ניגודיות יכול לעבור או להיכשל, תלוי בגודל הטקסט. טקסט גדול מספיק עומד בתקן גם ביחס נמוך יותר (3:1 במקום 4.5:1).

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

מציאת צבעים שמתאימים למותג שלכם

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

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

בדיקת פלטה שלמה והפקת דוח ללקוח

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

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

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

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

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

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

איך זה נראה בעיוורון צבעים

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

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

מבחן עיוורון צבעים - מה הקשר?

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

מה הקשר בין ניגודיות ל-SEO

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

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

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

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

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

• מי חייב. החובה חלה על עסקים וגופים שנותנים שירות לציבור דרך האתר, כולל עסקים קטנים.
• מה הרף. ניגודיות מינימלית של 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול, ואיסור להעביר מידע בצבע בלבד.
• מה ההשלכות. אי-עמידה בדרישות חושפת לתביעות נגישות, שהפכו נפוצות בישראל וכרוכות בעלויות משפטיות ובתיקון בדיעבד יקר.

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

כמה עולה הכלי?

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

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

למה להשתמש בבודק הניגודיות של לקסה

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

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

שאלות נפוצות

האם עסק קטן חייב בהנגשת צבעים?

כן. תקנות הנגישות בישראל, המבוססות על תקן 5568, חלות על כל עסק שנותן שירות דרך אתר, כולל עסקים קטנים. הרף הוא 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול. בדיקה בכלי חינמי מסייעת לעמוד בדרישה ולתעד זאת.

יש לי טקסט שלא קוראים באתר, מה עושים?

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

איך מפיקים דוח נגישות ללקוח?

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

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

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

האם הכלי תומך בעברית ומוציא CSS?

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

האם הכלי מחליף בדיקת נגישות מלאה?

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

הצעד הבא

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

מקורות והרחבה

• WCAG 2.1 - המפרט הרשמי של W3C
• הסבר על סעיף 1.4.3 (ניגודיות מינימלית) באתר W3C
• צבע וניגודיות בנגישות - web.dev
• נגישות ישראל - מידע על הנגשת אתרים

הכלי מחשב ניגודיות לפי נוסחת WCAG 2.1 ובודק את רכיב הניגודיות בלבד. הוא אינו מהווה אודיט נגישות מלא או ייעוץ משפטי. תקן ישראלי 5568 מאמץ את WCAG ברמת AA. לבדיקת עמידה מחייבת בדרישות החוק, פנו למורשה נגישות שירות.