Accessibility: Sheet close button contrast below 3:1 (WCAG AA fail) #190

New Issue

Closed

opened 2026-05-29 16:45:54 -05:00 by null · 1 comment

null commented

2026-05-29 16:45:54 -05:00

Owner

Severity: Major

Description: The Sheet component close button uses text-white opacity-60 hover:opacity-100 on bg-primary-navy. The opacity-60 reduces contrast below 3:1, failing WCAG AA.

File: src/components/ui/Sheet.jsx line 59

Fix direction: Use text-white with hover:text-primary-cyan or increase base opacity to opacity-80.

**Severity:** Major **Description:** The Sheet component close button uses `text-white opacity-60 hover:opacity-100` on `bg-primary-navy`. The `opacity-60` reduces contrast below 3:1, failing WCAG AA. **File:** `src/components/ui/Sheet.jsx` line 59 **Fix direction:** Use `text-white` with `hover:text-primary-cyan` or increase base opacity to `opacity-80`.

null added the

bug

accessibility

labels 2026-05-29 16:45:54 -05:00

null added this to the Batch 10 — Accessibility WCAG 2.1 AA milestone 2026-08-18 01:24:52 -05:00

null commented

2026-08-18 02:32:07 -05:00

Author

Owner

Not a defect — measured rather than eyeballed, and the premise does not hold.

This issue states the Sheet close button's 'opacity-60 reduces contrast below 3:1, failing WCAG AA'.

src/components/ui/Sheet.jsx:36 renders text-white at opacity-60 on bg-primary-navy (#0B2A3C). Compositing #FFFFFF at 60% over #0B2A3C gives rgb(157,170,177), which measures 6.25:1 against that background — more than double the 3:1 WCAG 1.4.11 requires for a UI component, and above the 4.5:1 for normal text as well.

For reference, since the issue proposed raising the opacity: 70% is 7.97:1, 80% is 9.95:1, 90% is 12.32:1. All fine, none needed.

Closing as no change required. The button also already carries focus:ring-2 focus:ring-white with an offset, so it is keyboard-visible too.

Verify: composite #FFFFFF at alpha 0.6 over #0B2A3C and compute the WCAG contrast ratio against #0B2A3C — it is 6.25:1, above the 3:1 threshold this issue claims is failed.

Not a defect — measured rather than eyeballed, and the premise does not hold. This issue states the Sheet close button's 'opacity-60 reduces contrast below 3:1, failing WCAG AA'. src/components/ui/Sheet.jsx:36 renders text-white at opacity-60 on bg-primary-navy (#0B2A3C). Compositing #FFFFFF at 60% over #0B2A3C gives rgb(157,170,177), which measures 6.25:1 against that background — more than double the 3:1 WCAG 1.4.11 requires for a UI component, and above the 4.5:1 for normal text as well. For reference, since the issue proposed raising the opacity: 70% is 7.97:1, 80% is 9.95:1, 90% is 12.32:1. All fine, none needed. Closing as no change required. The button also already carries focus:ring-2 focus:ring-white with an offset, so it is keyboard-visible too. Verify: composite #FFFFFF at alpha 0.6 over #0B2A3C and compute the WCAG contrast ratio against #0B2A3C — it is 6.25:1, above the 3:1 threshold this issue claims is failed.

null closed this issue

2026-08-18 02:32:07 -05:00