Problems with New Transport font for vision impaired users

tombye commented 2 years ago

Description of the issue

The New Transport font, now used across www.gov.uk and any site on the .service.gov.uk domain, can be hard to read for vision impaired users. Those affected have to use custom stylesheets or forced colour modes (Windows High Contrast Mode or changing colours in Firefox) to achieve a high enough contrast.

This was reported by the 'Low vision' tester at the Digital Accessibility Centre (DAC), in an audit commissioned by GOV.UK Notify.

Their comment was:

The font used for GOV.UK provides little in terms of legibility experienced by some user groups such the Vision impaired, Elderly and dyslexic. As a vision impaired user, who does not rely on assistive technology, the font provides a lightly rendered grey, translucent display which allows the contrast to be affected by the background glare creating a grey and difficult to focus reading platform despite the measured high contrast. The reading and absorption of information is impacted particularly during longer periods of navigation. The New Transport font or GDS transport as it is alternatively referred to, is a digitalised version of the road traffic signs seen across Britain’s roads. When viewed on Gov.uk, for me, the digitalization does not transfer well. When analysed, the contrast ratio returned a 19.6:1 ratio. This contrast should look black however the opaque styling of the font reduces this appearance as background glare appears to leak through the font body.

As a result, for a low vision perspective, this impacts on the ability to read successfully for periods of time as reading fatigue quickly sets in making larger bodies of text difficult to read and absorb its information. As with the traffic signs, the heavier font and increased size renders well with the white text set on a deep blue background seen on UK motorways. The lighter, thinner digital version bears no resemblance to the physical seen on our roads. As a result, improvement in clarity with additional weight, up to 500 together with a #000000 hex code, may provide all users a better-rounded and less transparent readable font which should provide a sharper text appearance capable of absorbing background glare to improve prolonged reading and overall UX. These improvements will also relate to mobile devices where currently a negative reading experience prevails.

As a result, I personally must use the GOV.UK products with a custom stylesheet to improve the font appearance and increase overall UX.

[Talking about using a custom stylesheet to force all text into the Franklin Gothic Medium font] The heavier font provides an example of a sharper text appearance with a truer contrast enabling improved reading experience. With no alternative stylesheets available on any GOV.UK pages, this will only be available to experienced users with the knowledge to create their own stylesheet and therefore cannot be relied upon for all users.

Other options include inverting contrast via the Windows operating system and using the shortcut keys shift>alt>print-screen to provide a high-viz version of the screen. This eliminates glare and provides sharper text appearance which improves the ability to read and absorb the page information.

This however may hide some functionality and only effective on Edge and IE browsers. Other browsers rely on add-ons to do this which are not as effective. The font quality differs depending on the screen resolution as higher quality monitors provide a better view however, the font does not improve when viewed on lower quality or lower resolution screens. This also impacts on mobile devices where the font is naturally smaller. providing text/contrast options via alternative stylesheets or widgets within the GDS platforms are recommended to help all users establish an improved custom, Gov.Uk experience and provide a personalised platform to suit a user’s needs.

I can share the full audit and contact details for DAC if required.

Steps to reproduce the issue

Because the issue seems to occur for users with a visual impairment, I would guess that you would need to test with those types of users.

Actual vs expected behaviour

The tester expected to be able to read the text without issue but found problems related to how the design of the font interacted with their view of the web page.

Environment (where applicable)

GOV.UK Notify currently uses version 2.13.0 but the tester mentions experiencing this issue on the www.gov.uk website, so likely they were viewing pages using a more recent version.

The tester was using Google Chrome and Microsoft Edge on Windows (latest versions) for the audit but they mention experiencing this issue on mobile devices and other different screens. See their comment in the description for their exact words.

lfdebrux commented 1 year ago

Same issue was reported in another DAC audit recently (from the same auditor). See https://govuk.zendesk.com/agent/tickets/5116114.

36degrees commented 1 year ago

One thing we could explore would be to disable -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale at least for the normal weight text, which does have the effect of slightly increasing the weight / visual contrast of the text.

I think we might want to keep antialiasing enabled for white text on dark backgrounds and for bold text (which to my eye looks better with it on).

We'd also need to test across different browsers / OSes and on non-retina displays to fully understand the impact.

Example	`-webkit-font-smoothing: antialiased`	`-webkit-font-smoothing: auto`
Homepage
Announcement

alphagov / govuk-frontend