Claro: Form labels that are disabled have too low color contrast

Created on 24 February 2022, over 2 years ago
Updated 20 May 2024, about 1 month ago

Problem/Motivation

Form labels that are disabled have too low color contrast.

The bold label has a foreground color of #828388 with a background color of #FEFFFE which leads to a contrast ration of 3,8:1. The calculated font size is at 14.223999977111816px. To qualify as large text the text would have to be bold and at least 18.5px therefor it is categorised as regular text and needs a contrast ratio of 4.5:1 to pass.

The select box text has a color of #828388 and a background-color of #F2F2F3 which is a contrast of 3.4:1 with a font size of 16px. The aforementioned contrast ratio passes for large text (requirement 3:1) but fails for regular text (requirement 4.5:1). But with 16 px the displayed text doesn't qualify for large text (requirement either 24px or bold and at least 18,5px).
Same for the non-text contrast of the svg background-image (.form-element--type-select[disabled]). foreground color is #8E929C and background color is #f2f2f3 which leads to a contrast ratio of 2.8:1 but 3:1 is required for non text contrast.
And speaking of non-text contrast the outline of the select box has a too low contrast ratio as well. the border color is #bababf while the background color is #f2f2f3 which leads to a contrast of 1.7:1 but 3:1 is required. (*disclaimer with outlines and borders i am not entirely sure if it is necessary to get things to pass or not)

The edit source description (id is edit-source--description) has a color of #828388 with a background color of #FEFFFE that is a contrast ratio of 3.8:1. To pass with a calculated font-size of 12.640000343322754px the ratio would need to be 4.5:1 for regular text.

Steps to reproduce

- Install the Media module in Core
- Go to the image field in admin/structure/media/manage/image or one of the existing media types
- Check the media source section to see that the contrast has been updated to meet WCAG 2.0 AA (should be #75767b rather than #828388)

๐Ÿ› Bug report
Status

Fixed

Version

10.3 โœจ

Component
Claroย  โ†’

Last updated 34 minutes ago

Created by

๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.69.0 2024