Skip to content

bad contrast in darkmode when using Lumo theme warning text #10237

@McPringle

Description

@McPringle

Describe the bug

Since Vaadin 24.1 there are colors for warning text in the Lumo theme:
https://vaadin.com/docs/latest/styling/lumo/lumo-style-properties/color#warning

In my application I use --lumo-warning-color (strong warning background color) as the background and --lumo-warning-text-color (warning color with sufficient contrast for text). At least that is how I interprete the color rules from the page mentioned above.

These work fine in light mode:
Image

But in dark mode the contrast is really bad:
Image

I would expect the warning text color of the Lumo theme to work better with the warning background color. For visually handicaped people this is a problem.

Btw: Unfortunately, the warning colors are missing in the Lumo Editor.

Expected-behavior

In dark mode, the warning text color should have a much better contrast to the warning background color.

Reproduction

Use any Vaadin application with the Lumo theme and a warning text on the warning background color. Switch to dark mode. I created a simple demo application with one view, a warning message, and a theme toggle:

https://git.fihlon.swiss/McPringle/lumo-warning-colors

System Info

Linux 6.14.0, Vaadin 24.9.0, Firefox 143.0.1

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions