No replies
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 15 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

Online web color scheme generator links and accessibility checking.

A word about the 'Web safe' color pallette; this set of colors was originally developed as a safe pallette to use with 8-bit (256K) graphics cards. As the majority of graphics cards are now able to render 32 bit as standard, it is reasonably safe to regard the web safe pallette as dead and to design using the full spectrum of 32-bit (16.7M) colors.

However, a word of caution. The popular use of graduated shading that is afforded through the use of millions of colors is fine when viewed with 32-bit color depth, but as soon as the depth drops back to even 16-bit (65.5K) you will get noticeable banding - which is even worse on something like a relatively old laptop with an limited graphics card.

At 8-bit (256k), dithering will be used to attempt to replicate the non-safe colors that it can't display, and dithering looks terrible. Also the rise of PDA's, Cell phones, and other hand held devices may well require the use the web safe pallette once more as they will not render your lovely 32-bit images at all well, so in choosing the color depth for you graphics it will pay to think of the intended target device.

Choosing a color scheme for your web page can be a difficult task, not the least from an aesthetic point of view. As well as the obvious consideration of choosing a good set of colors, is the matter of whether your colors are suitable from an accessibility point of view.
Not everyone has 20/20 vision and and it is worth considering your color pallette from the point of view of someone who is color blind, or someone who has Atypical monochromatism.

Your colors also need to provide good contrast between background and foreground text, again for those that haven't perfect vision, and is a part of the accessibility guidelines.

With the difficulties in selecting colors for web designs in mind, here are a few links to online color schemers and accessibility checkers for chosen pallettes.

Visibone's color lab 216 web safe color picker.

For reference these are all the 216 web safe colors along with their HEX and RGB values plus their names.


Color scheme creators:

Easyrgb.com:

This page will create a set of color harmonies from a base RGB value
allowing you to select complements to your main page color.
You can also match a rgb value to color cards to find closest matches to real world swatches.


colormixers.com:

very simple but nice schemer that allows you to set a value using sliders for RGB or by entering a Hex value
which then produces a color compliment set and an example of those colors used in a page.


Color Schemes Generator 2:

This site not only produces color pallettes from inputted base colors but more importantly allows you to se how these colors will be perceived by someone with color deficient eyesight, as well as being able to switch color pallets through different group such as pastel, contrast, pale etc. Highly recommended site.

Color scheme accessibility checkers and WCAG information:

Juicy Studios Color Analyser:

This page will check your main background and foreground text colors to see if they have sufficient contrast to be easily viewable this uses the W3C's WAI guidelines and as such should be considered important if wanting
to conform to current official Web Content Accessibility guidelines


Color Contrast Check:

Another contrast checker but using sliders to adjust values from your inputted HEX values

Web Builders Tool Kit: Color tools.

A nice collection of links to further color tools.

evolt.org understanding color and accessibility:

Explanation of the W3C's WCAG 1.0 and 2.0 guidelines regarding color and accessibility


With thanks to Briski for contributing links.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tags: