Setting Contrast between Font and Background?

[DoubleDee]

How much “contrast” should exist between the Font Color and the Background Color?

My web page has a set of boxes which are nested inside another set, and I am trying to differentiate the different levels by changing the shading of the box headings, but that is creating issues with the Font-to-Background Contrast Ratio?!

Here are 3 samples…

Sample #1:

Sample #2:

Sample #3:

To contrast the nested boxes I have, I would like to go with “Sample #1”, however I fear that maybe there isn’t enough contrast between the Font (#333) and the Background (#CFCFCF)…

And in general, are there any “rules of thumb” for setting the contrast for…

1.) Dark Font on a Dark Background?

2.) White Font on a Dark Background?

Sincerely,

Debbie

[force]

Between the three, Sample #2 looks the best to me.

Sample #3 is very difficult to read. The background would have to be much darker.

Light text on dark backgrounds are typically more difficult to read, though there are exceptions.

When to Use White Text on a Dark Background

[PaulOB]

You can check if the contrast matches guidelines in this contrast checker.

[DoubleDee]

@Force_Flow

Between the three, Sample #2 looks the best to me.

Sample #3 is very difficult to read. The background would have to be much darker.

Light text on dark backgrounds are typically more difficult to read, though there are exceptions.

http://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/

What do you think about Sample #1?

That is the one I would like to use because the slightly darker background differentiates it from my light shaded nested boxes…

(Maybe it would help if I took a larger screen-shot of what I am trying to do?) :-/

Sincerely,

Debbie

[DoubleDee]

@Paul_O_B

You can check if the contrast matches guidelines in this contrast checker.

Paul, you never cease to amaze me with your knowledge and resources!! :tup:

So, how much do you trust that tool?

Is it objective or subjective?

BTW, it is telling me that Font (#333) and Background (#CFCFCF) “sort of” pass, which is good to know, but which doesn’t help me solve my larger issue…

Sincerely,

Debbie

[PaulOB]

@DoubleDee

Paul, you never cease to amaze me with your knowledge and resources!! :tup:
So, how much do you trust that tool?

It follows the suggested algorithm from the W3c guidelines so should be a reliable way to determine contrast.

[DaveMaxwell]

@DoubleDee

BTW, it is telling me that Font (#333) and Background (#CFCFCF) “sort of” pass, which is good to know, but which doesn’t help me solve my larger issue…

If you look at the bottom of that tool, you can see Value(%) sliders. If you slide the foreground color to #262626, the contrast is enough.

[DoubleDee]

@DaveMaxwell

If you look at the bottom of that tool, you can see Value(%) sliders. If you slide the foreground color to #262626, the contrast is enough.

Actually, after my OP I started thinking like a hacker, and tried #252525 for the Font and that seemed to do it.

Which leads me to some more questions…

1.) What makes a Hex Color “legit”? (In 2013, is any color acceptable, or does it have to be off of a Color Table like back in the old days?)

2.) In the past, I picked up here on SitePoint that #333 makes for a softer, easier to read Font Color than straight black. (If you agree with this, then would the same logic apply to #252525 ??)

3.) If a Font/Background color combination meets both tests on that site that Paul provided, then is it safe to use? Or is that just one of many other factors that need to be considered?

4.) How does this modified box using Font (#252525) and Background (#CFCFCF) look…

Sincerely,

Debbie

[DaveMaxwell]

@DoubleDee

Actually, after my OP I started thinking like a hacker, and tried #252525 for the Font and that seemed to do it.

I only gave you the value I did because it was the first in the slider which met the contrast threshold, but your color is close enough…

@DoubleDee

Which leads me to some more questions…

1.) What makes a Hex Color “legit”? (In 2013, is any color acceptable, or does it have to be off of a Color Table like back in the old days?)
2.) In the past, I picked up here on SitePoint that #333 makes for a softer, easier to read Font Color than straight black. (If you agree with this, then would the same logic apply to #252525 ??)
3.) If a Font/Background color combination meets both tests on that site that Paul provided, then is it safe to use? Or is that just one of many other factors that need to be considered?
4.) How does this modified box using Font (#252525) and Background (#CFCFCF) look…

1. Any color is acceptable. There’s no need to stick to the “web safe” colors anymore…
2. Yes, it’s a softer color so should be easier on the eyes than straight black - it had the opposite problem you were running into - too much contrast.
3. Considering the tool Snook devised met W3C and WGAC2.0 guidelines, I’d guess as good a guideline as anything else.
4. I think it’s fine - if anything else, I would increase the kerning (letter-spacing in css) a little and possible make it all caps (the caps would be a matter of personal taste, though).

[Stevie_D]

[font=verdana]

@DoubleDee

1.) What makes a Hex Color “legit”? (In 2013, is any color acceptable, or does it have to be off of a Color Table like back in the old days?)

You can use any colour. The days of needing to use web-safe colours are long, long gone – the number of people using systems so old that they can’t cope with full colour can just about be counted on the fingers of one foot. Obviously you want to be sure that your colours gel well with each other, but there’s no technical reason why any particular hex colour is better than any other.

2.) In the past, I picked up here on SitePoint that #333 makes for a softer, easier to read Font Color than straight black. (If you agree with this, then would the same logic apply to #252525 ??)

Definitely. Anything between about #111 and #333 is good (for reference, the text in this reply box is #222). It is well documented that avoiding a #fff/#000 contrast is very helpful to people with dyslexia, but it goes much wider than that in creating a site that doesn’t look too stark or glaring, and is easier for almost everyone to read than pure black.

3.) If a Font/Background color combination meets both tests on that site that Paul provided, then is it safe to use? Or is that just one of many other factors that need to be considered?

In terms of accessibility and readability, the important thing is to check that it passes WCAG2 AA. I would then generally try to get either “compliant” or WCAG2 AAA to pass as well for body text, although ticking every box may limit your options more than you want.[/font]

[ralphm]

If you are into a bit of mathematics, there’s a formula for checking appropriate contrast (which I picked up from the shadow of death himself).

Firstly, you need to get the RGB values of the two colors you are going to compare. (You can easily do that in Photoshop, or via the Chrome inspector tools, if you don’t know the RGB value already.)

For example, 333 is (51, 51, 51) in RGB (that is, the values for R, G and B is 51 in each case), and #CFCFCF is (207, 207, 207) in RGB.

Now, to each of those sets of numbers you apply this formula:

0.3R + 0.59G + 0.11B

So, for (51, 51, 51) you get (0.3 x 51) + (0.59 x 51) + (0.11 x 51) = 15.3 + 30.09 + 5.61 = 51

For (207, 207, 207) you get 62.1 + 122.13 + 22.77 = 207

(In this example, it obviously wasn’t necessary to apply the formula, because each of the three values was the same and thus the answer was already obvious. But you get the idea.)

Now, the final step is to subtract one from the other, leaving 207 - 51 = 157.

Now, what’s the point of this figure of 157? You can use it to decide if there is enough difference between the two colors. On a scale of 0 to 255, this number of 157 represents represents about 62% contrast (157 ÷ 255), which isn’t too bad, apparently meaning that about 80% of users will find it OK. Still, that’s 20% of people who will have trouble, which is quite high.

[DoubleDee]

Wow! Lots of great responses.

Okay, so I am usually apprehensive about posting too much online, but since all of you have tried to help so much, fair is fair…

[ot]Some background on what I’m trying to do…

In addition to “readability”, one key thing I’m trying to accomplish here, is to use colors to help people understand the complex data arrangement I have.

Without getting into all of the details, here is a high-level summary…

The boxes “Featured”, “Business Structure”, “Store Type”, “Offering”, and “Accounting” are conceptually related and at the same level. (This may not be apparent, since the “Featured” box is expanded and has more detail than the boxes in the right margin. But conceptually, they are all showing data at the same “level”.)

So I was hoping on using colors to help sighted users this relationship. (Of course I am also using the same Heading Tags from a semantics standpoint!!)

By contrast - no pun intended - the inner boxes are subsets of “Featured”, and thus I want people to see this nested relationship, if that makes sense?!
[/ot]

So, here are two combinations that I was playing with yesterday…

Option #1: (Before)

Option #2: (After)

Both of these are pass the WCAG2 AA test from the site Paul posted, however I kinda felt the “Before” one didn’t have enough contrast, and was maybe too dark. Also, doing some User Testing at the library, not everyone could see that there were two different types of boxes shown via different shades of grey…

So last night I was playing around with one of my favorite websites - HTML Color Picker - and decided to throw in an extra color?! (The goal for my website is to use a “minimalistic” design, so I’m a little concerned about adding in another color to the mix, but blue-grey and grey go together nicely, and I think the extra color is fairly “subtle”, although we’ll see what you guys think?!) :-/

More Questions:

1.) So what do you think of Option #1 (Before)?

2.) What do you think of Option #2 (After)?

3.) Does adding the light blue-grey to my inner boxes in Option #2 distract too much?

4.) Particularly in Option #2, is it fairly intuitive that all of the Grey Boxes might have some sort of relationship/grouping?

5.) Particularly in Option #2, is it fairly intuitive that “Economy” and “Markets” are sub-sets of the “Featured” (dimension)?

6.) Particularly in Option #2, can you extrapolate, and see that if you clicked on something like “Sole Proprietorship” or “Partnership” that you might expect to see something similar to what is displayed under “Economy” or “Markets”?

Thanks for everyone’s help so far!!! :tup:

Sincerely,

Debbie

[DaveMaxwell]

@DoubleDee

Option #1: (Before)

Option #2: (After)

More Questions:

1.) So what do you think of Option #1 (Before)?

2.) What do you think of Option #2 (After)?

3.) Does adding the light blue-grey to my inner boxes in Option #2 distract too much?

4.) Particularly in Option #2, is it fairly intuitive that all of the Grey Boxes might have some sort of relationship/grouping?

5.) Particularly in Option #2, is it fairly intuitive that “Economy” and “Markets” are sub-sets of the “Featured” (dimension)?

6.) Particularly in Option #2, can you extrapolate, and see that if you clicked on something like “Sole Proprietorship” or “Partnership” that you might expect to see something similar to what is displayed under “Economy” or “Markets”?

1. I like #2 better than #1 as there’s more contrast, but the blue-gray is distracting.
2. see #1
3. see #1. To be honest, I don’t like the box in the box look - it’s over kill. But that’s my taste - if you like it, let it go.
4. No, I don’t think they’re intuitive enough. They seem disconnected - these groupings would benefit from the surrounding box more than the featured.
5. Yeah, it’s intuitive, but like I stated earlier, I don’t care for the box within a box look.
6. Nope - for same reason as #4

[DoubleDee]

@DaveMaxwell

1. I like #2 better than #1 as there’s more contrast, but the blue-gray is distracting.
2. see #1
3. see #1. To be honest, I don’t like the box in the box look - it’s over kill. But that’s my taste - if you like it, let it go.
4. No, I don’t think they’re intuitive enough. They seem disconnected - these groupings would benefit from the surrounding box more than the featured.
5. Yeah, it’s intuitive, but like I stated earlier, I don’t care for the box within a box look.
6. Nope - for same reason as #4

OUCH!!

Wow, crash and burn! (At least with one user…)

So, how would you do things then?

[ot]This is sort of a tricky and sensitive topic… I clearly can use some expert advice, but I am also trying to NOT display every last corner of my website and business model… (Certainly not before I “go live”.)

I thought I had a pretty good design, and it seems to mirror what a lot of other sites have done in the past. Yet I feel I have a much more complex Data Model. Which is part of my dilemma… How do I communicate all that I have to offer, in a way that is streamlined and concise??

And how do I get some help here without saying, “Here, take my business plan!!”
[/ot]

I typically value your advice on SitePoint, but that’s a bummer you don’t like what I’ve worked so hard on…

Sincerely,

Debbie

[DaveMaxwell]

@DoubleDee

OUCH!!

Wow, crash and burn! (At least with one user…)

I wouldn’t call it crash and burn…just a difference of opinions. I am more of a minimalist/modernist when it comes to decorative touches, and for me, there’s too many decorative touches which distract from the content.

@DoubleDee

So, how would you do things then?

I would simply place the decorative elements around the groupings, not each individual element. I did a quick and dirty repaint of your sample to show you what I mean…if anything, I might had added drop shadows around the groupings to add more depth to the groups, but I didn’t feel like taking the time to do that…

@DoubleDee

Off Topic:

I thought I had a pretty good design, and it seems to mirror what a lot of other sites have done in the past. Yet I feel I have a much more complex Data Model. Which is part of my dilemma… How do I communicate all that I have to offer, in a way that is streamlined and concise??

And how do I get some help here without saying, “Here, take my business plan!!”

[ot]It’s a balancing act for sure, and a lot like writing - place the elements, then edit, edit, edit. Remove elements which aren’t critical, move content which is similar around to keep them togehter, etc.

As for how you get there, sometimes you have to just throw it against the wall and see what sticks. And overthinking things just complicates things. At some point you need to draw the proverbial line and get to a point to release. You can always clear it up later…[/ot]

@DoubleDee

I typically value your advice on SitePoint, but that’s a bummer you don’t like what I’ve worked so hard on…

Not that I don’t like it - it’s a matter of taste and a difference of opinions. But testing is the only way to find what your customer wants and will use…

[DoubleDee]

@DaveMaxwell

I wouldn’t call it crash and burn…just a difference of opinions. I am more of a minimalist/modernist when it comes to decorative touches, and for me, there’s too many decorative touches which distract from the content.

Okay.

@DaveMaxwell

I would simply place the decorative elements around the groupings, not each individual element. I did a quick and dirty repaint of your sample to show you what I mean…if anything, I might had added drop shadows around the groupings to add more depth to the groups, but I didn’t feel like taking the time to do that…

Thanks for taking time to throw something together.

Well, the good news is that your sample is NOT drastically different from mine. And actually should be fairly easy to attain. (No “Throwing the baby out with the bath water!”)

To clarify, though, on a scale of 1 to 10 (“10” being “Best”)…

a.) How would you rate my “After” design with the blue boxes?

b.) How would you rate your modified screenshot below?

@DaveMaxwell

[ot]It’s a balancing act for sure, and a lot like writing - place the elements, then edit, edit, edit. Remove elements which aren’t critical, move content which is similar around to keep them togehter, etc.

As for how you get there, sometimes you have to just throw it against the wall and see what sticks. And overthinking things just complicates things. At some point you need to draw the proverbial line and get to a point to release. You can always clear it up later…[/ot]

I am the “Queen of Analysis Paralysis”!!!

(It’s just that I have just poured so much of my life into this website over the last 24 months, and I really wanna “Knock it out of the park”.)

@DaveMaxwell

Not that I don’t like it - it’s a matter of taste and a difference of opinions. But testing is the only way to find what your customer wants and will use…

True.

I wonder what some of the other Design Gurus here at SitePoint think…

Sincerely,

Debbie

[DaveMaxwell]

@DoubleDee

Thanks for taking time to throw something together.

Well, the good news is that your sample is NOT drastically different from mine. And actually should be fairly easy to attain. (No “Throwing the baby out with the bath water!”)

To clarify, though, on a scale of 1 to 10 (“10” being “Best”)…

a.) How would you rate my “After” design with the blue boxes?

b.) How would you rate your modified screenshot below?

Unless it’s complete trash, I would NEVER suggest a drastically different approach. Even if it’s not what I like, it’s not my call and I try and respect other’s choices.

To answer your scale questions.

a) Your design would be more towards a 6. Too many decorative elements, too much white space, and the blue just doesn’t go with the gray at all - none of the color scheme generator sites found a complimentary blue to the grey being used (which may be the issue?)
b) My design wouldn’t get more than a 7. It was a quick throw together workup, and there are definitely issues with spacing (not enough whitespace) and typograghy (I would want more white space between the title and the content, and more white space between the content and the images - which could probably be 10% bigger as well).

Part of the issue is we’re only seeing bits and pieces in the various threads - I can understand why, but there are definitely causal issues which occur because of the approach.

What I WOULD suggest is taking a step back and validating the color scheme again. I like to use Color Scheme Designer 3, and I just found this [URL=“http://www.perbang.dk/color+scheme/”]color scheme generator which is a little cludgier, but it has a couple more scheme options to choose from. Just look through it and make sure all your colors match (will the blue on your links go with your main color pallette for example?)

@DoubleDee

I am the “Queen of Analysis Paralysis”!!!

Yup, and I think I’ve told you a couple other times in some other threads that I think you’re overthinking things and there can be drawbacks to it. Too often when you get too far in the weeds, you lose the overall picture. You can always find things to improve, but if you keep changing the target, the project never gets done. It’s called scope creep, and it usually sounds the death knell for projects if they’re not nipped in the bud…

@DoubleDee

(It’s just that I have just poured so much of my life into this website over the last 24 months, and I really wanna “Knock it out of the park”.)

Considering you’ve been on this for two years, perhaps it’s time to draw a line? Set yourself a firm date - give yourself say, two months - to get done what you can, then implement that version. Take a week completely away from it (except for full stop error fixing of course), then revisit the whole project. You’ll find it’ll be easier to see what’s working, and what’s not, because others will use it and give feedback - just because you like the way something works doesn’t mean others will. Conversely, you might think something is clunky as heck, but others love it.

@DoubleDee

I wonder what some of the other Design Gurus here at SitePoint think…

Sounds like you need to set yourself up for a review then, huh?

Going back to my earlier timeframe - give yourself one month to fix everything you think needs to be fixed, then come back to it and ask for a review. If you use the mention tags, you can ask anyone to throw their two cents in. So if you want Paul and Ralph and me and whomever to give it a look see, use the mention tag to draw our attention to it, and you might find others who give valuable advice as well…