Alex Rivera | Logout

Programmatically choose high-contrast colors

Asked 2009-01-02T19:25:56.453
30

This should be a simple question, but I haven't been able to find a way to make it work.

Essentially, I have a silly localhost page that I use in my webdevelopment. When I am surfing between our development server and my local version of the C# code (redirected from the dev url via host file) I have been known to sometimes forget what 'dev.foo.com' points at - local or server.

So I created a page which will run locally as my default web page's default page, so I can easily identify my localhost from the server.

This page does a lot of things randomly (including generating a character's starting stats for D&D), including setting a random background color. I do this by generating 3 random numbers between 0 and 255, and setting them as the RGB value for the body background color in CSS.

Given the 3 ints R, G, and B, how do I determine R2, G2, and B2 such that the second color will have high contrast with the first? I like having the page have random background colors (it keeps me from getting used to the look of the landing page) but I also like to be able to read the text.

random colors rgb
Edit
Report

2 Answers

8

"Contrast" is a loaded word. If you just care about being able to read the text, then one easy way is to work in a luminance-based color space like HSL, and pick foreground and background colors with big differences in luminance.

The conversion between HSL and RGB is well-known--see Wikipedia for the details.

If you're talking about actual color contrast, it's not nearly as cut-and-dried (there are a lot of perceptual factors that, as far as I know, haven't been reduced to a single colors space), but I suspect you don't need that level of sophistication.

answered 2009-01-02T19:35:18.150
5

Check out this PHP solution: Calculating Color Contrast with PHP by Andreas Gohr. It can be ported to any language of course.

He also has a very nice demonstration of his contrast analyzer where you can find some minimal contrast levels to work with.

answered 2009-05-31T20:15:49.480

Your Answer