The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.Problem/Motivation
Followup for #2409559: User should be able to identify required fields from field listing. The issue introduced a few problems in regard to WCAG compliance - for the full usability review see #2409559-40: User should be able to identify required fields from field listing. The problems are:
- The color (
--color-gray-600-#828388) used on the machine name and secondary text against the white background (#ffffff) results in a color contrast of3.8:1. To comply with WCAG2.2 SC1.4.3 a color contrast of at least4.5:1is required. - The border color for the pill (
--color-gray-300-#c1c2c7) against the white background (#fff) has a color contrast of only1.8:1. It is not a focusable interface component a user is directly interacting with, it only has an informational purpose, but the pill styling is there for a reason, to distinguish it from the machine name - so it is considered a meaningful graphic (*at a later date I've discussed the matter with @katannshaw). In consequence, to make sure that those pill components are recognizable, the contrast would have to be at least3:1.
Steps to reproduce
Go to to a field list for a content type, for example admin/structure/types/manage/article/fields
Proposed resolution
- Increase the color contrast for the machine name and the secondary text on the field type column to at least
4.5:1. The first shade of grey that would meet that requirement would be--color-gray-700with#75767b. - Increase the color contrast for the pill border to at least
3:1. The first shade of grey that would meet that requirement would be--color-gray-500with#919297.
Remaining tasks
User interface changes
Before
After
Introduced terminology
API changes
Data model changes
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | Screenshot 2026-01-12 at 3.41.55 PM.png | 144.44 KB | smustgrave |
| #4 | Screenshot 2026-01-12 at 3.40.40 PM.png | 138.75 KB | smustgrave |
| #3 | after.jpg | 60.81 KB | rkoller |
| #3 | before.jpg | 60.27 KB | rkoller |
Issue fork drupal-3566280
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 3566280-color-contrast-issues
changes, plain diff MR !14302
Comments
Comment #3
rkollerA quick preliminary improvement until #3566810: Move the additional attributes in the field column on the field listings page to dedicate columns is getting worked on. I've used the lightest possible shade of grey that meets the minimum color contrast required. As outlined in the proposed resolution the secondary text color got changed from
--color-gray-600to--color-gray-700to get to a color contrast of4.5:1against the white background. And the pill border changed from--color-gray-300to--color-gray-500to get the pill border to a color contrast of3.1:1against the white background.PHPStan unit testes failed. but due to the fact that this is a css only change i am uncertain if that is related. css linting tests passed. so i set the issue to needs review.
Comment #4
smustgrave commentedPut my old 508 accessibility hat on
Without the patch I get this results
With the patch
It passes AA which I believe is the requirement. Don't believe AAA is on the radar right now.
LGTM.
Comment #5
rkolleryep it passes AA with the MR applied which was the goal. for AAA you would need 7:1 instead of 4.5:1. and for AAA you would also need 4.5:1 for the border of the pill. this MR is solely about AA. and that is what it does, changing the contrast for the secondary text from 3.8:1 to 4.5:1 and the contrast of the pil border from 1.8:1 to 3.1:1 - both the required minimum for AAupdate: oh apologies. completely misread your comment :D i need more sleep.thank you for the review. (and eyes that work normally where i am able to read thoroughly and focused)
Comment #9
longwaveBackported down to 11.3.x as an eligible bug fix. Doesn't apply cleanly to 10.6.x, if anyone feels strongly about backporting please open a new MR. Thanks!