Comfy-Org / Comfy-Org/ComfyUI_frontend
a11y: increase tier badge font size to meet WCAG 2.1 AA contrast requirements
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Summary
The tier badge used in workspace UI components currently uses `text-[10px]` (10px), which falls below the 14pt (~18.67px) threshold where WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal text. While the high-contrast color combination (`bg-base-foreground` / `text-base-background` with `font-bold uppercase`) provides some compensation, the font size alone may make the badge text effectively unreadable for low-vision users.
## Affected Files
- `src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.vue` — tier badge in workspace list items
- `src/platform/workspace/components/WorkspaceSwitcherPopover.vue` (line 51) — same design pattern used for tier badges
## Proposed Fix
Consider increasing badge font size to at least `text-xs` (12px), or extract the tier badge into a shared design system badge component that enforces accessible sizing and contrast across the workspace UI.
## Notes
- The 10px badge is supplementary info — the workspace name is always readable at accessible sizes.
- This is a consistent design pattern across workspace UI; changes should be coordinated across both affected components.
- Worth revisiting when/if the design system adds a dedicated badge component.
## References
- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9901
- Review comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9901#discussion_r2945814506
- Requested by: @christian-byrne
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-10208-a11y-increase-tier-badge-font-size-to-meet-WCAG-2-1-AA-contrast-requirements-3266d73d36508152b795ce44f78a9dea) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.