Do these shades meet contrast rules for accessibility? I find the dark mode poorly differentiated.
I agree with the general sentiment, but I’m skeptical that this is usable across devices and abilities. And I wonder if it was at a minimum contrast level, whether it would be visually cluttered again.
Or to say it a different way: I think the challenge of the design is too many controls and a lack of clear hierarchy of actionable intent. Tho of course everything is trade offs and sometimes you don’t have infinite degrees of freedom in what you can change or can’t.
The text and icons in the dark mode do meet accessibility standards. The UI with too many borders looks cluttered because of all the border noise. Surface shades reduce this noise by making the surface elements fade back so that the text and icons can shine.
None of your design will meet ADA or EAA checks, as you do not meet WCAG rules.
— The interactive element vs. the page background should have a contrast of 3:1, and,
— The text vs. component background has a contrast of 4.5:1.
On both design the input (search) does not meet the criteria. Regarding the buttons, by removing the border and using something that does not contrast, you are not just reducing noise but losing the boundary and, at the same time, the hierarchy of the button (from secondary to tertiary). For low-vision people and older people (my segment), this will look completely flat, with no cards or buttons.
So you either get more creative and find 3 shades (from page, card, and button background) that meet 3:1 or use borders (even thin).
Fair point. Interactive UI elements do have their own 3:1 requirement, but it depends on whether the visual treatment is what makes them understandable/operable. If a high‑contrast text label is doing all the work, the extra 3:1 on the background or icon often is not required. Such is the case here.
In addition, you can add a high-contrast border highlight as a hover effect to emphasize the boundaries. This visual treatment can help clarify interactivity.
Do these shades meet contrast rules for accessibility? I find the dark mode poorly differentiated.
I agree with the general sentiment, but I’m skeptical that this is usable across devices and abilities. And I wonder if it was at a minimum contrast level, whether it would be visually cluttered again.
Or to say it a different way: I think the challenge of the design is too many controls and a lack of clear hierarchy of actionable intent. Tho of course everything is trade offs and sometimes you don’t have infinite degrees of freedom in what you can change or can’t.
The text and icons in the dark mode do meet accessibility standards. The UI with too many borders looks cluttered because of all the border noise. Surface shades reduce this noise by making the surface elements fade back so that the text and icons can shine.
None of your design will meet ADA or EAA checks, as you do not meet WCAG rules.
— The interactive element vs. the page background should have a contrast of 3:1, and,
— The text vs. component background has a contrast of 4.5:1.
On both design the input (search) does not meet the criteria. Regarding the buttons, by removing the border and using something that does not contrast, you are not just reducing noise but losing the boundary and, at the same time, the hierarchy of the button (from secondary to tertiary). For low-vision people and older people (my segment), this will look completely flat, with no cards or buttons.
So you either get more creative and find 3 shades (from page, card, and button background) that meet 3:1 or use borders (even thin).
Fair point. Interactive UI elements do have their own 3:1 requirement, but it depends on whether the visual treatment is what makes them understandable/operable. If a high‑contrast text label is doing all the work, the extra 3:1 on the background or icon often is not required. Such is the case here.
In addition, you can add a high-contrast border highlight as a hover effect to emphasize the boundaries. This visual treatment can help clarify interactivity.