Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
The default icon, in case a field type has not assigned an icon, has a too low color contrast with 1.5:1 (#cacbd2 against #f3f4f9 - WCAG 2.2 SC1.4.11). See the Mermaid diagram field type example in the user interface changes section.
We've discussed the problem in the weekly Drupal CMS a11y track meeting today. For the record the attendees were, @katannshaw, @rkoller, and @the_g_bomb
Steps to reproduce
Proposed resolution
Even though it is a generic icon that doesn't provide any visual cue about the type of field nor is it possible to distinguish two or more field types that are using that default icon, but meeting the minimum color contrast requirement of 3:1, makes sure that the icon is at least visible for more people.
Remaining tasks
User interface changes
Before:
After:
Introduced terminology
API changes
Data model changes
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #17 | after.png | 95.38 KB | mherchel |
| #17 | before.png | 95.76 KB | mherchel |
| #16 | AfterClaro.png | 116.96 KB | divya.sejekan |
| #16 | BeforeClaro.png | 145.02 KB | divya.sejekan |
| #15 | screenshot-3530862.jpg | 2.78 KB | pierregermain |
Issue fork drupal-3530862
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:
- 3530862-the-default-icon
changes, plain diff MR !12413
Comments
Comment #3
virag.jain commentedYou're absolutely right that the current default icon used for field types without specific icons lacks sufficient color contrast.
I support updating the default icon styling to meet the minimum contrast requirement. A simple change to the icon's fill color would go a long way in improving accessibility without impacting the overall design.
I'll provide a patch shortly to update the default field type icon styling so it meets the minimum 3:1 contrast ratio per WCAG 2.2 SC 1.4.11. This will ensure better visibility and accessibility for all users, even when no specific icon is assigned to a field type.
Comment #6
lostcarpark commentedI'm working on this.
Comment #8
lostcarpark commentedI have made the puzzle piece the same colour as the other core icons. The new one is in the
core/misc/icons/55565bdirectory.The original version remains in the
core/misc/icons/cacbd2directory. I'm not sure if it should be removed.Moving to needs review.
Comment #9
rkollerthanks @lostcarpark! that looks good, going with the same color like the rest of the icons is definitely fixing the color contrast issue (it has a contrast of 6.7:1 now). the only thing i wonder, was it the intention by going with a lighter grey for the default icon to differentiate from the bespoke ones so it "stands out" somehow? I have no strong opinion either way as long as the contrast is meeting the minimum requirement.
about the question if the original version should be removed, definitely a valid question, but i dont know. i would assume it would make sense to clean that up if it is not needed anywhere else anymore.
Comment #10
lostcarpark commentedI can't see how having the default icon a lighter color conveys any useful information to anyone except the maintainer of the module providing the field. If anything, it might make people think the field type is unavailable.
However, if anyone feels strongly that it should be a lighter shade, I can certainly find a color that gives sufficient contrast.
It's also worth noting that the Gin theme seems to override the default color for all icons, so in Gin the placeholder is a dark color by default, and a light color in dark mode.
I've searched the core codebase, and there are no other references to the
puzzle_piece_placeholder.svgfile, so I agree it makes sense to remove it.Comment #11
lostcarpark commentedUpdated to remove the old version of the puzzle piece icon.
Comment #12
rkolleri not necessarily meant that the icon color should be lighter. i was just thinking out loud if there was some intention behind the lighter color choice for the default icon . but strictly speaking, if some information would be conveyed via a different color that would be against SC1.4.1, therefore a +1 for the consistent colors you've went with from my end. and i've also discussed that question in todays accessibility office hour with @katanshaw and @the_g_bomb and both agreed as well. overall this looks good to go imho. not sure if it would be ok for me to rtbc the issue, since i've opened it. maybe wait for a second opinion, but a +1 for RTBC from my end.
Comment #13
rkollerupdated the user interface changes section in the issue summary (uploaded another screenshot so the before and after are both in a dialog modal.
Comment #14
rkollerComment #15
pierregermain commentedWe have tested using gitpod (drupal 11.3-dev) the MR and we have found a contrast of 6.66:1
Comment #16
divya.sejekan commentedVerified using MR!12413 , The contrast ratio of the icon's stroke color (#55565b) against the parent's background color (rgb(243, 244, 249)) is 6.67:1. This meets the WCAG AA standard for normal text (4.5:1) and large text (3:1).
Icon looks fine in Gin (light & dark), Claro theme. Attaching claro theme before and after screenshots
Steps Followed :
1. Install Drupal
2. In Content type , Navigate to Manage fields , Add fields
3. Check the field type icons.
RTBC+ , Keeping in ' Need Review ' for Further code review
Comment #17
mherchelThis looks great.
Tested with geolocation module.
Comment #20
nod_Committed 004cf1e and pushed to 11.x. Thanks!