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:
--color-gray-600 - #828388) used on the machine name and secondary text against the white background (#ffffff) results in a color contrast of 3.8:1. To comply with WCAG2.2 SC1.4.3 a color contrast of at least 4.5:1 is required.--color-gray-300 - #c1c2c7) against the white background (#fff) has a color contrast of only 1.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 least 3:1.Go to to a field list for a content type, for example admin/structure/types/manage/article/fields
4.5:1. The first shade of grey that would meet that requirement would be --color-gray-700 with #75767b.3:1. The first shade of grey that would meet that requirement would be --color-gray-500 with #919297.Before
After
| 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 |
Show commandsStart 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:
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!