-1

I know several methods to procedurally generate colors that work well together. But I can't find a way to get a pleasing palette that work well with my white text.

There's of course a no-brainer solution that limit Light in HSL below a certain range and only work on Hue and Saturation, but the result palettes are (obviously) always dark-ish. And what if I want to use a custom color for the text?

Helps or tips are much appreciated.

Edit: Comments on reason of downvote is also much appreciated.

AVAVT
  • 7,058
  • 2
  • 21
  • 44
  • Not sure about the down votes, but at first you ask about white text, but later you ask about colored text, so the scope of the question is not entirely clear to me. Do you need something that works with multiple text colors? Can the text colors be adjusted as well? – Pikalek Jul 13 '16 at 14:31
  • Hey thanks Pikalek. The scope of the question is preferably to find suitable background colors based on any predetermined foreground color. But of course I would be satisfied with just solving just my immediate problem (white text) – AVAVT Jul 13 '16 at 14:33

1 Answers1

1

This Q/A from the UX SE covers dynamic text legibility & asserts "gray-scale contrast is more important than color contrast" & ensures compliance with WCAG accessibility requirements. It uses a luminosity formula to evaluate the background color & picks black text for light colors & white text for dark.

I think your problem could be solved in a similar manner: given a foreground text color, determine its luminosity & generate background colors that have sufficient contrast. Extending this to colored text is a bit more complex as there are more dimensions to your input variable (the foreground color). To make the problem more manageable, I would try restricting the backgrounds to tints, tones & shades of the foreground as follows:

  • Determine the luminosity of the foreground color you wish to use
  • If it is less than or equal to 0.18 use a light tint or a light tone of the foreground color as the background (by adding white or a light grey respectively)
  • If it is less than or equal to 0.18 use a dark shade or a dark tone of the foreground color as the background (by adding black or a dark grey respectively)

If this restricts your palette too much or makes things too samey, you could try something like this:

  • Generate your procedural color set
    • Determine the luminosity values of the color set, among them:
      • Call the color with the lightest luminosity color_L
      • Call the color with the lightest luminosity color_D
  • Determine the luminosity of the foreground color you wish to use
  • If the foreground luminosity is less than or equal to 0.18 use a light tint or a light tone of the color_L as the background
  • If the foreground luminosity is less than or equal to 0.18 use a dark shade or a dark tone of the color_D as the background
Community
  • 1
  • 1
Pikalek
  • 926
  • 7
  • 21