Color contrast on website series3

Grid-base design

Have taken a bit more time to figure out what is grid-based design and had known a basic. For all I have researched, the screen resolution takes a important part to develop a grid. Usually we design a website for the 1024×768px resolution, then you will settle 960px (because it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, 16). Here is a good tutorial show a web layout with 960 Grid setting with 12 columns. Another article also talks about 960 Grid but I think he mixes the meaning of columns and guideline. 

There is another “noun”: Baseline

How do you set a baseline grid? Why they set 24px? Should adjust fonts size with baseline matching?

Teehan+lax: “The traditional sizes to go with this baseline (9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 48, 60, 72 points): these sizes prove to be extremely useful when combined with leading derived from 3.

Coming up with a grid for print requires multiple calculations based on page format, font choice, font size, leading, etc. Hopefully these calculations are not necessary for digital design, and web design in particular: on screen, the baseline grid is essentially determined by leading.”

Related reading:

http://www.teehanlax.com/blog/2011/03/09/designing-faster-with-a-baseline-grid/

http://webdesignerwall.com/trends/grid-and-column-designs

http://dev.opera.com/articles/view/setting-web-type-to-a-baseline-grid/

http://www.alistapart.com/articles/settingtypeontheweb/

http://www.designified.com/blog/article/41/960px-grid

http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/

http://www.cameronmoll.com/archives/001220.html

http://www.tutorial9.net/tutorials/photoshop-tutorials/design-a-clean-web-layout-with-the-960-grid/

Color contrast on website series2

Color type choosing:

Some important theories:

RNIB:

“People with cognitive or sight problems may have difficulty reading and distinguishing text from a background colour. This is generally caused by poor choice of colour and contrast in the design of the page. Background images and patterns may also cause problems of legibility.

Creative use of colour and contrast can dramatically enhance the accessibility of a website. It can be as important for people with sight problems as it is to people who have dyslexia or whose first language is not the main language of the site.

Everyone benefits from text which is both easy on the eye and that is easy to follow. For example, people with dyslexia benefit from good contrast as this can help make the structure of words and sentences easier to understand.”

Attention:

“Colour blindness affects the way that certain colours differ from others. Red and green, for instance, can appear to be virtually the same to some users. Ensure that you choose colours that have a good differentiation for people with colour deficiency. You can find out more on the Vischeck website."

So there is no one “best” combination of text and background colours. Background does not have to be coloured, and texts do not have to be coloured. Pages should be designed flexible that could allow users to change the colour scheme.

I predict my work has not to be visual divided into the content areas but should good at using color contrasts.

Color choose for vision impaired principles:

1. Exaggerate lightness differences between foreground and background colors, and avoid using colors of similar lightness adjacent to one another, even if they differ in saturation or hue.

2. Choose dark colors with hues from the bottom half of this hue circle against light colors from the top half of the circle. Avoid contrasting light colors from the bottom half against dark colors from the top half. The orientation of this hue circle was chosen to illustrate this point.

3. Avoid contrasting hues from adjacent parts of the hue circle, especially if the colors do not contrast sharply in lightness.

Color theme choose:

Charity / school / college / education / student:

http://kuler.adobe.com/#themes/search?term=school  no (ugly)

http://kuler.adobe.com/#themes/search?term=college  no (the rate ones are belong to some other college)

http://kuler.adobe.com/#themes/search?term=student   no (no rate ones)

http://kuler.adobe.com/#themes/search?term=charity no (too much colors that have to use as light color)

http://kuler.adobe.com/#themes/search?term=education yeh

Education theme

Charity theme

Relative reading:

http://www.rnib.org.uk/professionals/webaccessibility/designbuild/colour/Pages/colour_contrast.aspx

http://www.rnib.org.uk/professionals/webaccessibility/webaccessfaqs/Pages/faqs.aspx

http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast

Compare RNIB and QAC: Analyze color use on RNIB

   

               

5 steps approach:

Describe:

• Use larger scale of color
• The choose of color are similar (a bit of difference)
• The order to arrange colors is different
• Different visual appeal result

Identify:

• How do you choose the color type based on the vision ability of vision impaired people?
• What the design style is suitable for those people?
• What is the relationship between text and color?

Interpret:

• Use color contrast to strongly divide different contents area to help the capability of reading.

Evaluate:

• The visual impaired are easier to read on the site

Reflect:

• Large background of color filling is definitely a good way to distinguish different type of information.

Color contrast on website series1

Question:
How do you use color contrast on website to strength and exaggerate color effection? Presume it is for people with visual impairment.

Analyze:
Color contrast on web is no more than color text against uncolored background, uncolored text against color background and color against each other.
A good example uncolored text against color background which RNIB has done to show the large scale color background strength the contents discrimination.
I would like taking a try on color text against uncolored background to achieve the same effection,though QAC has done in a bad result :(