Results 1 to 2 of 2

Thread: Troubles with color-grading and background

  1. #1
    Join Date
    Oct 2013

    Question Troubles with color-grading and background

    Hi, guys.

    First of all, I must tell you that I am fairly new to website developing and graphics design... so don't be too hard on me x)

    I have two websites that I'm working on, where I have some problems with finding the correct color-grading to use. I feel the current colors are crashing with the general color choices on the site, and I can't seem to find the right grading.

    On this site http://testsitemoseng.weebly.com/ it's quite obvious that the problem is the head menu. It was originaly slight dark brown, and that was nice, but after the background image was entered it crashed with the black color.

    On this site http://testsitemoseng2.weebly.com/ is the problem the first paragraph on the right of the home page. The site is in norwegian, so the content is not important.. but if you are on a smaller screen, the coloring of the text crashes with the fog in the background picture. If I make the text black, or just darker, it crashes with the dark colors of the mountains in the background.

    Some suggestions and feedback is very much appreciated!
    Thnx in advance, guys

    bw- AM

  2. #2
    There's a mathematical formula for figuring out if a foreground and background color are going to be legible -- and really that's your issue here, legibility. It's the Y component of a YUV colourspace, aka luminance. You need the 'emissive' formula, not the 'reflective' formula tools like Photoshop have built in. This formula can be found in the EGA/VGA reference, the joint IBM/Microsoft/Apple Interface guidelines, and the Web Content Accessibility guidelines.

    Y = 29.9% Red + 58.7% Green + 11.4% Blue

    If the difference between the two colors is less than 50% it's guaranteed to have legibility issues for more than half the population. An ideal contrast is closer to 75%, though some fancy (goofy) webfonts and font rendering engines, as well as font sizes can make you need anywhere from 85% to 100% contrast. No joke, some 'thin' fonts at small (sub 14px) sizes are illegbile even at 100% contrast. Part of why I'm not a fan of webfonts... the other part being their ridiculous file sizes

    For example, let's take your first page's menu. That massive background image that -- to be brutally frank has no business on a website in the first place -- has both a black and grey background area. It is effectively impossible to come up with a color that reaches 50% difference to both of those at the same time. The black is obviously Y=0 since it's #000000 / r =0, g = 0, b = 0, while the gray is way up at #C0C0C0 / r = 192, g = 192, b = 192. In order to reach at least 50% on the gray you'd need to be down at 64 / #404040, but that's below the #808080 / 128 that the black has as it's minimum. Bottom line, that background isn't viable for having text over it. (on top of it's file size making it not viable for belonging on a website). There is no color that's going to work well with that and meet accessibility minimums.

    You might have to resort to giving them their own solid (avoid transparency behind text! makes it harder to read) background if you are going to keep that background image. Though with so much of that image covered up I'd just axe it entirely.

    The second site is similarly afflicted with one of those massive background images that you really can't put text over and have it legible, and is too big to belong as a background on a website in the first place.

    You're putting text over images and using colors with insufficient contrasts. Solution? Don't put text over images and use the above math to make sure it's legible.

Thread Information

Users Browsing this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles