As a web designer, from time to time I have a need to select a background color and a foreground text color, choosing a color sometimes becomes a big task and haunting, I always worry if the color is good for other people, is it too bright or too dim or just too strange, this problem becomes worst if I also have to set that color as a background and need to choose another color for the foreground text.
I have put a lot of thought and read a lot of recommendation from other people, doing some research about how to accomplish this task easier, so I have made a very simple tool to select a color and do an automatic calculation to get the contrast/opposite color, these 2 colors obviously may not suitable for everyone taste because everyone has a different preference but it is just a first step to accomplish a bigger thing.
Using HSL (Hue, Saturation and Lightness) to select a background color using the 3 sliders below, after that we can calculate the opposite color for the contrast foreground text color.
The text color for 'Saturation (xx%)' and 'background #rrggbb' will use the automatic calculated opposite color, the opposite color is shown inside the box with the 'text #rrggbb', the logic to calculate the opposite color value is to convert from HSL to RGB then calculate the opposite color for each Red, Green and Blue, such as
- HSL(0, 100%, 50%) --> RGB(255,0,0) --> #ff0000 (red) --> opposite color is #00ffff (magenta)
- HSL(60, 100%, 50%) --> RGB(255,255,0) --> #ffff00 (yellow) --> opposite color is #0000ff (blue)
- HSL(120, 100%, 50%) --> RGB(0,255,0) --> #00ff00 (green) --> opposite color is #ff00ff (purple)
- HSL(180, 100%, 50%) --> RGB(0,255,255) --> #00ffff (magenta) --> opposite color is #ff0000 (red)
- HSL(240, 100%, 50%) --> RGB(0,0,255) --> #0000ff (blue) --> opposite color is #ffff00 (yellow)
- HSL(300, 100%, 50%) --> RGB(255,0,255) --> #ff00ff (purple) --> opposite color is #00ff00 (green)
Inside the text color box, there is also a CR (Contrast Ratio) value which calculated from WebAIM, this contrast ratio is important to make a color combination, the recommended guide to make a good (readable) contrast ratio between foreground text color and background color a minimum value of 4.5 for normal (small) text and minimum value 3.0 for large text.
To double the pleasure, if the above tool not able to get a good opposite foreground text color then you can choose custom foreground text color with the selected background color above.
Hopefully this very simple tool can help you to choose a good and readable foreground text color.