Styling and graphics
Style sheets must be used to set layout, visual formatting and style of the page. The user must have the ability to override the styles and colour scheme therefore !important must not be used.
Do not crowd page elements together, always provide sufficient white space. White space is a design term for any areas of a page you leave blank. It’s important, because it stops communications from looking too busy, which will put people off from reading them. So don’t fill the space just because it’s there. If you can say what you want in two lines, don’t stretch it out to a whole page just to fill space. Your reader will thank you.
Each element of the page must be sized so as to scale to its content, also allowing for the user to scale the content – for example by increasing the text size. Fixed heights in particular must not be used.
Blocks of text must be no more than 80 characters wide, not be fully justified and have adequate line spacing (at least ½ height of text) and paragraph spacing (at least 1½ the line spacing).
Fonts
Fonts should always be chosen so as to be of a clear and legible type. Also care should be taken to ensure that they are of a large enough size. Text needs to be resizable by the user up to 200% of the original size whilst still leaving the page readable, functional and not require horizontal scrolling. As a result font–size must be specified using relative units such as em.
The exact styling of text, such as the letter–spacing, must always been controlled using CSS. Never insert blank spaces to create a desired style.
Don’t use bold too often and never use it for an entire paragraph because it’s harder to read. Italic text must not be used for more than one sentence of text as this can appear ‘wobbly’ on screen making it difficult to read. Whole senstances must also not be capitalised as the shape of the words becomes lost. Words that are not hyperlinks must not be underlined as this can be confusing to users. Bold italic makes text hard to read and so use either bold or italic.
Imagery
Images should always have they width and height specified in the HTML to ensure there is no flicker of the page as content loads in. However this does not apply to responsive layouts due to their need to scale with the rest of the layout. Images themselves should be animated with care and only where necessary. Flashing or blinking effects should be avoided and animations should not repeat where possible.
A text equivalent must be provided for every non–text element conveying what is important or relevant about the element. This can be achieved using the alt attribute for images. If the element is essentially functional the text equivalent must convey its function. Any cosmetic graphics that are purely for visual effect must have an alt attribute that has been left blank.
If text is included within the graphic sufficient contrast must be maintained between the foreground and background.
Using images to represent text must be avoided, instead text and style sheets should be used. Thumbnail graphics must be avoided as they can be difficult to target for people with fine motor impairment.
Colours
When using colour to convey information (such as indicating a link) make sure it is not the only way the information is conveyed, use it in combination with styles such as position, font style, associated icons etc.
Foreground and background colour combinations must be chosen to have a suitable contrast ratio. Text and images of text must have contrast ratio of at least 4.5:1 except for:
- Large text may have a contrast ratio of at least 3:1
- Incidental components such as those used for pure decoration, hidden elements or inactive user interface elements have no contrast requirement
- Text that is part of a logo or brand name have no contrast requirement
Some colour combinations have further considerations as the contrast levels may appear differently to colour–blind users. In particular the following combinations need to be used with care when used together as foreground and background colours.
- Red and green
- Blue and yellow
The colour and contrast rules not only apply to live text but also apply to any text used within images. Any background used must be simple enough to not impair the legibility of content overlayed upon it.