Colours

[bameyrick]

Use this place to discuss colours in the ONS Design System

[bameyrick]

After speaking with @will-madebymoon we noticed that the secondary button background colour should be #dedede, and the text colour should be #222222 with regular font weight.

[jrbarnes9]

Focus colour is out of date. And highlight should use the same shade of yellow as the new focus colour.

[JNATION85]

$color-amber lightness to make white on amber colour combination accessible

[jrbarnes9]

$color-grey-4 missing from colours documentation

[jrbarnes9]

$color-grey-4 is too close to $color-grey-3 in level of lightness.

Suggestion

Darken $color-grey-3 to: #acacac

Currently color-grey-3 is used for:

• collapsible and text-indent content border-left (change to use $color-grey-4 instead)
• download resources dividing borders (change to use $color-grey-4 instead)
• download image border (change to use $color-grey-4 instead)
• sortable table th arrows (keep new color-grey-3)
• patternlib table th and td boder-bottom (keep new color-grey-3)

We can then use the darker $color-grey-3 for footer__hr (it currently uses $color-grey-2 which is too dark see: #1026)

[jrbarnes9]

Wrong colour for btn-secondary doucmented

Should be #d0d0d0 ($color-button-secondary: $color-grey-4), not #f0f0f0 ($color-grey-5)

Needs updating in the accessiblity colour combination too

[armstrongb]

It would be good to meet and discuss how these will align with the central colour palette as the work Leah and @JNATION85 did on the harmonised palette should be incorporated.

[jrbarnes9]

The following documented colour combination doesn't pass WCAG AA, as stated.

I'm not sure it's used anywhere in the DS any more, so could probably be removed or updated with the combination: FG #4263C2 on BG #F0F0F0, as used in the featured article component

[jrbarnes9]

Broken anchor link in focus colour combination documentation