Problem/Motivation

When using online accessibility tool, it states that the grey text from the Claro theme fails AA and AAA accessibility check due to low contrast: the color is #828388, which gets a 3.78:1 ratio and is still not enough for normal text.

Steps to reproduce

Navigate to /admin/config and inspect .admin-item__description.

Proposed resolution

We should change it to #55565B (--color-gray-800), which is the same color used for the rest of the description texts (lighter UI text).

Remaining tasks

Create the patch.

User interface changes

The color for the description in admin lists will be slightly darker.

Before:

After:

CommentFileSizeAuthor
#29 Screen Shot 2022-02-22 at 10.39.44.png12.15 KBlauriii
#29 Screen Shot 2022-02-22 at 10.39.35.png11.65 KBlauriii
#29 3123811-27-d10.patch1.01 KBlauriii
#27 3123811-27.patch1009 byteskostyashupenko
#16 accessibility-contrast.png250.59 KBhansa11
#15 color-accessibility-issue-3123811-15.patch1009 bytessd9121
#13 color-accessibility.png517.89 KBsd9121
#13 color-accessibility-issue-3123811-13.patch853 bytessd9121
#9 After_Accessibility_Report_Contrast_Grey_text.png481.84 KBpriyanka.sahni
#9 After_Accessibility_Report.png367.56 KBpriyanka.sahni
#5 claro-grey-text-accessibility-screenshot.png154.29 KBcodewithlakshay
#5 drupal-claro-grey-text-accessibility-3123811-5.patch1009 bytescodewithlakshay
image (4).png160.54 KBobmsmith
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

obmsmith created an issue. See original summary.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Project: Claro » Drupal core
Version: 8.x-1.0-alpha1 » 8.9.x-dev
Component: User interface » Claro theme

Thank you for filing an issue for this! I'm moving this to the Drupal Core issue queue because Claro has been moved there.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford at OpenConcept Consulting Inc. commented

#ddd on #fff is a problem for sure.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford at OpenConcept Consulting Inc. commented
Issue tags: +Accessibility, +color contrast
codewithlakshay’s picture

codewithlakshay CreditAttribution: codewithlakshay at OpenSense Labs for DrupalFit commented
FileSize
drupal-claro-grey-text-accessibility-3123811-5.patch1009 bytes
claro-grey-text-accessibility-screenshot.png154.29 KB

Changing --color-oldsilver: #82828c; to --color-davysgrey: #545560; Fixes the issue, attaching Screenshot as well as the patch.

codewithlakshay’s picture

codewithlakshay CreditAttribution: codewithlakshay at OpenSense Labs for DrupalFit commented
Status: Active » Needs review

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

priyanka.sahni’s picture

priyanka.sahni CreditAttribution: priyanka.sahni at Srijan | A Material+ Company for Drupal India Association commented
Assigned: Unassigned » priyanka.sahni
priyanka.sahni’s picture

priyanka.sahni CreditAttribution: priyanka.sahni at Srijan | A Material+ Company for Drupal India Association commented
FileSize
After_Accessibility_Report.png367.56 KB
After_Accessibility_Report_Contrast_Grey_text.png481.84 KB

Verified and tested by applying the patch#5.There are still some contrast error related to the grey text.

Steps to test-
1. Go to the admin site.
2. Go to /admin/structure.
3. Enable the wave evaluation tool.
4. Verify the accessibility report.

Accessibility Report -
After Patch

Accessibility Report Contrast Errors -
After Patch

priyanka.sahni’s picture

priyanka.sahni CreditAttribution: priyanka.sahni at Srijan | A Material+ Company for Drupal India Association commented
Assigned: priyanka.sahni » Unassigned
DeepaliJ’s picture

DeepaliJ CreditAttribution: DeepaliJ at QED42 for Drupal India Association commented
Status: Needs review » Needs work

As per the #9, changing the status

sd9121’s picture

sd9121 CreditAttribution: sd9121 as a volunteer and commented
Assigned: Unassigned » sd9121
sd9121’s picture

sd9121 CreditAttribution: sd9121 as a volunteer and commented
Assigned: sd9121 » Unassigned
Status: Needs work » Needs review
FileSize
color-accessibility-issue-3123811-13.patch853 bytes
color-accessibility.png517.89 KB

Please review the patch.

Screenshot for the reference:

color accessibility

hansa11’s picture

hansa11 CreditAttribution: hansa11 as a volunteer and at QED42 commented
Assigned: Unassigned » hansa11
sd9121’s picture

sd9121 CreditAttribution: sd9121 as a volunteer and commented
FileSize
color-accessibility-issue-3123811-15.patch1009 bytes

The patch in #13 comment id failed, this one would work. Please review.

Thanks!

hansa11’s picture

hansa11 CreditAttribution: hansa11 as a volunteer and at QED42 commented
FileSize
accessibility-contrast.png250.59 KB

Thank you @sd9121 for your contribution, this looks good to me.

Screenshot for the reference:
accessibility

hansa11’s picture

hansa11 CreditAttribution: hansa11 as a volunteer and at QED42 commented
Assigned: hansa11 » Unassigned
Status: Needs review » Reviewed & tested by the community
xjm’s picture

xjm
she/her
Primary language English
CreditAttribution: xjm at Acquia commented
Issue tags: +Needs subsystem maintainer review, +Needs frontend framework manager review

Thanks for your work on this accessibility issue!

Since the color choice affects the design, I think we should have subsystem and/or frontend framework manager signoff on the new, accessible color choice, so tagging accordingly. I think it's probably great but just want to confirm with the maintainers. :)

Thanks!

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Status: Reviewed & tested by the community » Needs review
Related issues: +#3154539: Implement new Gray scale on Claro

Can we check that this matches with the new palette of grays described in #3154539: Implement new Gray scale on Claro?

saschaeggi’s picture

saschaeggi
he/him
CreditAttribution: saschaeggi at GitLab commented
Status: Needs review » Needs work

We're introducing an updated grey scale in #3154539: Implement new Gray scale on Claro and therefore this issue needs to wait until the other issue is implemented.
The new color which should be used for the description text is: Moiety
Updated component in Figma: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
CreditAttribution: bnjmnm at Acquia commented
Status: Needs work » Postponed

Per #20, Postponed on #3154539: Implement new Gray scale on Claro

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
CreditAttribution: ckrina at Lullabot commented
Status: Postponed » Active

Moving this to active because #3154539: Implement new Gray scale on Claro has been already fixed.

Next steps are defining which of the new colors should be used that comply accessibility guidelines.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
CreditAttribution: ckrina at Lullabot commented
Issue summary: View changes
Status: Active » Needs work

This issue was filled for the .admin-item__description, where the color used at that time didn't comply (it seems it was #ddd. Nowadays, the color is #828388, which gets a 3.78:1 ratio and is still not enough for normal text.

We need to change it to #55565B (--color-gray-800) and use the same color used for descriptions.

kostyashupenko’s picture

kostyashupenko
Primary language Russian
Location Omsk
CreditAttribution: kostyashupenko at Skilld commented
Status: Needs work » Needs review
FileSize
3123811-27.patch1009 bytes
rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
CreditAttribution: rkoller commented
Status: Needs review » Reviewed & tested by the community

I've applied the patch. With #55565B for .admin-item__description the color contrast is now at 7.3:1 which passes WCAG 2.1 1.4.3 Contrast (Minimum - AA) for regular and large text, 1.4.6 Contrast (Enhanced - AAA) for regular and large text and 1.4.11 Non-text Contrast (AA) for UI components and graphical objects. Checked with Colour Contrast Analyser (CCA) and inside the Chrome Devtools.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Issue summary: View changes
Issue tags: -Needs subsystem maintainer review, -Needs frontend framework manager review
FileSize
3123811-27-d10.patch1.01 KB
Screen Shot 2022-02-22 at 10.39.35.png11.65 KB
Screen Shot 2022-02-22 at 10.39.44.png12.15 KB

Attaching Drupal 10 patch and uploaded before and after screenshots to the issue summary.

  • lauriii committed ce3899e on 10.0.x 
    Issue #3123811 by sd9121, lauriii, codewithlakshay, kostyashupenko,...

  • lauriii committed bf642ec on 9.4.x 
    Issue #3123811 by sd9121, lauriii, codewithlakshay, kostyashupenko,...

  • lauriii committed 242896c on 9.3.x 
    Issue #3123811 by sd9121, lauriii, codewithlakshay, kostyashupenko,...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Version: 9.4.x-dev » 9.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed ce3899e and pushed to 10.0.x. Committed patch from #27 to 9.4.x and cherry-picked to 9.3.x because this is a bug fix for Claro which is experimental. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.