I have been neglecting this blog and not posting as much as I should so I am going to do some small snippets of information on web design and development, when I feel the need!
As the title so rightly says, it is very important to set good font and background colours when building a website. I think this is something that is so often neglected, mostly I think because we use images and don’t think about what happens if those images do not load or a user has opted to not display or download the images. What happens when you have a dark image on a white background and to provide good contrast to the dark image you set the font colour to white? Well you end up with something great when images are turned on but when they are off you end up with white text on a white background. Not good to anyone!
This is something we need to remedy and here is how.
The web developer toolbar is your friend!
When developing it is a good idea to turn images off completely, this will force you to have to add a background colour when you set up your font colour. Alternatively you can turn your photoshop file into the finished product and then use the web developer toolbar in Firefox to disable or hide images, you will then be able to see all the places where your font colour and background colour do not have enough contrast to be readable when images are turned off.
The simple rule is to pick a solid colour from your image and specify that as your background colour. This will ensure a good contrast with your font colour, it also is a good option because if a user resizes the text it will always have a colour set when the image is not large enough to cover all of the text. When I say it will provide good contrast, that is if you have good contrast between image and font colour already!
Its good practice that every time you set the background property in your CSS file that you also set a background colour to go with it. Once you have set your colours all should be good all that is left to do is use a colour contrast tool to check that you are adhering to standards and that you have at least a luminosity ratio of 4.5:1 between foreground and background colours as directed by the W3C.
There are a ton of good resources out there and this is a simple step that makes a big difference and makes your site a little more robust. Below are a few resources that I use and that I recommend.
Resources
Colour checking tools
Firefox add-ons
Comments
1 Mark Henry
Yes of course...The colors plays an important part in the web page...Generally it should be visible to users. The combination of background and font colors shouldn’t create an uneasy look to the page..Great post..
Some Rules :Only Basic HTML is allowed in comments, keep on topic, leave 5 mins between posts, comments expire in 30 days