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

1. רעיון 1: לבן לכהים, שחור לבהירים

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

function getForegroundColor1(color) {
  return tinycolor(color).isDark() ? 'white' : 'black';
}

הספריה tinycolor מקבלת שם של צבע (בכל פורמט בעולם) ומייצרת אוביקט צבע עליו אפשר לעשות שינויים או לשאול שאלות. השאלה isDark בודקת אם ערך ה lightness של הצבע הוא מתחת ל-50%, כלומר אם מדובר בצבע כהה.

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

2. רעיון 2: המרה ל YIQ

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

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

3. רעיון 3: שימוש בצבע משלים

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

function getForegroundColor2(color) {
  const t = tinycolor(color);
  if (t.isDark()) {
    return t.complement().lighten(60).toHexString();
  } else {
    return t.complement().darken(60).toHexString();
  }
}

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

אפשר לראות את הרעיונות בדמו הקצר הבא. לחצו Edit On Codepen כדי לערוך ולשחק עם הקוד, או בכפתור Show More כדי לראות איך זה נראה על צבעים נוספים.