Basic color scheme for great readability [closed]

Question

Are there any good recommendations for web site color scheme that provide good readability

e.g.

body text color (body)
main heading color (h1)
sub heading color(h2, h3 etc)
background color
border color
line height
font type 
margin
padding

etc?

Answer 1

If you want to consider users with special visual and/or cognitive requirements, it becomes quite complicated and there's no single answer. The W3C Web Accessibility Initiative's Web Content Authoring Guidelines (WCAG) provide a good starting point. That's probably the single most thoroughly-researched resource on web accessibility, though it's not totally uncontroversial.

The most important considerations for all users are contrast and text size. The contrast (brightness ratio) between text and background is recommended to be at least 4.5:1 (examples). The size of text should be no smaller than the user's default.

Some people find black text on a pale yellow background easier to read. Others cannot read dark-on-light schemes at all (e.g. because of uveal coloboma) and will want white on black text. Larger text is always easier to read, but it reduces the amount of text you can display which may irritate users with good eyesight.

In short, you can't please everyone with a single design, and for this reason the general advice for web pages is to honor the user's defaults as much as possible, so if one user needs 40-point green text on a brown background, they can select that for themselves.

In truth, very few websites are truly accessible to everyone. It's a lot of work to implement, and a lot more work to maintain, and sometimes you just have to work with individual users to solve their problems. But it's worth being aware of different users, and you should at least avoid the most common problems:

• Never use complex or low-contrast backgrounds
• Never use small text (less than the equivalent of 12pt)
• Never use images to display text
• If something seems a little hard to read, it's probably impossible to read for some users.

Also, note that columns, menus, sidebars, ads, etc. can make text much harder to read. Personally I'd say body text should have at least an inch of white space around it.

Answer 2

I know a lot of people may scoff at the idea, but take a look at Twitter bootstrap for a guide. A lot of time and resources have been put into that project to make the defaults sensible and readable across multiple devices.

Answer 3

A few rules of thumb:

• I recommended providing at least two themes - dark on light and light on dark as some users may not be able to read one of the two. For light on dark, make sure the contrast isn't too high (e.g. use grey on black, not white on black).

• Make sure the contrast between the intensity of foreground and the intensity of the background is always high enough (see the W3C guidelines, or my detailed explanation here).

• Keep the background as smooth as possible with as least as possible color variations to prevent distracting users from the foreground.

• If you use a different color for the margins that you do for the background, don't use a high contrast difference between the background and the margin.

• Leave spaces between paragraphs, avoid long paragraphs.

• Use a clean font (e.g. Calibri or Arial) for the body and any other non-large text.

• Make sure the order of the elements in the HTML makes sense to someone that can't see the screen (for users using a screen reader).

• Do not use images instead of text (for users using a screen reader).

• Provider ALT text for images (for users using a screen reader).

Answer 4

If you are not concerned about beauty/ugliness just try to imitate the Windows High Contrast colour schemes.