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

צבע המותג נראה מעולה בלוגו, ואז אותו צבע משמש כטקסט על רקע כפתור ופתאום אף אחד לא רואה מה כתוב עליו בטלפון בשמש. זו אחת הטעויות הנפוצות ביותר בבחירת צבעי מותג - בוחרים לפי מה שיפה בעין, ולא בודקים אם הצירוף בכלל קריא במצב שימוש אמיתי.
הכלל הבסיסי - ניגודיות היא לא עניין של טעם
תקן הנגישות WCAG קובע מספר מדויק: יחס ניגודיות של לפחות 4.5:1 בין טקסט רגיל לרקע שלו, ו-3:1 לטקסט גדול או לרכיבי ממשק כמו כפתורים. זה לא המלצה סגנונית - זה מספר שאפשר לחשב לכל שני צבעים ולדעת בוודאות אם הם עובדים יחד.
הדרך המהירה לבדוק: מזינים את שני קודי ה-HEX (למשל #16233a ו-#ffffff) בכלי בדיקת ניגודיות חינמי, והתשובה מגיעה תוך שניות - עומד בתקן או לא.
שלב 1 - שני צבעים עיקריים, לא שישה
בוחרים צבע ראשי אחד (בדרך כלל הצבע שהכי מזוהה עם המותג) וצבע משני אחד שמשלים אותו. שני צבעים נוספים לגוונים בהירים או כהים יותר מספיקים לרקעים ולפרטים קטנים. עסק קטן שמנסה להשתמש בחמישה צבעים שונים בכל חומר שיווקי בסוף נראה לא עקבי, לא צבעוני יותר.
שלב 2 - בודקים ניגודיות לפני שמתאהבים בצירוף
לפני שמאשרים סופית את שילוב הצבעים, בודקים את שני הצירופים הכי חשובים: טקסט על רקע לבן (לגוף המאמרים והתוכן), וטקסט לבן על רקע צבע המותג (לכפתורי קריאה לפעולה). שני אלה חייבים לעבור את יחס ה-4.5:1, כי הם מה שהלקוח קורא הכי הרבה.
| שילוב | איפה משתמשים | מה בודקים |
|---|---|---|
| טקסט כהה על רקע בהיר | גוף התוכן באתר | יחס 4.5:1 ומעלה |
| טקסט לבן על צבע מותג | כפתורי קריאה לפעולה | יחס 4.5:1 ומעלה (או 3:1 לכפתור גדול) |
| צבע מותג על רקע לבן | לוגו, כותרות | פחות קריטי, אבל כדאי לבדוק בכל זאת |
שלב 3 - בודקים גם בשמש, לא רק על המסך במשרד
מסך משרד עם תאורה נעימה מסתיר בעיות ניגודיות שמופיעות מיד בחוץ. פותחים את האתר או התמונה עם צבעי המותג על הטלפון ויוצאים איתו לחוץ באור יום - אם קשה לקרוא כפתור או כותרת, זה בדיוק מה שקורה ללקוח שבודק את העסק מהרחוב.
שלב 4 - לא לבחור צבע רק כי הוא "אומר משהו"
יש הרבה תיאוריה על מה כל צבע "מייצג" (כחול - אמינות, כתום - אנרגיה), אבל זה משני לעומת קריאות בפועל ולעומת מה שכבר עובד בתחום. אם כל המתחרים הישירים משתמשים בגוון דומה של כחול, לפעמים דווקא כדאי לבחור צבע שונה כדי לבלוט - לא כדי "להתאים לתחום". דרך פשוטה לבדוק זאת: לפתוח חמישה אתרים של עסקים דומים באותו תחום ולראות אם כולם נראים דומה מדי - אם כן, זו הזדמנות להיבדל, לא סיבה להצטרף לעדר.
מה עושים אם צבע המותג האהוב לא עומד בניגודיות
לפעמים מגלים שהצבע שכל כך רצו כרקע כפתור פשוט לא מספיק כהה או בהיר כדי לעמוד ביחס הנדרש עם הטקסט הלבן שמעליו. הפתרון לא חייב להיות ויתור מלא על הצבע - אפשר לשמור על אותו גוון בדיוק ללוגו ולפרטים דקורטיביים, ולהשתמש בגרסה כהה או בהירה יותר שלו (אותו צבע במהות, גוון שונה) ספציפית לרקעי כפתורים וטקסט. כך המותג נשאר מזוהה, אבל הטקסט החשוב באמת נשאר קריא.
מה לא לעשות
לא לבחור צבעים סופיים לפני שבודקים אותם על משטח אמיתי - כרטיס ביקור מודפס, מדבקה, או לפחות תמונה על המסך של הטלפון, לא רק על מסך המחשב של המעצב. צבעים נראים שונה במידה מפתיעה בין מסך לדפוס ובין מכשירים שונים.
איך יודעים שזה עבד
בודקים את יחס הניגודיות של כפתור הקריאה לפעולה הראשי באתר בכלי בדיקה חינמי - אם הוא עובר 4.5:1, זה סימן טוב גם לנגישות וגם לכך שהלקוח בפועל רואה ולוחץ עליו. אם הוא נכשל, זו לא בעיה אסתטית - זו סיבה ישירה לפחות פניות מהאתר. שווה לבדוק את זה גם אחרי כל שינוי עיצוב עתידי - קל לשכוח את הבדיקה כשמישהו רק "מרענן קצת" את הצבעים בלי לבדוק מחדש את הניגודיות. הבדיקה עצמה לוקחת פחות דקה, ושווה להפוך אותה לצעד קבוע בכל פעם שמשנים משהו בעיצוב האתר או בחומרי השיווק, לא רק בפעם הראשונה.
שאלות נפוצות
איך בודקים את יחס הניגודיות בפועל בלי ידע טכני?
יש כלים חינמיים באינטרנט (כמו WebAIM Contrast Checker) שמקבלים את שני קודי הצבע (HEX) ומחזירים את יחס הניגודיות המדויק ואם הוא עומד בתקן AA. זו בדיקה של פחות מדקה לכל צירוף צבעים.
האם חובה לעמוד בתקן הנגישות אם האתר הוא של עסק קטן?
זו לא רק שאלה משפטית - היא שאלה עסקית פשוטה: כפתור שלקוח עם ליקוי ראייה קל לא רואה בבירור הוא כפתור שהוא לא לוחץ עליו. גם בלי חובה משפטית ספציפית, ניגודיות טובה מגדילה את מספר האנשים שבאמת רואים ולוחצים על הקריאה לפעולה.