Component border colours don't all meet contrast requirements and are inconsistent

[DBD324]

Summary of the bug

Many components use different border colours which makes the set inconsistent. Some also use border colours that don't meet the 3:1 contrast requirement that aims to differentiate UI component bounding boxes from adjacent background colours.

WCAG 2.1 1.4.1 Non-text Contrast extract:
"For active controls any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors. Also, any visual information necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.

This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors."

Affected components are:

• Text fields
• Text areas
• Select
• Searchable select
• Multi-select
• Search bar
• Cards
• Dialogs
• Page header
• Popover menu
• Tabs

🧐 Expected behaviour

All components that use a border to indicate the size and shape of the component should use a border of Architectural 400 as this provides enough contrast to the default white background.

Input components that use the component border to indicate interaction state should be update to use Action Dark Hover and Action Dark Pressed colours on the respective interaction states.

Input components that show validation status using border colour should be updated to include hover and pressed states that maintain the validation colour.

New border tokens:
Border default = Arch 400
Border Hover = Arch 500
Border Pressed = Arch 600
Border disabled = Arch 200

Border error default = Error red
Border error hover = Error red + 20% dark.
Border error pressed = Error red + 40% dark

Border warning default = Warning amber
Border warning hover = Warning amber + 20% dark
Border warning pressed = Warning amber + 40% dark

Border success default = Success green
Border success hover = Success green + 20% dark
Border success pressed = Success green + 40% dark

Changes required:

• Cards - Current border 300 - Change to 400

• Dialog - Current border 200 - Change to 400

• Page header - Current border bottom 300 - Change to 400

• Popover menu - Current border 300 - Change to 400

• Tabs - Current border bottom 300 - Change to 400

• Text field - Current pressed state border Action Dark Hover - Change to Action dark pressed.

• Cards

  • Cards - static - Current border 300 -> Border default
  • Cards - Clickable - Current border 300 -> Border default
  • Cards - Clickable - Change hover and pressed states to use new hover and pressed border colours
  • Cards - Interactive - Current border 300 -> Border default

• Dialogs - Current border 300 -> Border default

• Page header - Current bottom border 300 -> Border default

• Search bar

  • Search bar - Current border -> Border default
  • Search bar - Change hover and pressed states to use new hover and pressed border colours

• Select

  • Single Select - Current border -> Border default
  • Single Select - Change hover and pressed states to use new hover and pressed border colours
  • Single Select - Change validation hover and pressed states to use new validation border styles
  • Multi Select - Current border -> Border default
  • Multi Select - Change hover and pressed states to use new hover and pressed border colours
  • Multi Select - Change validation hover and pressed states to use new validation border styles
  • Searchable Select - Current border -> Border default
  • Searchable Select - Change hover and pressed states to use new hover and pressed border colours
  • Searchable Select - Change validation hover and pressed states to use new validation border styles

• Switch - Current disabled state -> Border disabled

• Tabs - Current bottom border 300 -> Border default

• Top navigation megamenu - Current border bottom 300 -> Border default

• Radio button - Current default unselected border 300 -> Border default

• Popover menu - Current border 300 -> Border default

• Text inputs

  • Text field - Change hover and pressed states to use new hover and pressed border colours
  • Text field - Change validation hover and pressed states to use new validation border styles
  • Text area - Change hover and pressed states to use new hover and pressed border colours
  • Text area - Change validation hover and pressed states to use new validation border styles

Additional info

Tell us anything else useful to help us fix or understand the problem.