0

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) :
Not-too-readable text on a pink backgroundenter image description here


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.

  • 1
    text in both of your examples should be white – Dave Haigh Apr 6 '16 at 9:16
  • @DaveHaigh you're right - but how should this be determined? On a background that is white or nearly white (grey, etc) what would I do? – Moira Apr 6 '16 at 9:26
  • 1
    Broadly speaking, use contrasting colors (i.e. white text on a dark background, black text on a light background). You won't find one color that will work universally. – Cai Apr 6 '16 at 9:30
  • 2
  • @blu you're correct about the linked duplicate, the answers there don't help you very much and seems you've got decent answers here already. I'm voting to leave this open. – Cai Apr 7 '16 at 18:29
1

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.

3

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 http://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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.