פלטת צבעים לאתר: איך בוחרים צבעים שעובדים

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

ממה בנויה פלטה של אתר

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

ניגודיות: הכלל שאי אפשר לעקוף

תקן הנגישות WCAG, שעליו מבוסס גם התקן הישראלי, דורש בסעיף 1.4.3 יחס ניגודיות של לפחות 4.5:1 בין טקסט רגיל לרקע שלו, ו-3:1 לטקסט גדול (בערך 24 פיקסלים, או 18.5 פיקסלים מודגש). סעיף 1.4.11 מוסיף דרישה של 3:1 לרכיבי ממשק — גבול של שדה טופס, אייקון שמסמן פעולה, מצב פוקוס.

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

איך בוחרים פלטה בפועל

1. מתחילים מהמותג. אם יש לוגו וצבעי מותג — הם נקודת המוצא. אם אין, בוחרים צבע ראשי אחד שמתאים לאופי העסק.
2. מגדירים צבע פעולה אחד. הצבע של הכפתורים צריך להיות שונה מספיק מכל השאר, כדי שהעין תדע מה לוחצים. על כך גם במאמר קריאה לפעולה.
3. בונים סולם ניטרליים. 5–7 גוונים מרקע בהיר ועד טקסט כהה, כולל גוון לקווים מפרידים.
4. בודקים ניגודיות לכל צמד בשימוש — טקסט על רקע, טקסט על כפתור, קישור בתוך פסקה.
5. בודקים על מסך אמיתי, בטלפון ובאור יום. צבע שנראה טוב במסך מעצב עלול להיראות אחרת לגמרי במכשיר זול.

פלטה כקוד: למה זה חשוב לתחזוקה

באתר שבנוי נכון, הצבעים מוגדרים פעם אחת — כמשתני CSS (Design Tokens) — וכל רכיב מפנה אליהם:

:root {
  --color-bg: #1D1D1D;
  --color-text: #FDF7E7;
  --color-accent: #D1ED63;
}
.button { background: var(--color-accent); }

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

טעויות נפוצות

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

צבע לא יכול להיות הסימן היחיד

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

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

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

פלטה ותמונות: שתי שכבות שצריכות להסתדר

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

שאלות נפוצות

כמה צבעים צריכים להיות בפלטה?

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

איך בודקים יחס ניגודיות?

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

האם צבעי המותג חייבים להיות צבע הכפתורים?

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

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