Accessible Text and Colors
- It is possible for user and designer style sheets to clash; therefore, authors should specify both foreground (text) and background colors for each element, in order to minimize problems.
- If setting a background image, make sure the text is readable. "Busy" backgrounds can make reading the text difficult if not impossible. Also, be sure to include background colors along with the image, to ensure the text is always readable.
- Choose foreground (text) and background colors carefully. If the two colors are too close to the same hue, they may not provide sufficient contrast for some visitors, including those who are colorblind or suffer from low vision. In order to be compliant with the guidelines, "brightness difference" must be greater than or equal to 125, and color difference must be greater than or equal to 500. Also keep in mind that while some color combinations are compliant to the guidelines and look good to the designer, they may look ugly to others, or cause difficulties even for those who are not colorblind (another reason it is important not to rely solely on tools for testing purposes).
- The Effective Color Contrast (offsite link) article at Lighthouse International contains several examples of the difficulties someone with colorblindness might experience with poor color contrast.
- The Color Contrast Check (offsite link) at snook.ca is an excellent means of testing various color combinations before putting them to use.
- Always use
a:hover,a:focusanda:activetogether to highlight or otherwise visually indicate an item is a link. This way, anyone using the site may easily tell what is a link and what is text when they mouse over it. - Choose a font family that is easy to read by all users. Just because it looks cool isn't a good reason to use it – especially if it is going to be hard for users to read. Also, always list more than one font to ensure at least one other font will be used – not just the default.
- Always set font size using relative, not absolute, amounts. Setting the font size in relative amounts allows users to increase font size with their browsers. Absolute amounts cannot be changed on some browsers.
- To indent an entire block of text, always use the margin element, rather than trying to add a
<blockquote>to the HTML document:
.indent{ margin-left: 2em; margin-right: 2em; } - To indent the first line of a paragraph, use the following:
P {text-indent: 1em; }