Typography
The Web Content Accessibility Guidelines (WCAG) 2.2 do not prescribe to any particular accessible font, however, you still have a requirement to guarantee that your text is readable to users. Typography plays a pivotal role in enhancing readability, contrast, and legibility, all of which are critical considerations in designing for accessibility.
It is important to ensure standardised typography styles, text contrast, text resize, spacing, and reflow is implemented in your work to comply with accessibility requirements.
Fonts
The NSW Government employs the Public Sans font for all digital products and services, creating a unique yet uniformed appearance. This font is the sole option for both headings and body text and can be obtained at no cost from Google Fonts.
As Public Sans is a custom font, it is advisable to designate a Web Safe Font as a fallback option when defining your font stack. For the NSW Design System, Arial is the preferred backup font.
body {font-family: 'Public Sans', Arial, sans-serif;}
Standardised typography styles
In the NSW Design system there are different standard sizes for the headings for large screens and smaller screens.
Text contrast
Text contrast is essential for accessibility. Insufficient contrast between text and background can cause eye strain, headaches, and difficulty reading, making it inaccessible to those with vision impairments. Meeting the contrast minimum (1.4.3) ensures that text is easily distinguishable from its background, making it accessible to a wider range of users. Visit NSW Design System base colour theme, for more information on standardised text colours.
- Headings/large scale text (text larger than 18 point): contrast ratio should be a minimum of 3:1.
- Body Text: contrast ratio should be a minimum of at 4.5:1.
How to test
- Install the Colour Contrast Checker Chrome extension or visit the Colour Contrast Checker Website
- Use the eye dropper to select both the text colour and background colour
- Review the auto-populated results
- Ensure you a pass both AA Large and AA normal as a minimum.
'If you come across something which is not accessible or has not had the reading order set or alt text inserted it too bad, so sad'
— Accessibility NSW research participant
Text resize and reflow
Reflow
The purpose of text reflow (1.4.10) is to enable users to zoom text to +400% without having to scroll in two directions to access content. Text reflow for smaller screens, such as mobile devices, will rearrange content into a single column creating a responsive accessible experience, again eliminating the need for scrolling in multiple directions.
How to test
Desktop
- Use ‘Ctrl +’ and ‘Ctrl –’ to increase and decrease page zoom.
- Set zoom level to +400% and set browser window size to 1280 pixels wide.
- Visit page to be tested.
- Open a second window, set window to 1280 pixels wide but with no zoom.
- Cross compare both windows and ensure no content is missing from the zoomed window.
An accessible and responsive digital product will scale the text to the 400% zoom and all content will be still accessible by the user. No change or obscured content is marked as a fail.
Visit understanding reflow (level AA) for more information.
Resizing text
The purpose of text resize (1.4.4) is to ensure users can increase text size by +200% without content being obscured. Text should not overlap other text or elements and all the information should still be displayed clearly. It is still considered a ‘pass’ even if you need to scroll in two directions, unlike the reflow criteria.
How to test
Desktop:
- Use ‘Ctrl +’ and ‘Ctrl –’ to increase and decrease the text size.
- Increase text to +200% zoom in size and check it is still readable.
An accessible and responsive digital product will scale the text to the 400% zoom and all content will be still accessible by the user. No change or obscured content is marked as a fail.
Mobile/tablet device:
- Increase zoom to +200%.
If text does not change size at all, or becomes obscured when resized, it fails the text resizing criteria.
Visit understanding resize text (level AA) for more information.
Text spacing
Text spacing, or the amount of space between characters, lines, and paragraphs, is important for accessibility because it can affect how easily some people can read and understand text.
By adjusting text spacing to meet text spacing 1.4.12 criteria, websites and other digital content can be made more inclusive and accessible to a wider range of people.
- Line spacing must be at least 1.5 times the font size.
- Spacing following paragraphs must be at least 2 times the font size.
- Letter spacing/tracking must be at least 0.12 times the font size.
- Word spacing must be at least 0.16 times the font size.
Visit understanding text spacing (level AA) for more information.
Support
If you need any assistance or have questions about the information on this page, please email us at digital.accessibility@customerservice.nsw.gov.au. To report an accessibility barrier with NSW Government’s online content, use our web accessibility report form.