Interactive elements

For: Development, Design

Non-text contrast (1.4.11 level AA)

https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast

  • Colour contrast for graphics and interactive UI components for example form input fields, check boxes, radio buttons and submit buttons must be at least 3:1 so that different parts can be distinguished.
  • When providing custom states for elements (for example hover, active, focus), colour contrast for those states should also be at least 3:1.

Colour contrast checker for graphics and UI components

Content on hover or focus (1.4.13 level AA) (Development)

https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus

  • For content that appears on hover and focus for example tooltips, pop ups and slide outs: the content should be dismissible with the escape key or close button.
  • Users should be able to hover over the appeared content itself and it should not disappear after a set time.
  • Ideally content that appears on hover or focus should not obscure other content unless it presents a form input error or can be dismissed with the escape key or close button.