CvcInput / Accessibility

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

W3C article: Understanding Success Criterion 2.4.7

2.4.7 and the CVC-component

• The CVC uses shadow (via the Tailwind ring) util to indicate the focus state
• If you customize the colors of the CVC, also make sure that the focus ring, and the background color also have a minimum of 3:1 contrast ratio
• Related: see "1.4.11: Non-text Contrast" below
• There is a draft for WCAG 2.2 with an enhanced version of this criterion (see 2.4.11: Focus Visible (Enhanced))

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components: Visual information required to identify user interface components AND STATES, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

W3C article: Understanding Success Criterion 1.4.11

1.4.11 and the CVC-component

• This criterion must be verified where the CVC is used since the contrast is calculated from the background surroundings of the CVC.
• If the CVC have text (or icons) that meets the "1.4.3: Contrast Minimum" criterion, the background color of the CVC need not have a minimum of 3:1 contrast ratio
• Take extra care to check the contrast ratio if you use transparent/semi-transparent background on top of images / non-uniform backgrounds etc.
• Also see 2.4.7: Focus Visible above

Tip: Color contrast checker tool (external link).