Audit & fix Red asterisk for required fields WCAG contrast minimum

Created on 15 March 2019, over 5 years ago
Updated 30 October 2023, 8 months ago

Problem/Motivation

Because there have been problems in the past with the required field asterisk not meeting AA contrast requirements, we should review every core theme and check any use case where the background color might be different.

Proposed resolution

Improve colour contrast for the field required asterisk where needed
Needs a contrast of > 4.5:1
Finding a single colour which has sufficient contrast against white, pale grey, and the dark grey of off-canvas could be tricky.
So perhaps we need 2 colours:
One which has sufficient contrast against white and pale grey backgrounds.
Another colour which has sufficient contrast against the dark grey backgrounds.

Review results

Off Canvas (same for every theme)

Asterisk: #e5e5e5 Background: #444444
Contrast ratio 7.73:1: 👍

Claro

Asterisk: #dc2323 Default Background: #FFFFFF
Contrast Ratio: 4.87:1 👍
Default Asterisk: #dc2323 Collapsible element background (f.e. inside sidebar accordion): #F8FAFB
Contrast Ratio: 4.65:1 👍

Olivero

Asterisk: #232494 Default (AND collapsible container) Background: #FFFFFF
11.99:1 👍

Umami

Asterisk: #ee0000 Default (AND collapsible container) Background: #fbf5ee
4.18:1 👎

Umami maintainer @shaal was asked if changing this to #e40000 would be OK, and he said yes. This would bring it to 4.51:1.

Remaining tasks

patch

User interface changes

Colour contrast improvement.

Original issue summary:

Here for reference, but is outdated:

core/themes/classy/css/components/form.css.</del> (Classy theme no longer in core)

<code>This has sufficient contrast against the white page background in the Seven theme. #ee0000-on-white has contrast ratio 4.53 : 1.

(Seven theme no longer in core)

  1. (Off canvas CSS has been updated since and no longer exhibits this problem)

Note: this asterisk is an SVG image of a common typographical character, but it could just as easily have been implemented with the ASCII text character. So there is a question of whether it falls under WCAG SC 1.4.3 "Contrast (minimum)" as text, or SC 1.4.11 "Non-text Contrast" as an image. In this context, let's class it as text; it's a typographical character, presented inline as part of a text label.

🐛 Bug report
Status

Fixed

Version

11.0 🔥

Component
CSS 

Last updated 3 days ago

Created by

🇬🇧United Kingdom andrewmacpherson

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

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

  • Blocks-Layouts

    Blocks and Layouts Initiative. See the #2811175 Add layouts to Drupal issue.

Sign in to follow issues

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