Colour contrast checking tools to improve the accessibility of your design

If text does not have sufficient contrast compared to its background, people will have problems. People with color blindness or other visual impairments as well as people browsing the Web under less than ideal circumstances (bad monitor, window reflections, sunlight hitting the screen) may not be able to read the text, at least not without difficulty.

With that background out of the way, on to the actual color contrast checking tools. Some tools are Web based, while others are standalone applications or browser extensions that you run locally on your computer.

The list:

Colour Contrast Check: The tool gives you immediate feedback by showing what the chosen colour combination looks like and whether it passes the test.

Colour Contrast Analyser: You will need to enter the values for foreground and background colours into a form and submit it, after which the results are displayed.

Colour Contrast Visualizer: Using a slightly different approach, Tom Hooper’s color Contrast Visualizer helps you find acceptable color combinations by visualizing the colors that provide sufficient contrast on a color palette. color Contrast Visualizer is available in Flash and Adobe AIR versions, so you will need support for either of those to use it.

Colour Contrast Analyzer Firefox Extension: Instead of having you enter each colour combination manually, Gez Lemon’s Firefox extension finds all text elements in a document and examines the difference between foreground and background colours for them. It displays the results in a new tab, complete with previews of the colours. This can look a bit overwhelming, but it’s a good way of finding problematic areas of a design. Obviously this tool does not work with images – you’ll need an HTML document for it to work.

CSS Analyser: The CSS Analyser does a colour contrast test of your CSS. It also validates the CSS and checks that relevant text sizes are specified in a relative unit of measurement.

Luminosity Contrast Ratio Analyzer: This tool tests foreground and background colour combinations according to an algorithm developed by the Trace R&D Center.

Vischeck: The online tool simulates colour blindness on an image that you upload or on a web page that you specify, while the Photoshop plugin changes the colours of the document you are working on.

Contrast Analyser, Version 2.0: A standalone application available for Windows and Mac OS X. You can specify the foreground and background colours numerically or by pulling sliders, it will check and preview the selected colours against various types of colour blindness.

Graybit: It lets you submit a URL to a web page which will be converted to grayscale and displayed in your web browser.

Sim Daltonism: Available for Mac OS X only, this standalone application does not calculate colour contrast, but is still very useful. It simulates various kinds of colour blindness in realtime, which makes it easy to check if a design is likely to cause problems.


Source : 10 colour contrast checking tools to improve the accessibility of your design

8 Web Design Tactics to Help You When You're Stuck

Originally written by Matthew Inman (Oatmeal)

Web design can be incredibly frustrating. You'd think that with the infinite possibilities of what-goes-where it'd be pretty easy to land a design that works, yet somehow we've all been stuck before: working hour after hour on a design that refuses to look right. Throwing away pixels like they're going out of style.


These 8 tactics are what I use to get out of that sticky spot

Design from the inside out

A lot of designers start off a design by focusing on the header. Often times what's inside the page is what makes it look good; the header is supplementary. Try leaving the header alone for a while and working on some elements in the body, you'll be surprised at how much easier it is to design a page once you've got a solid body going.

Sketch something

My whiteboard is my salvation. Pencil and paper works too. I read an article years ago by a designer who would draw dozens of little 2x3" mockups in his spiral notebook before even opening up a graphic design program. The best part of creating mockups this way is the speed at which you can burn through possible layout ideas. Sketch something, scribble it out. Sketch something else, scribble it out. Do this ten times and you've probably got a fairly decent idea of how to the page should come together.

Seek inspiration offline

CSS galleries and design showcase websites are excellent sources of inspiration, but sometimes a bit of offline media can be just what you need to spur some fresh ideas. Open up a newspaper or magazine, go to the grocery store and look at the packaging, watch a television ad. Pay attention to things that are applicable to your design such as typography, color, and element placement. Ask yourself questions like "What is it I like about this magazine ad?" and "What is about this packaging that just works ?" There's a lot you can learn from observing traditional media.

Learn to let it go

Ever make a button that looks ridiculously awesome but just doesn't belong in your design ? You put so much effort into your ridiculously awesome button, you'll go to great lengths to make it work.

Learn to let it go. Save the button and file it away. Although you've lost this battle, you'll soon have an arsenal of ridiculously awesome buttons you can use in designs later on.


Step away from the computer

If you're having a difficult time with something, leave it alone for a while and come back later. It'll probably be easier after you've had a bit of a break and your mind has settled. Regarding web design, I've noticed this always plays out in a certain way: If I'm hating a design I'm working on and I shelve it for a few days, a lot of the time my reaction upon returning will be "Holy crap that's fantastic!" On the flip-side, I'll often toil away long into the night working on what looks like the best design I've ever created. The next morning I'll look at it again and cringe at the horrible abomination I've created. The moral here is to give your design some space.

Be absorbent

Learn to effectively pinpoint what it is you love about other designer's work and incorporate it into your own. Don't steal designs, but don't deprive yourself of external stimuli either. Become better at identifying why you love the way something looks.

Don't be a one-hit-wonder

Try to avoid using the same techniques over and over again, even if you've done really well with them in the past. Gradient rectangles are my crutch - I have a terrible habit of using them whenever I feel like a design isn't working. "This design sucks...I'll add a rectangle with a gradient fill!" The result is usually something that I'm unhappy with because it looks the same as all my previous work. Try imposing yourself with silly rules, such as "No drop shadows today" or "2D elements ONLY." Locking yourself out from certain design habits forces you to learn new ones.

Seek input from others

This is a tricky one. There are so many ways to ruin a web design, especially when the wrong kinds of people are involved. Be careful who you ask and find people who can provide constructive criticism. Find someone who can tell you specifically what's wrong and how it could be improved. Grow some thick skin, too. Don't assume every criticism is an attack on your work of art. Roll with the punches.

Source : Web Design Tactics