Skip to content

[Accessibility] Improve AI Catalog card icons #1933

Description

@csirmazbendeguz

Currently in the AI Catalog UI some icons are differentiated only by color. For example:

Security Scanned, no issues — green

Image

Security Scanned, high severity — red

Image

Security Scanned, medium severity — orange

Image

Trusted — blue

Image

Verified uses the same icon as Trusted, but in green.

This creates an accessibility issue for users with color vision deficiencies, as the icons may be difficult to distinguish based on color alone.

The icons should use different shapes or visual elements in addition to color. For example:

  • Security Scanned, no issues: shield without an exclamation mark
  • Security Scanned, medium severity: shield with an exclamation mark
  • Security Scanned, high severity: broken shield
  • Trusted: checkmark
  • Verified: lock icon, similar to the lock used by browsers for HTTPS connections

These are only examples; the final implementation can use other shapes or visual indicators, as long as each status can be distinguished without relying on color alone.

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issueGood for newcomerssize/SDenotes a PR that changes 50-199 lines

    Projects

    Status
    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions