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?!
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?!) :-/
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: