Problem/Motivation

Authenticated accounts in the user profile have the authenticated user role checked and greyed out. That label has a too low color contrast.
list of available user roles in the user profile - the checked authenticated user role is greyed out with a too low color contrast
The text color is grey (#828388) while the background is white (#fff) resulting into a contrast ratio of 3.8:1. Since the font size 14.223999977111816px (the listed calculated value in Safari) is smaller than 24px nor bold and smaller than 18,5 px it is considered as regular text and so the contrast ratio has to be 4.5:1 instead of 3:1.

Steps to reproduce

- Go to user/1/edit
- Check the roles section

CommentFileSizeAuthor
user_roles.png11.32 KBrkoller

Comments

rkoller created an issue. See original summary.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue tags: +Accessibility, +CSS novice

The element .form-item__label.is-disabled is using the variable --input--disabled-fg-color. It is defined in the variables.pcss.css file on line 104 as --input--disabled-fg-color: var(--color-gray-600). Instead of --color-gray-600 it should be using --color-gray-700, with a contrast ratio of 4.53. It'll solve this existing problem in all disabled labels.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Active » Closed (duplicate)

This is actually a duplicated of #3266299: Claro: Form labels that are disabled have too low color contrast.