Skip to content

[Feature] [Accessibility] - Low contrast on components #348

Description

@sLorenzini

What problem does this feature solve?

To improve accessibility on components, some tests are made on several components.
Contrast between background and icon/text of:

  • Warning alert
  • 2 specific buttons : secondary-reverse / text-reverse
  • Disabled tag
  • Sticky columns table header

is very low.

Warning alert:
alert-warning-low-contrast
alert-warning-low-contrast-informations

Buttons:

  • secondary-reverse

349883045-44db397a-811b-444a-9415-5b6461807692
349883083-a420a583-4dd6-40df-ad4d-de6afc96f0b6

  • text-reverse

349883196-9830c882-d1cf-4400-8c4c-edec3f69a1ea
349883219-eb04c0f5-5016-4cce-b9c1-0c101a3790f9

  • both

349883380-11bd9ba4-6a3b-4eb9-ab7e-e7085dcb0df5

349883504-7df1b37f-f4ba-4700-8c62-74bd70ba8c08.mov

Disabled tag:

Capture d’écran 2024-07-18 à 15 03 31

Sticky columns table header:

Capture d’écran 2024-07-18 à 16 08 14

What is your idea for solve this issue

Find a way to improve contrast on this component. Some standard of contrast (article 1.4.3): https://webaim.org/standards/wcag/checklist#sc1.4.3

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions