Are there any good recommendations for web site color scheme that provide good readability
body text color (body) main heading color (h1) sub heading color(h2, h3 etc) background color border color line height font type margin padding
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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:
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.
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.
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).
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).