Skip to content

[bug]: Default focus ring (ring-ring/50) is under 3:1 contrast in light and dark #12521

Open

Description

@uzoway
Image

Describe the bug

Focus on Button, Input and Select is a 1px border-ring plus a 3px ring-ring/50. In the default neutral theme:

In light mode, no pixel of the focus indicator reaches a 3:1 change against its unfocused state on any variant or size. That fails WCAG 2.4.13 Focus Appearance (AAA), and 1.4.11 Non-text Contrast (AA) as it's usually applied to focus indicators.

Using the ring at full opacity isn't enough on its own, because --ring itself is 2.58:1 on white. A darker light-theme --ring, for example oklch(0.556 0 0) (about #737373, 4.7:1 on white), at full opacity would clear 3:1.

Related but different: #12344 (invalid rings hide focus) and #11320 and #12343 (components with no focus style at all).

Affected component/components

Button (all variants), Input, Select trigger, and the other components that use focus-visible:ring-ring/50. Checked in base-nova and radix-nova. new-york-v4 uses the same classes and tokens.

How to reproduce

  1. Fresh init -d, then add button, input and select.
  2. Tab to an outline Button or an Input on a white background.
  3. Measure the focus border and ring colors against the background. DevTools' color picker shows the ring as semi-transparent, so composite it first.

Codesandbox/StackBlitz link

None (default install).

Logs

System Info

shadcn 4.23.0, Tailwind CSS 4.3.3. Chrome and Safari on macOS.

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions