Skip to content

Free Model green pill fails WCAG AA/AAA contrast requirements #3686

@IamCoder18

Description

@IamCoder18

The FreeModelDataBadge component in apps/web/src/components/shared/ModelCombobox.tsx:461 uses bg-green-500 with text-white for the "Free" pill badge.

Image

This color combination produces a contrast ratio of approximately 2.33:1, which fails WCAG compliance at all levels:

  • AA requires ≥ 4.5:1 for normal text
  • AAA requires ≥ 7:1 for normal text

This also simply makes it hard to read at all.

Affected code:
apps/web/src/components/shared/ModelCombobox.tsx:464

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions