Skip to main content ↑ ↓
Topic: Colors (Read 6347 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Colors

While preparing to do a few things with 1.1 (now that 1.0.5 is close to done) I wrote a small program to read all the hex values from a css file, count the usage, and then try and sort them visually using HSL values.  There are some RGB values in there as well, I should work on extracting them ... there are also some named values in there as well (actually a quick look show they exists as the name in some places and the hex in others)

Anyway here is the result form the light css alone, 100 hex colors were found, many used just once and many to my eye seem very close to one another.  Now since I'm a bit more of a left brain, seems we can really consolidate some of these colors and reduce the palette quite a bit.  That in turn should make "colorizing" other themes a bit easier than it is today.

Re: Colors

Reply #1 –

LOL!

Great job!
And yes, I think it makes sense to cut down the number of color used. nods
Bugs creator.
Features destroyer.
Template killer.

Re: Colors

Reply #2 –

After I converted a couple of the common names to hex and the rgb (not rgba) to hex, it was 104 colors.  I've cut that down to 60. 

One could probably do more but at 60 it will be difficult to see what changed.  There were a lot of used in 1 place colors that were close to other ones in use so they simply were "combined".  Others were just a shade off but were a 1px wide border on a hover button or something like that.  Have not looked at besocial just yet but will go through the same routine.

Re: Colors

Reply #3 –

It'd be interesting to see if it actually looks different with the reduced palette.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Colors

Reply #4 –

Quote from: Antechinus – It'd be interesting to see if it actually looks different with the reduced palette.
*nods*, me too  ... most of what changed were the used in one place colors.  I also merged colors that were generally the same which is somewhat subjective.  ... The test file is here: https://github.com/Spuds/Elkarte/blob/170a3817445f343860b2de6975f52495108422e8/themes/default/css/_light/index_light.css

I did change the text to be a bit darker on purpose as we do no currently meet AA standards so figured I'm bump that contrast up a touch as long as I was reducing things a touch.  Thats not to say I did mess up a few areas along the way, search / replace FTW.  I guess this file will work on a 1.0 TEST site, but its the css file for the 1.1 branch.

Re: Colors

Reply #5 –

Thanks. I'll check that CSS out as I'm curious. If the palette can be reduced without noticeable effects, I'm all for it.

IIRC, when I did the contrasts I was using the Hewlett-Packard standards instead of W3C standards. Short version is this will screw fewer people, AFAICT.

Good rundown on it here: http://blackwidows.co.uk/blog/2006/10/03/does-w3c-get-its-contrasts-wrong/

ETA: Follow up article here: http://blackwidows.co.uk/blog/2006/10/06/more-on-dyslexia/

And the Black Widow contrast checking tool is here: http://blackwidows.co.uk/resources/color-contrast-analyser.php

I have talked to a few dyslexic people as well, or to people who know dyslexic people, and it's apparently right what that article says about too much contrast making letters appear to move all over the page if you're dyslexic. I also know of a blog run by a dyslexic woman who is an academic. Obviously she has managed to work around her dyslexia (couldn't be an academic otherwise) but I did notice her blog uses a text contrast that is towards the lower end of what I find clearly legible.

I'm not dyslexic (far from it) but for some reason I find black text on a white background extremely unpleasant to read. I find it much easier to read if the contrast is turned down a bit. #444 text on #fff background is about my limit for comfort. I find #333 harsh and #666 really nice. #777 is starting to get a bit low on contrast for me, but would probably suit a dyslexic person well providing they had good short range vision.

The Light Elk theme uses #666 on #fff, which puts it smack between H-P's lower limit and the W3C lower limit for contrast. It's still well above the W3C lower limit for colour brightness.

The best solution would probably be to use variants, with different contrast available for different people.

ETA again: Oh and IIRC I used slightly paler text for larger font sizes and/or bold, with the idea being to balance the apparent contrast of those to match the contrast of the standard text. If you do bold in the same colour as standard text, I find it gets a bit much. Knocking it back slightly makes things seem smoother to read. Same with larger font sizes.

TBH I think in general, you're probably better off using a slightly larger font size than a higher contrast. The larger size will help people with poor short range vision and the lower contrast will help dyslexics.
Last Edit: September 08, 2015, 10:07:48 pm by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Colors

Reply #6 –

Quote from: Spuds – The test file is here: https://github.com/Spuds/Elkarte/blob/170a3817445f343860b2de6975f52495108422e8/themes/default/css/_light/index_light.css
Meh. :P

 Antechinus goes to submit pull request to reinstate ASCII wombatz :D

ETA: Based on a quick look on an old Elk build (only one I have on local) I'd say it's pretty damned good.

(Apart from the deplorable lack of wombatz, of course)
Last Edit: September 08, 2015, 09:50:04 pm by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Colors

Reply #7 –

@Spuds I still see words in that file. Did you mean to do that?

Re: Colors

Reply #8 –

I tend to find a little low the contrast of the current light variant (I don't remember the besocial one), at least when I look at it on the laptop.

And Ant the wombat is still there, just in another file. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: Colors

Reply #9 –

Yeah it might be borderline for some people. Personal preference. I'd be fine with it being bumped to #585858. That's still pleasant enough to read. #585858 is sufficient to get you to the W3C 500 colour difference recommendation. I'd be a bit wary of going darker than that on the text, unless you're going to provide a lower contrast stylesheet for some people (Which is easy enough to do. I might whip one up sometime).

What's the pixel pitch like on your laptop? Is the text noticeably smaller than desktop?
Last Edit: September 09, 2015, 03:27:26 am by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Colors

Reply #10 –

I use #464646 for the font.

Re: Colors

Reply #12 –

Quote from: Antechinus – Thanks. I'll check that CSS out as I'm curious. If the palette can be reduced without noticeable effects, I'm all for it.

IIRC, when I did the contrasts I was using the Hewlett-Packard standards instead of W3C standards. Short version is this will screw fewer people, AFAICT.

Good rundown on it here: http://blackwidows.co.uk/blog/2006/10/03/does-w3c-get-its-contrasts-wrong/
Thanks for the links, great info!  I've been using the http://webaim.org/resources/contrastchecker/ for contrast, well actually the entire tool can be used on a webpage http://wave.webaim.org/ which checks lots of other accessibility items. Look to be using  WCAG 2.0 standards.  It gives the OK to 666/fff combo for AA rating, 555/fff drives it up to AAA standards. 
Quote from: Antechinus – I'm not dyslexic (far from it) but for some reason I find black text on a white background extremely unpleasant to read. I find it much easier to read if the contrast is turned down a bit. #444 text on #fff background is about my limit for comfort. I find #333 harsh and #666 really nice. #777 is starting to get a bit low on contrast for me, but would probably suit a dyslexic person well providing they had good short range vision.

ETA again: Oh and IIRC I used slightly paler text for larger font sizes and/or bold, with the idea being to balance the apparent contrast of those to match the contrast of the standard text. If you do bold in the same colour as standard text, I find it gets a bit much. Knocking it back slightly makes things seem smoother to read. Same with larger font sizes.

TBH I think in general, you're probably better off using a slightly larger font size than a higher contrast. The larger size will help people with poor short range vision and the lower contrast will help dyslexics.
I also don't like the 000/FFF combo, to harsh for my eyes.  In that CSS I believe I moved to a 555/FFF to give it more contrast but not be too harsh.  When I first took Elk live  text legibility was something that folks commented about.  I ended up increasing the base font size and tweaked the contrast a bit.  It may be that the base font at 14px maybe to small across all the desktop/laptop/tabby space.

Thanks for the info/hints on the bold/large text, Not sure what color that went to in the file so I do a check and make sure its not off.
Quote from: Antechinus –
Quote from: Spuds – The test file is here: https://github.com/Spuds/Elkarte/blob/170a3817445f343860b2de6975f52495108422e8/themes/default/css/_light/index_light.css
Meh. :P

 Antechinus goes to submit pull request to reinstate ASCII wombatz :D

ETA: Based on a quick look on an old Elk build (only one I have on local) I'd say it's pretty damned good.

(Apart from the deplorable lack of wombatz, of course)
Cool  ... and don't worry the mascot is still proudly displayed in the main css :D
Quote from: Joshua Dickerson – @Spuds I still see words in that file. Did you mean to do that?
Nah, it just means I missed a few.  I tried to convert everything (less rgba) to hex codes (long style) so I could find and change them easier.  I'll go back and do another look to see what I missed!
Quote from: Antechinus – Yeah it might be borderline for some people. Personal preference. I'd be fine with it being bumped to #585858. That's still pleasant enough to read. #585858 is sufficient to get you to the W3C 500 colour difference recommendation. I'd be a bit wary of going darker than that on the text, unless you're going to provide a lower contrast stylesheet for some people (Which is easy enough to do. I might whip one up sometime).
Checked the 585858 and looks good, it gives a contrast ration of Contrast Ratio: 7.11:1 where as the 555 is 7.46:1, both provide AAA for normal sized text.  I think I'll move it to that based on those other links and HP data.

Re: Colors

Reply #13 –

QuoteWhen I first took Elk live  text legibility was something that folks commented about.  I ended up increasing the base font size and tweaked the contrast a bit.  It may be that the base font at 14px maybe to small across all the desktop/laptop/tabby space.
Yeah I was just checking this thread for new replies as a guest, which means the besocial variant, and I found the post text on that variant was fine, but the quoted text was borderline for easy reading. The contrast is better on the Light variant. No problems for me with quoted text on Light.

The 87.5% font-size may be a bit too small on some devices. I don't know if this was done on Elk (can't remember) but when I did mobile media queries elsewhere I re-declared the font stack starting with Android's Roboto.

Roboto is much better than Segoe UI on a small pixel pitch. Having Segoe UI up front made sense on Windows desktop since it was the standard GUI font for them, but it's never been seen on any mobile device AFAIK.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Colors

Reply #14 –

I forgot about this topic, but now I found it again. :P
I discovered, in the meantime, this site https://hex.corvidworks.com/ that extracts all the colors from a stylesheet, and running it on Light, it seems we have 65 colors at the moment (I can't see a way to post a link to the results, but just paste the http://www.elkarte.net/community/themes/default/css/_light/index_light.css url).
Still some are very similar and used seldom, by the bad sorting in the table I can see:
  • #eeefee almost identical to #eee and used once,
  • #e9e9e9 almost identical to #ebebeb and used once,
  •   #e5e5e5 similar to #e4e4e4 used twice,
  •   #d1d1d1 => #cfcfcf 3 times,
  •   #bababa => #bbbbbb once,
  •   #111111 => #000000 once
maybe doing a bit of digging others can be found.
Should we drop these as well? O:-)
Bugs creator.
Features destroyer.
Template killer.