Test and document alternative solutions to increasing the font weight

[CharlotteDowns]

What

Test and document alternative solutions to increasing the font weight.

Increasing the font weight of the navigation items will:

• make it harder for users using high contrast colour modes to distinguish a navigation item from any other text in the navigation bar, for example the service name.
• remove any visual hierarchy between other content in the 'before page content' area.

Why

Users have let us know they find it hard to read, it is also recognised as failing with a new method of measuring colour contrast of text on a background.

Additional context

Issues on alphagov repositories

• Links on grey have low colour contrast #3862
• Problems with New Transport font for vision impaired users #2755
  Preliminary work into new APCA method
• Colour styles tested for contrast via the Bridge-PCA method showing other components affected by this colour combination

Done when

• The contrast of tints of the grey background have been tested with the new colour contrast method
• The contrast of tints of the blue text colour have been tested with the new colour contrast method

[CharlotteDowns]

Testing with Accessible Perceptual Contrast Algorithm (APCA)

Using a APCA calculator to test govuk-colour("blue") #1d70b8 on tints of govuk-colour("light-grey") #f3f2f1 as mentioned in Finalise design, spacing and function.

The font size of a navigation item currently on mobile and desktop is 19px.

Name	Background colour	Text colour	APCA Contrast score	Minimum font size for 400 font weight (GDS Transport light)	Minimum font size for 700 font weight (GDS Transport bold)	Pass on mobile	Pass on desktop
Navigation item (on white)	#ffffff	#1d70b8	75.1	18px	14px	Y	Y
Navigation item (50% lighter background)	#f9f9f8	#1d70b8	71.5	19.5px	14.5px	N	N
Navigation item (20% lighter background)	#f5f5f4	#1d70b8	69.1	20.25px	15px	N	N
Navigation item (as is)	#f3f2f1	#1d70b8	67.5	20.75px	15px	N	N
Navigation item (with 10% darker text)	#f3f2f1	#1a65a6	72.2	19px	14.5px	Y	Y

Text colour darker than 10% of #1d70b8 will not pass Links with a 3:1 contrast ratio with surrounding text

[CharlotteDowns]

Navigation item (on white)

Pros	Cons
doesn't look unusable	doesn't stand out as much (which becomes more important with other elements like the 'switcher') users have also found blue on white difficult to read

Navigation item (50% lighter background)

Pros	Cons
less WCAG risks (apart from the obvious contrast)	perception as white, advantages of it being a different colour to distinguish are lost

Navigation item (20% lighter background)

Pros	Cons
less WCAG risks (apart from the obvious contrast)	not 25% as styles guidance suggests perception as white, advantages of it being a different colour to distinguish are lost

Navigation item (with 10% darker text)

Could also be done with filter: brightness(.9); combined hex code would be: #1B64A6 (from picker, rough)

Pros	Cons
precedent of doing something similar before with text colours (notification banner, existing header) similar enough that users may not notice	not using a colour that's in our existing colour palette is not best practice