איך בוחרים צבעים לאתר: מדריך מעשי לעסקים.

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

מה הצבעים צריכים לעשות

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

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

כמה צבעים צריך באתר

ברוב אתרי העסקים מספיקים:

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

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

מתחילים מהלוגו

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

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

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

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

אופי העסק והמתחרים

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

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

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

צבע הפעולה

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

ניגודיות וקריאות

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

עוד שני כללים שחוסכים בעיות:

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

איך מחלקים את הצבעים בעמוד

כלל 60-30-10

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

מקצב של רקעים

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

הצבעים השקטים

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

דוגמה: פלטה מלאה לעסק

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

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

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

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

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

איך בודקים פלטה לפני שמחליטים

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

לסיכום

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