You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
[bug]: Default focus ring (ring-ring/50) is under 3:1 contrast in light and dark #12521
Focus on Button, Input and Select is a 1px border-ring plus a 3px ring-ring/50. In the default neutral theme:
Light: --ring is oklch(0.708 0 0) (about #a1a1a1). The border is 2.58:1 on white, and the 50% ring composites to about #d0d0d0, which is around 1.5:1. On outline buttons, inputs and selects the border changes from #e5e5e5 to #a1a1a1, a 2.05:1 change.
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
Fresh init -d, then add button, input and select.
Tab to an outline Button or an Input on a white background.
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
Activity