Comfy-Org / Comfy-Org/ComfyUI_frontend

a11y: increase tier badge font size to meet WCAG 2.1 AA contrast requirements

Open
#10,208 0 comments 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
area:ui
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.