PDA

View Full Version : White text on black background



Andree
09-10-2013, 07:00 PM
Hard to read, for me. So I don't spend a lot of time reading the articles, as it really strains the eyes. The blue and the red words are "neon" bright.

Here is an article on text and background colors:
http://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/

I was going to try to do a poll for the four options on the link above, but I don't know how to do a poll. I like the black text on the light gray background, personally. In a dark room the page isn't glaring, and in a bright room, the background is just a bit darker.

There are many links for the pros and cons of background and text colors.

When I was originally shopping for cars and reading about various cars, I have to admit to clicking AWAY from Fiat 500 USA because the text was too straining on the eyes. I can read the forums fine, but the articles are problematic for me. Old eyes.

Maybe I'm the only one. If not, maybe Chris could create some mockup pages, the same page, with all four text/background options. And see what people think which is easier to read.

redred
09-10-2013, 07:59 PM
Try this: go to Settings at the top. On the left hand side, click on General Settings. Scroll down to the bottom (Miscellaneous Settings) and click on the drop down menu for Forum Skin. Choose Dark Theme.

Now here's the trick.... when you do this, the "settings" option at the top of the page disappears. IF you don't like it, the only way to go back is to find a drop down menu called "Forum Actions" which is in the middle set of menus. Choose General Settings from there and then you can change the Forum Skin to something else. (That one threw me for a loop for a while)

Evelyn Salt
09-10-2013, 09:40 PM
This is great ;dark theme much better

Tweak
09-10-2013, 11:12 PM
Try this: go to Settings at the top. On the left hand side, click on General Settings. Scroll down to the bottom (Miscellaneous Settings) and click on the drop down menu for Forum Skin. Choose Dark Theme.

Now here's the trick.... when you do this, the "settings" option at the top of the page disappears. IF you don't like it, the only way to go back is to find a drop down menu called "Forum Actions" which is in the middle set of menus. Choose General Settings from there and then you can change the Forum Skin to something else. (That one threw me for a loop for a while)

This is how I do it and I don't think it could get any easier... go to the bottom left corner and switch to the one you want. :confused:

(I've been using the Dark Theme since I joined, I apparently did not realize this was for the main site and assumed it was for the forum but this is still good info for anyone that just hasn't noticed it yet). :p

Fiat500USA
09-10-2013, 11:41 PM
(I think Andree is talking about Fiat500USa.com)

Thanks for the input Andree. I always wondered why you never link to my stories! LOL

I did test the site with someone with eyesight issues and it led me to increase the font size and I don't actually use white text. It is a grey, just like that articles suggests. Below is the color of the font I use:

https://lh6.googleusercontent.com/-KICmbjTXh30/Ui_Z06Rj-II/AAAAAAAASd4/Y2Yn0bcIiY0/s800/fiat500usa.com-text%2520color.jpg

I designed the site in 2009, and now the dark background is a part of the site's signature (it did start off with a white background in January 2009!). I was under the impression that people with eyesite issues liked the dark background, so I made sure the site meets Web Content Accessibility Guidelines (WGAC 2.0) for contrast. Is it the text color that is the problem or the other colors? The blue post titles are to try to funnel the eye to the stories and the other two colors (red and purple) help differentiate what's going on.

I'm looking into revising it and will take a look at your suggestions.

Andree
09-11-2013, 02:31 AM
(I think Andree is talking about Fiat500USa.com)

Thanks for the input Andree. I always wondered why you never link to my stories! LOL

I did test the site with someone with eyesight issues and it led me to increase the font size and I don't actually use white text. It is a grey, just like that articles suggests. Below is the color of the font I use:

https://lh6.googleusercontent.com/-KICmbjTXh30/Ui_Z06Rj-II/AAAAAAAASd4/Y2Yn0bcIiY0/s800/fiat500usa.com-text%2520color.jpg

I designed the site in 2009, and now the dark background is a part of the site's signature (it did start off with a white background in January 2009!). I was under the impression that people with eyesite issues liked the dark background, so I made sure the site meets Web Content Accessibility Guidelines (WGAC 2.0) for contrast. Is it the text color that is the problem or the other colors? The blue post titles are to try to funnel the eye to the stories and the other two colors (red and purple) help differentiate what's going on.

I'm looking into revising it and will take a look at your suggestions.

I had to say something. You'd mentioned I could link over to the stories on your site, and I'm thinking "GAAAAHHHHH, noooooo, not the white on black text!" I do try to read what you post, but searching for it, I can't. I can't have the series of pages and link and everything all in multicolor neon black light poster intensity.

It's like this: http://www.welcometothe70s.com/blacklights.html

I remember most all of those posters. Some were flocked too.

I think it's the way the colors/text seems to "glow" around it, as though the text itself were illuminated, and lighting the adjacent black area. It's not a crisp, clean break between text and background. There's probably a word for this, but I don't know what it is, heh.

I once read a fanfic done all in red text on black. The story was pretty good, but I had to keep taking breaks to rest my eyes. Perhaps it is because I am not accustomed to it, and don't read white on black every day.

Oh, the word is "halo". And the best example I can find for the moment is this image (hopefully it stays an image with the three yellow spots): http://www.amandamackay.com/handmade-blog/wp-content/uploads/2011/10/Pigment-dispersion-syndrome.jpg

The picture in the upper right is "halo" and what I'm talking about when it comes to reading the white on black text. If the big dot was a pixel in the individual character, it would seem to "glow" or have a halo around it.

Also, after looking at the dot image, I look back at this white forum page and see big black floating dots (after having stared at the other thing). Since all the pages I view are not light text on black background, I end up having those (another word I don't recall offhand) reverse projected images, then making it hard to read what I was already reading.

This one is somewhat easier to view, they are using a darker gray tone:
http://www.diamondsbylauren.com/index.php/categories/new-diamonds-and-new-diamond-jewelry

And the pictures break up the text, as well as the text being assigned to an individual photo. Just a tiny bit of text. I wouldn't want to read that text on a paragraph basis though. Still would be hard to focus over a long period of time.

Check out the page numbers. The active page is the gray, while the others are bright white. My eyes are first drawn to the brightest white, rather than the darker gray tone. It's not the way I'd want to set up a page. Although trying out various text colors in a profile on a service long ago, I failed at making good choices. I'd THINK something would look good together, and it didn't.

But I bet black over tan would look good. Like a Mocha Latte color. ;)

Fiat500USA
09-11-2013, 07:18 PM
Thanks for the input. Wow, didn't think it was like that neon site ! LOL I don't use any white for text and do use grey, but if I go darker like the diamond site it is hard for me to read. I'll take a look and see if I can hone the colors. I wonder how many others have a hard time reading the site? Let me know. Thanks.

Tweak
09-11-2013, 09:54 PM
I do have glasses for long range vision improvements but I've never realized there were any issues with the site...a little color change might be nice though.

Andree
09-12-2013, 02:39 AM
Thanks for the input. Wow, didn't think it was like that neon site ! LOL I don't use any white for text and do use grey, but if I go darker like the diamond site it is hard for me to read. I'll take a look and see if I can hone the colors. I wonder how many others have a hard time reading the site? Let me know. Thanks.

Don't go as dark as the diamond site. That site showed up when I was searching for "halo" regarding the vision. The diamond site has halo semi-mounts.

You can get used to seeing your own site, but it can be an eye-opener to look at other sites with dark backgrounds.

Here's one of the most glaring examples I've seen: http://www.nickelback.com/events

Tell me that white doesn't require sunglasses to read. It literally upsets my stomach. On the other hand, I like the colors. Black, brown, mocha latte. LOL. Try that shade of tan with black lettering. Like the doodad shown in the tan box next to the white words "Upcoming Tour".

Do a Google Image search for: "Websites Black Background" to see a bunch of examples.

Here's a "Do's and Don'ts of Dark Web Design" article:
http://www.webdesignerdepot.com/2009/08/the-dos-and-donts-of-dark-web-design/

The above link has examples of where a dark background works, and when it doesn't. Font, size, etc. Many good tips.

This has "30 Beautiful Dark Website Designs for Inspiration": http://sixrevisions.com/design-showcase-inspiration/dark-website-designs-inspiration/

More links at the bottom, showing other dark websites.

This one shows some dark gray and some dark brown: http://sixrevisions.com/web_design/50-beautifully-dark-web-designs/

Only the Riffs Music Academy has "electric lettering" of pink and blue.

Andree
09-12-2013, 02:44 AM
I do have glasses for long range vision improvements but I've never realized there were any issues with the site...a little color change might be nice though.

It might be just me and my eyes.

Andree
09-12-2013, 08:21 AM
This one starts off fairly readable, the part that is the actual note:

http://www.bonjovi.com/en/news/60984182292/note-from-jbj-greetings-from-mexico-city#.UjGuULzbJjA

The gray and black background of comic book style and a sheer black overlay with the light gray text seems to be fine.

Then scroll down to where people add comments. Ahhhhhhh, my eyes! LOL.

The main page is similar to the other site with the contrast dates: http://www.bonjovi.com/en/

Not done by the same company, but they have similar elements. Blinding elements. ha!

Back to bed now...

Tweak
09-12-2013, 09:48 AM
It might be just me and my eyes.

Ah, well I hope it gets worked out in a way that will make it better for you!

Indie500L
09-12-2013, 11:54 AM
I always work in a dark room on computers and set the screen dim, people walk in and keep turning on lights and I tell them the screen is lit!!! I also wear sunglasses whenever I go outside - this all helps to keep my eyes sensitive to light so that I can see well in the dark. I also had a half strength set of "computer" glasses made of my usual eye glass prescription that I need for distance vision which really help for the 2 feet to 6 feet distances. Any closer and I do not need eye glasses at all (near sighted) and in the past several years my ability to focus has been reduced quite a bit - what's interesting is my eyeglass prescription has not changed in over 20 years and I still see better than 20/20 with the glasses on. The only thing I find with this site is that it heats up my TF700 tablet with all the video activity on the page and once in a while an Ad cuts into a youtube video window and no matter what I do I can not see the blocked part of the video.

Andree
09-12-2013, 03:46 PM
I always work in a dark room on computers and set the screen dim, people walk in and keep turning on lights and I tell them the screen is lit!!! I also wear sunglasses whenever I go outside - this all helps to keep my eyes sensitive to light so that I can see well in the dark. I also had a half strength set of "computer" glasses made of my usual eye glass prescription that I need for distance vision which really help for the 2 feet to 6 feet distances. Any closer and I do not need eye glasses at all (near sighted) and in the past several years my ability to focus has been reduced quite a bit - what's interesting is my eyeglass prescription has not changed in over 20 years and I still see better than 20/20 with the glasses on. The only thing I find with this site is that it heats up my TF700 tablet with all the video activity on the page and once in a while an Ad cuts into a youtube video window and no matter what I do I can not see the blocked part of the video.

You need to make your window wider to see the full YouTube video. That may mean changing the screen resolution, which then makes the text tiny. That's what I have right now. Tiny text.

You can see that the forums don't have a fixed width for the text area, it adjusts as you narrow or widen the window. Everything resets nicely as you do it, except the YouTube videos, which DO have a fixed width. If the window isn't wide enough for the YouTube video, part of the video will be obscured, starting on the right side.

Tweak
09-12-2013, 11:30 PM
You need to make your window wider to see the full YouTube video. That may mean changing the screen resolution, which then makes the text tiny. That's what I have right now. Tiny text.

You can see that the forums don't have a fixed width for the text area, it adjusts as you narrow or widen the window. Everything resets nicely as you do it, except the YouTube videos, which DO have a fixed width. If the window isn't wide enough for the YouTube video, part of the video will be obscured, starting on the right side.

I know you are on a Mac but doesn't zooming in on the page help some? With Windoze it is as easy as holding the Control key and scrolling the mouse wheel up/down to adjust zoom which adjusts text size.

NGEN
09-12-2013, 11:55 PM
Wow just made the switch and the theme is black, white and blue. This forum just became THAT much cooler! Not that it wasn't cool already....

Fiat500USA
09-13-2013, 12:15 AM
This one starts off fairly readable, the part that is the actual note:

http://www.bonjovi.com/en/news/60984182292/note-from-jbj-greetings-from-mexico-city#.UjGuULzbJjA

The gray and black background of comic book style and a sheer black overlay with the light gray text seems to be fine.

Then scroll down to where people add comments. Ahhhhhhh, my eyes! LOL.

The main page is similar to the other site with the contrast dates: http://www.bonjovi.com/en/

Not done by the same company, but they have similar elements. Blinding elements. ha!

Back to bed now...

I changed the text color to the one on the Bon Jovi site. My original color was nearly identical (my color was #cccccc , theirs is c6c6c6) Not much of a difference?

Tweak
09-13-2013, 09:04 AM
Wow just made the switch and the theme is black, white and blue. This forum just became THAT much cooler! Not that it wasn't cool already....

Only just now you do this... I did this so long ago I forgot there were other options. :p It is much nicer with the dark theme. :cool:

Andree
11-18-2013, 06:48 PM
Fiat500USA, the new color for text is MUCH easier to read. Just that tiny adjustment makes a huge difference for me. Thank you!

Fiat500USA
11-19-2013, 02:39 AM
Fiat500USA, the new color for text is MUCH easier to read. Just that tiny adjustment makes a huge difference for me. Thank you!

Glad to hear! Thanks for the feedback!