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.

Improve this question
5
  • 1
    text in both of your examples should be white
    – Dave Haigh
    Commented Apr 6, 2016 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?
    – Salem
    Commented Apr 6, 2016 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
    Commented Apr 6, 2016 at 9:30
  • 2
    Possible duplicate of Determining text color on top of a selectable background color
    – Zach Saucier
    Commented Apr 6, 2016 at 12:48
  • @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
    Commented Apr 7, 2016 at 18:29

2 Answers 2

Reset to default
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.

Improve this answer
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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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