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

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

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

הבעיה בלבקש מ-AI "לבחור צבעים נחמדים"

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

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

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

מערכת 4 הצבעים

כל אתר PAGEnza משתמש בדיוק בארבעה צבעים בשם:

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

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

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

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

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

כיצד מאורגנות פלטות

אנו מתחזקים 20+ קבוצות פלטות, כל אחת בנויה סביב ארכיטיפ:

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

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

ניגודיות WCAG: המגבלה שמשפרת עיצוב

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

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

• ink חייב להשיג ניגודיות של ≥4.5:1 מול bg1, bg2, וכל צבע משטח שבו מופיע טקסט
• accent חייב להשיג ניגודיות של ≥3.0:1 מול bg1 ו-bg2 (לשימוש כרקע לכפתורים)
• האימות משתמש במתמטיקת בהירות אמיתית — L = 0.2126R + 0.7152G + 0.0722B לאחר תיקון גמא — לא קירובים

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

ניגודיות טמפרטורת צבע בין חלקים

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

הכלל במערכת שלנו: אם ל-bg1 יש גוון חם (כיוון כתום/צהוב, או ניטרלי חם כמו קרם), bg2 חייב להיות קריר (כיוון כחול/אפור). אם bg1 הוא לבן קריר, bg2 יכול להיות לבן מחוץ לטווח החם.

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

לוגיקת צבעים ספציפית לתעשייה

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

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

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

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

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

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

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

מה לקוחות יכולים לשנות

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

• הם יכולים לשנות רקעי חלקים בין bg1, bg2, ומשטחים
• הם יכולים לשנות צבעי כפתורים וקישורים בין accent ל-ink
• הם לא יכולים להכניס צבע חמישי שרירותי ששובר את הפלטה

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