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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    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