Web Access Centre

CSS Text and colours - Web Access Centre

Summary: CSS text and colour techniques and accessibility.

Rationale
Techniques
Testing tips
Further information
Compliance with WAI Web Content Accessibility Guidelines v1
Other pages about CSS

Rationale

Using CSS to provide the visual formatting for your HTML files has a number of distinct advantages. It will free up your creativity to put together really beautiful presentation of your content, while protecting the structure of the information.

It is important though, while working on the design, not to forget that mistakes in your choice of colour, font size and imagery could make your content inaccessible. This page will help you to avoid many of the pitfalls.

CSS is compliant with the latest technologies, such as extensible HTML (XHTML). It works together with Dynamic HTML (dHTML) and JavaScript. CSS files can be read and used by other languages and applications.

As a bonus, the fact that most web sites could use a single style sheet to format all web pages means that CSS dramatically reduces the cost of site maintenance and makes global changes to the look and feel of the site very much more feasible.

Another consideration is that, increasingly, people are using their own personal Style Sheets to format web pages to meet their specific needs, for example to increase the font size or change the colour and contrast. However, these are made less useful if web designers use values and settings that cannot be overridden.

Techniques

Defining colours in CSS - can be great fun: not only do you have thousands to choose from, but you get a wide variety of ways to describe your selection:

The colour blue, for instance can be defined as:

blue (the colour name)

#0000ff (the red, green and blue (RGB) values in hexadecimal)

or the short form: #00f

or rgb(0,0,255) (the RGB values in decimal).

The predefined colour names are: black, aqua, blue, fuchsia, grey, green, lime, maroon, navy, olive, purple, red, silver, yellow, teal and white, In addition, transparent is also a valid property value.

Colours are declared by defining values for color and background-color properties.

You can apply the color and background-color properties to most HTML elements, including body, which will change the colours of the whole page unless other elements are given a different background.

It’s important to remember to define both the background and font colors, if text is to appear in an element with a coloured background. Some users need to define a colour scheme to make the screen comfortable to read, and their defined background could be the same as your defined font colour, making text impossible to read.

The colour combinations you select, and providing a good contrast between the text and background colours you use, is important for a lot of users. People who are colour blind or have one of a wide range of other sight conditions, will find it much easier to read your pages if you choose carefully. If there is ever an instance where you need a more subtle contrast, you must make sure that the text is large enough and bold enough to be read easily in spite of the softer contrast.

In addition, don't forget to remove all formatting code from your HTML if you are making changes to an existing web site, as formatting left in the HTML code can override your CSS styling and also makes it very difficult for users to define their own preferences. . Formatting should be either all in the CSS or entirely in the HTML code, not split between the two.

Font type - Choosing a font is a relatively simple task, and you may want to make a distinction in the fonts for different elements on the page. This shouldn’t be overdone though otherwise it could interfere with the flow of reading the content.

As you can never be certain which fonts your users will have on their computers, it’s important to give some alternatives too. Then, if the font you have selected isn’t available, the browser may use another, similar one.

An example of code in your CSS could look like this:

body {

font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;

color: black;

background-color: #d8da3d;

}

h1 {

font-family: Georgia, "Times New Roman", Times, serif;

color: purple;

background-color: none;

}

Property size - Property size values wherever possible, should be defined in flexible, relative terms. As the sample style sheet shows:

body {

font-size: 100%;

margin: 3em;

}

table {

width: 100%;

}

tr {

line-height: 110%

}

Note that it isn't only the font size that is defined in relative terms, but also selectors that may contain text. This ensures that when users select larger or smaller text size settings in their browser to suit their reading requirements, container sizes will scale accordingly and not force the larger text into a space that is too small for it.

Font-size property values - These should be chosen with care to ensure that the text will scale properly. Set the base size of your BODY element to 101% (or equivalent: 1.01em, ex, or medium) to ensure that it will be displayed at a close approximation of the user's chosen text size setting. This will also make sure that an Internet Explorer error that occurs when the base font is specified at less than 100%, or 1em, is not triggered. This error compounds the difference between font sizes, which can result in either unintentionally extra small or extra large text.

If you want your text displayed in a font size smaller than the browser default medium, it is best to define the container elements individually, but be wary of compounding one size on top of another, as the rules of inheritance mean that the property value of a parent selector will be applied to its child selectors. In other words, if you apply an 80% value to a TABLE selector and again to a TD selector, the result in CSS compliant browsers will be a font size of 64%. This may be difficult to read, but could become impossible for people who normally have their browser text size set to smallest.

Inserting background images - This involves several properties, and you will still need to provide an appropriate background colour, in case the user has images turned off in their browser, as the text colour you have chosen may not provide a good contrast against their browser default background colour. The filepath to the image must be referenced in full; then you need to define how often and where the image should appear. So the CSS may be:

body {

background-color: white,

background-image: url(http://www.yoursite.c.uk/images/bgrnd.gif);

background-repeat: no-repeat

background-position: top center;

}

The background-repeat property defines whether and how the image is repeated within its containing element (in this case the page itself). The options are:

- repeat (equivalent to a solid or tiled effect throughout the whole page),

- repeat-y (repeating on the 'y-axis', creating a vertical strip),

- repeat-x (repeating on the 'x-axis', making a single horizontal strip),

- no-repeat (which displays only one instance of the image).

The background-position property value defines where to position the first instance of the image, the most commonly used options are: top, center, bottom, left, right or a combination of vertical and horizontal positions, e.g. top right.

Be careful in your choice of images as backgrounds in CSS though, as there is no opportunity to provide an ALT attribute if the image is conveying a message, so users who cannot see the screen will not be able to know what that information is. In particular, images of text should not be displayed as background unless the same text is available close to the image. This could be presented as transparent text behind the image therefore making it available to screen readers, braille displays and text browsers but invisible, and therefore not repeated, to the eye. Also ensure that there is sufficient contrast against text and that the image will not make content difficult to read.

Allow user override of your formatting - The most common changes that may be required are to make font sizes bigger or change the colours and contrast to suit an individual's needs, so unless there is a good reason to define these as "important", avoid doing so.
Choose wording carefully - to avoid making colour, or format-specific, comments like “Follow the instructions in red” or “important information is highlighted in bold”. These will be meaningless if the relevant style settings are disabled or overridden by the user and are irrelevant to anyone who cannot see the screen or who is using a monochrome or small screen device, such as a PDA (Personal Digital Assistant).

Testing tips

Font sizes must be flexible i.e. em, %, smaller etc not pt or px., images should be visible / readable when CSS is removed. If any of the text, link or background colours are defined, all of the other colours should also be defined. Read content looking for any information that would not be understood by people who cannot see, or distinguish colour.

Automated tools - Tools can pick up on fixed font sizes.
Accessibility toolbar – CSS - Show Style Sheet. This will display the content of any linked CSS style sheets. Search for Absolute units: "pt" "px" etc, search for "line-height" and ensure that it has not been defined using absolute values. CSS - Disable CSS. Toggles CSS off and on to ensure that the page makes sense without the CSS formatting and that images do not interfere with the legibility of text. CSS - Show Style Sheet. This will show any linked CSS style sheets. Search for "color" and make sure that if either text or background is defined, that they both are.
Browser - View - Source. Edit - Find - "css" AND Source. Edit - Find - "style". This can show if inline CSS styles are being used also search for "line-height". To make sure that tables, DIVs etc will expand to accommodate larger text sizes: View - Text Size - "Largest" and “Smallest”. Tools - Internet Options - Accessibility check "Ignore colours on the page" to ensure that images are still readable. View - Source. Edit - Find "color" and "font" to ensure that formatting has been removed from the HTML pages.

Further information

A comprehensive and easy to understand list of properties and their possible values has been compiled by HTML Dog.
The use of different selectors for different functions is well explained in the SelectTutorial by Max Designs.
Detailed and step-by-step guides on floating elements including images can be found in the FloatTutorial by Max Designs .

Compliance with WAI Web Content Accessibility Guidelines v1

2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup (priority 1).
6.1 Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document (priority 1).
3.3 Use style sheets to control layout and presentation (priority 2).
3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values (priority 2).
11.1 Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported (priority 2).
11.2 Avoid deprecated features of W3C technologies (priority 2).

For more information on techniques visit the Web Accessibility Initiative techniques page.

Other pages about CSS

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 06/03/2008 15:41

Print Email