Skip to Main Content

Text and colour contrast: Home

Information on text, fonts and colours for accessibility

Text and fonts

Verdana regular for text, size 16 minimum size. Do not use underline or use italics in any document or page. This is much harder to read and underlined words can be mistaken for a hyperlink. Links should be in bold to make the contrast clearer from regular text.

Headers

It is important that fonts are not manipulated to make them more prevalent if really, they should be a header. Headers and secondary headers help screen reading software to read the content in the most logical order, provided that the has been set up correctly. 

Colour palette

There are 15 colours that are used throughout this website as the colours have a high contrast ratio so please use one of these colours if you need to:

Fifteen shades in the LLS colour palette

Checking contrast

Colours are a very important aspect of a website but also in accessibility. 

From the Web Aim Colour Contrast Checker:

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.