Page colour guidance

[Sarah-Lombardi]

We've had feedback that it would be useful to include the research insights that support the grey page background on the page component.

Proposed content has been put in the content patterns backlog. Awaiting more research insights from COP and Atlas but for now it could be something like:

Research on this component

Many Home Office services are designed for regular use. Research has shown that the grey background to the page is easier to read for users who need to look at screens for long periods of time.

Services using this component

Atlas
Central Operations Platform

[tomyems]

What do you think the best way is to relate it to the explanation of the page background colour explanation on the colour page?

Perhaps add a link to the colour guidance?

[Sarah-Lombardi]

Personally I'd say link away for the colour code but include a research insight on the page so the users have that to back up their selection.

[Sarah-Lombardi]

So another way we could approach it is:

We use a grey background because it is more accessible than white, particularly for people who use screens regularly and for long periods of time.

It has been tested in the case management systems Atlas and Central Operations Platform. Testing showed that....

[Sarah-Lombardi]

NHS have a similar thing on their colour page. The link to the British Dyslexic Association could be handy.
https://service-manual.nhs.uk/design-system/styles/colour

[tomyems]

I'm not sure what specific research we have. What do you think to?

Research on this component

We use a grey background because it is more accessible than white, particularly for people who use screens regularly and for long periods of time.

The British Dyslexia Association recommends dark text on a light, but not white, background.

Services using this component

Atlas
Central Operations Platform

[guermanc]

There does not, to my knowledge, seem to be much empirical research that quantifies how the use of colour combinations affects readability.

Attempting to do so is made difficult by the multitude of display differences, use of different fonts, how readability is measured, what type of content it is, etc. An interesting article that brings up some of these considerations is The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention.

Findings do support the use of using a light background, however https://www.w3.org/WAI/RD/2012/text-customization/r11

Other design system such as IBM Carbon Design System, Adobe Spectrum and DWP Accessibility Manual do not highlight the impact different backgrounds have on readability, whilst US Web Design System does, making mention also of Irlen Syndrome, light sensitivity and autism at https://designsystem.digital.gov/design-tokens/color/overview/#color-and-accessibility

In my opinion, the best option would be to include our own research insights into this, in the narrower context of the Home Office, rather than linking to external resources.

[Sarah-Lombardi]

Current content (discussed with Lara Bradley)

Research and evidence

Research has shown that a grey background behind areas of text reduces eye strain, particularly for services intended for regular and prolonged use.

Testing on our case management system Atlas showed that:

• black text on a stark white background causes the words to 'dance' for dyslexic users and adding a shaded background stopped this from happening
• people who work night shifts and spend prolonged time on screens complained that stark white screens contributed to eye strain and made it difficult to concentrate

While it's best practice to give users control over exactly how they see things (for example a peach overlay makes reading easier for many dyslexic users), adding a shaded background has benefits for a range of users.

Services that use this component

• Atlas
• Central Operations Platform

[daniel-ac-martin]

I'm just a dev, but this looks like an improvement to me. (And we can always iterate on it.)

A very minor point to bear in mind might be that the GDS design is not actually black on white, it's off-black (very dark grey) on white. So they have thought about the contrast issue. But that's probably such a minor distinction that it doesn't need to be explicitly called out here.

[daniel-ac-martin]

Somewhat related: #433 (Should we have a dark mode?)

[Sarah-Lombardi]

Latest draft:

Research and evidence

Research has shown that a grey background tint behind areas of text reduces eye strain, particularly for services intended for regular and prolonged use.

Testing on our caseworking system 'Atlas' showed that:

• black text on a stark white background caused the words to 'dance' for dyslexic users and adding a shaded background stopped this from happening
• people who work night shifts and spend prolonged time on screens complained that stark white screens contributed to eye strain and made it difficult to concentrate

This is supported by advice in the British Dyslexia Association style guide, which recommends use of dark text on a light (not white) background.

While it's best practice to give users control over exactly how they see things (for example a peach overlay makes reading easier for many dyslexic users), adding a shaded background has benefits for a range of users.

We also know that some of our users work on shared computers, or computers which cannot be adapted to change the colour of the screen – for example, border agents and prison guards.

Services that use this component

Atlas caseworking system
Central Operations Platform

[tomyems]

I've included these changes in a broader piece of work to standardise the component page. The page colour guidance would look like this https://62f3df93fa4c5d0d2b9cd63e--hods.netlify.app/components?name=Page

(To see full set of changes see: #444)