: Best way to choose a color to display text above a full color background I'm trying to create a simple color chooser GUI with a box on the right that displays the chosen color. However, I've
I'm trying to create a simple color chooser GUI with a box on the right that displays the chosen color. However, I've noticed that black might not be the best color as it would be invisible with a black background.
So I decided to try inverting the color and displaying it and it works a bit better but is still sometimes not as readable as I'd like.
Is there a convention for choosing a color for text above a color, or does this happen to already be the accepted method of doing so?
TIA
Examples of my old method (first is more readable) :
Edit: This question may be similar to the suggested duplicate, but the answers most definitely are not (and they don't answer my question). One answer to the other question suggests merely to use a lighter/darker shade depending on the color (and then goes on to say that presets may be more reasonable), and the other gives an answer that depends on the asker's original color ("looks like your BG color is about #aa0000 "). The two answers on this question, however, do fix my original problem - how to determine a color dynamically based on the background.
More posts by @Cody3331749
2 Comments
Sorted by latest first Latest Oldest Best
You can use an online colour contrast checker to compare two colours for their contrast ratio and brightness difference.
An example is snook Colour Contrast Check snook.ca/technical/colour_contrast/colour.html
This will also give you data on whether the contrast is high enough to be compliant with web accessibility standards.
If you have a fixed background colour e.g. #FF0000 . you could compare this to white, and then compare it to black, then compare the results and choose the most contrasting combination.
You can set the text color to either black or white depending on the brightness of your background color.
If the background color is brighter than a certain threshold, the text color will be set to black.
If the brightness is lower than that, you can set the text to white.
This article Calculating the Perceived Brightness of a Color explains how to implement it.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.