472,961 Members | 1,730 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,961 software developers and data experts.

Contrasting colours

Imagine you're in a game where your opponent picks the background colour
of your webpage, in #RRGGBB format, and you have to pick the foreground
text colour that contrasts best with their choice. I realise that this
task is almost impossible given various forms of colour-blindness, but
my target audience is unlikely to be colour-blind (bomb disposal people
don't last long if they cannot tell live from neutral) so we can assume
perfect vision.

If they pick #000000 then of course your text would be #FFFFFF (and vice
versa).

If they picked #FF0000 then the choice is less obvious. #00FFFF seems to
offer the best "mathematical" contrast, but in tests, (to my eyes)
#FFFFFF is a better contrast. See http://swiftys.org.uk/contrast.html
where I am playing with this concept.

If they pick a background of #7F7F7F then yellow (FFFF00) or cyan
(00FFFF) offer a good contrast, but magenta (FF00FF) is truly horrible.
This may be an artefact either of my display, or my use of TrueType, but
my HTML cannot possibly know about either of these facts.

Can anyone offer an algorithm that would do a reasonable job faced with
an arbitrary background colour? I'd hate to end up with a lookup table
containing 16,777,216 rows!

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk
Oct 5 '07 #1
7 3224
Try looking at some contrast formulas, and possibly try writing a
binary search algorithm

http://juicystudio.com/services/colourcontrast.php
Here's a bit of code, it's reasonably fast, and you should be able to
adapt it to your needs (if you know php). The Variable $target is
your target contrast value, 500 is considered pretty good, but that
isn't always reachable (or not in a time friendly way). if it finds a
500 or better combination it quits, or it quits when it has come
pretty close. Note: this will not always give the optimal color, but
it's close enough, the following returns a color of contrast value
400, which is 80% of optimal.

I'm sure it could be better, as I wrote it just for your post, but if
you decide to use it, it'd be nice, but not necessary to give credit.

<?php
/*
Color Selection By Contrast
Mark C. Roduner, Jr.
*/
function color_contrast($color_1, $color_2) {
$red_1 = ($color_1 & 0xff0000) >16;
$red_2 = ($color_2 & 0xff0000) >16;
$grn_1 = ($color_1 & 0xff00) >8;
$grn_2 = ($color_2 & 0xff00) >8;
$blu_1 = ($color_1 & 0xff);
$blu_2 = ($color_2 & 0xff);
return (abs($red_1 - $red_2) + abs($grn_1 - $grn_2) + abs($blu_1 -
$blu_2));
}

$source = 0xff00ff;
$seeker = $marker = 0xffffff;
$target = 500;
$best_contrast = 0;
$best_color = 0;

$contrast = color_contrast($source, $seeker);
while(($contrast < $target) and ($marker != 0)) {
$marker = intval($marker / 2);
if($contrast $target) {
$seeker -= $marker;
} else if($contrast < $target) {
$seeker += $marker;
}
$contrast = color_contrast($source, $seeker);
if($contrast $best_contrast) {
$best_contrast = $contrast;
$best_color = $seeker;
}
}
echo("\n Color: " . dechex($best_color) . " Contrast $best_contrast");
?>

On Oct 5, 3:07 am, Steve Swift <Steve.J.Sw...@gmail.comwrote:
Imagine you're in a game where your opponent picks the background colour
of your webpage, in #RRGGBB format, and you have to pick the foreground
text colour that contrasts best with their choice. I realise that this
task is almost impossible given various forms of colour-blindness, but
my target audience is unlikely to be colour-blind (bomb disposal people
don't last long if they cannot tell live from neutral) so we can assume
perfect vision.

If they pick #000000 then of course your text would be #FFFFFF (and vice
versa).

If they picked #FF0000 then the choice is less obvious. #00FFFF seems to
offer the best "mathematical" contrast, but in tests, (to my eyes)
#FFFFFF is a better contrast. Seehttp://swiftys.org.uk/contrast.html
where I am playing with this concept.

If they pick a background of #7F7F7F then yellow (FFFF00) or cyan
(00FFFF) offer a good contrast, but magenta (FF00FF) is truly horrible.
This may be an artefact either of my display, or my use of TrueType, but
my HTML cannot possibly know about either of these facts.

Can anyone offer an algorithm that would do a reasonable job faced with
an arbitrary background colour? I'd hate to end up with a lookup table
containing 16,777,216 rows!

--
Steve Swifthttp://www.swiftys.org.uk/swifty.htmlhttp://www.ringers.org.uk

Oct 5 '07 #2
On 5 Oct, 04:07, Steve Swift <Steve.J.Sw...@gmail.comwrote:
Imagine you're in a game where your opponent picks the background colour
of your webpage, in #RRGGBB format, and you have to pick the foreground
text colour that contrasts best with their choice.
Convert from RGB to HSV, then rotate the hue by 180degrees. Convert
back to RGB.

The rest is standard algorithms and web searching.

Oct 5 '07 #3


Andy Dingley wrote:
>
Convert from RGB to HSV, then rotate the hue by 180degrees. Convert
back to RGB.
Sorry Andy, it's not so simple. I tried this, and a few other
algorithms a while back, and failed. I back-burnered the effort, but if
I'm missing something, please help me get it straight.

#EADBD1 (hue 24 deg); rotate to 204 deg == #D1E1EB
brightness difference == 0
color difference == 57
Oct 5 '07 #4
On 5 Oct, 15:34, William Gill <nore...@example.invalidwrote:
Sorry Andy, it's not so simple.
It depends a bit what you menan by "contrast". If you take a
reasonably strong saturation, then rotating the hue is enough - it's a
pure chroma-based contrast. If you're using a "pastel" shade and you
want the strongest perceived contrast, then you'll want to vary the
saturation too. Read Gombrich or Denning for the relevant theory.

Oct 5 '07 #5


Andy Dingley wrote:
On 5 Oct, 15:34, William Gill <nore...@example.invalidwrote:
>Sorry Andy, it's not so simple.

It depends a bit what you menan by "contrast". If you take a
reasonably strong saturation, then rotating the hue is enough - it's a
pure chroma-based contrast. If you're using a "pastel" shade and you
want the strongest perceived contrast, then you'll want to vary the
saturation too. Read Gombrich or Denning for the relevant theory.
I read several color theory books, and articles on line. Was trying to
create a helper tool that allowed me to start with a color (from
client's logo or such) create a basic scheme, and satisfy w3
accessibility spec. Failed miserably, and gave up with a headache.

Will look into the references you cite, thanks.
Oct 5 '07 #6
Steve Swift wrote:

If they picked #FF0000 then the choice is less obvious. #00FFFF seems to
offer the best "mathematical" contrast, but in tests, (to my eyes)
#FFFFFF is a better contrast. See http://swiftys.org.uk/contrast.html
where I am playing with this concept.
That's because the brightness contrast matters. You've just considered the
tone contrast.

http://www.visionaustralia.org.au/info.aspx?page=628
If they pick a background of #7F7F7F then yellow (FFFF00) or cyan
(00FFFF) offer a good contrast, but magenta (FF00FF) is truly horrible.
Same thing.
This may be an artefact either of my display, or my use of TrueType, but
my HTML cannot possibly know about either of these facts.

Can anyone offer an algorithm that would do a reasonable job faced with
an arbitrary background colour? I'd hate to end up with a lookup table
containing 16,777,216 rows!
I realise that this task is almost impossible given various forms of
colour-
blindness, but my target audience is unlikely to be colour-blind (bomb
disposal people don't last long if they cannot tell live from neutral)
so we can assume perfect vision.
Brightness contrast is important because our eye isn't a screen-to-RGB
converter.

1) Cones spectra overlap.
http://en.wikipedia.org/wiki/Image:Cones_smj2_E.png
Which implies that green photons stimulates red cones too.
(On the other hand, blue and red are at a larger distance).
This is especially a problem if the colors are very bright, because
receptors will be saturated.

2) On peripheral vision, most receptive cells are rods, which are very
sensible to brightness, but don't percieve the color tone.

Not strangely, it's the same foreground/background color pairs that are
most readable for you and for a half-blind grandma.
I realise that this task is almost impossible given various forms of
colour-
blindness
Not if you just think about ONE color blindness: achromatopsy. It regroups
all others.
Just make the text legible when it's converted to gray levels, and it'll
be legible for everbody.

--
If you've a question that doesn't belong to Usenet, contact me at
<ta*****************@yahoDELETETHATo.fr>
Oct 5 '07 #7
Just make the text legible when it's converted to gray levels, and it'll
be legible for everbody.
This was the consensus in my employers newsgroups as well (I like to get
two different sets of opinions, the variations are often enlightening in
themselves).

My plan is to convert the background colour to a grey-shade (simply by
averaging the red/green/blue components initially, then setting the text
to either black or white depending on the result.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk
Oct 8 '07 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Els | last post by:
Hi, I would like an opinion on the following: I have a page which is made up of background-images with transparent linked images in front of it, which on hover show text in CSS popups. Due to...
3
by: CSX | last post by:
Hi I have just loaded Visual Basic.Net. I find the interfact colours very drab, especially compared to Office 2003. How do I change the interface colours (currently greys & white) Ta Carlo
3
by: Peter Williams | last post by:
Hi All, I want to write some javascript for a html page which does the following. Imagine that the page contains a table with 2 columns and 3 rows, e.g.: +---+---+ | A | B | +---+---+
8
by: Doug Laidlaw | last post by:
I tried to grab an image from a Web page the other day. It turned out that the page was made up of three horizontal bands, and part of the image was in each. One band was a JPEG, another was a...
4
by: Tim Marshall | last post by:
The report indicated in the send object command below has various colours in it which show nicely when the report is previewed and printed. However, when sent as an attachment to users without...
1
by: Joe | last post by:
I don't know if contrasting is really the right word but here's what I mean. Take a normal Listbox (or similar) when the test is selected the text turns blue. If the background is blue the text...
0
by: Rui Oliveira | last post by:
I am using a tree from CTreeCtrl. To create the imagelist I am using a bitmap with 256 colours. But the icons in my tree only appear with 16 colours. What is supposed to do to have icons...
9
by: piyush2884 | last post by:
hi guys, got anything on this issue?
5
by: Jameson | last post by:
Hi, I have a list of known colours, generated using: Dim colorNames As New System.Collections.Generic.List(Of String) For Each known As KnownColor In .GetValues(GetType(KnownColor)) Dim...
2
by: Sodrohu | last post by:
Currently I got a thermal image mapping program which converts grayscale pictures to RGB. Now, what I need to do is to convert those 3 RGB colors into other three colours. The choice of colours are...
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.