How to ensure with user defined colors the comments are still readable?

Question

I am exploring an idea I had the other day.

What if I would allow the registered users on a website to pick their own colors for their comments and posts? This way the manifestation of their presence and personality would be stronger, and also it would be easier to spot (and ignore/ban) trouble-makers (#900 characters on #000 background). ;)

How could I still guarantee that their posts are still readable? Can you recommend relevant algorithms?

I am primarily looking for JavaScript and PHP solutions but other approaches could be useful as well.

Answer 1

You could calculate the complementary colour I asked for a JS approach on SO recently. This will not give you optimum readability, some complements are pretty crappy to read. But it is still always readable, and prevents people from putting #0000001 text on a #000000 background.

I'm interested to see whether any algorithms come up providing optimum or close-to-optimum contrast.

Answer 2

Very very nice formula for calculating the perceived brightness of a color. In order to ensure sufficient contrast make sure the difference in contrast values is above a certain threshold.

Calculating the Perceived Brightness of a Color

Example in C# (I know the original poster wanted a JavaScript solution - which I'm currently not very familiar with):

    bool ValidateContrast(Color foreColor, Color backColor)
    {
        double foreBrightness = CalcBrightness(foreColor), 
               backBrightness = CalcBrightness(backColor);
        double threshold = 70; // Just a value, test this.
        bool enoughContrast = Math.Abs(foreBrightness - backBrightness) > threshold;
        return enoughContrast;
    }

    private double CalcBrightness(Color color)
    {
        double r = color.R, g = color.G, b = color.B;
        double brightness = Math.Sqrt(.241 * r * r + .691 * g * g + .068 * b * b);
        return brightness;
    }

Answer 3

You could give the users a limited set of colors to choose from. Maybe only allow white or pale colors as backgrounds, and only give black or dark colors as text color. Or just don't allow them to choose a background color at all (it might make your site look pretty icky if each comment has a different background color).

Answer 4

Just calculate the inverse color for background and foreground:

function contrastingColor (color) { // color specified in #xxxxxx notation
    var rgb = color.match(/(\d{2})/g);
    for (var i=0;i<3;i++) {
        rgb[i] = parseInt(rgb[i],16);
        var new_color = 255-rgb[i];
        // if the color is too similar then shift to white (or black, your choice):
        if (Math.abs(rgb[i]-new_color) < 20) {
            new_color = 255;
        }
        rgb[i] = new_color.toString(16);
    }
    return '#'+rgb.join();
}

// usage:
contrastingColor('#123456');