Saga theme not respect WCAG 1.4.3 Contrast (Minimum) (Level AA)

[wbss1]

Hello, the saga theme does not respect WCAG 1.4.3 Contrast (Minimum) (Level AA) (https:///www.w3.org/WAI/WCAG21/nderstanding/contrast-minimum.html) in most primefaces components. It would be great if it could be fixed in all the themes of primefaces.

[melloware]

@wbss1 i totally understand but this is a really tough requirement as the 5 to 1 contrast ratio picking colors makes the themes look really poor. I think PrimeTek is working on a new theme specifically for 5 to 1 contrast ratio if your client requires strict adherence to WCAG standards.

But they probably need at least 1 theme even if its ugly to be fully compliant!

[wbss1]

Yeah, i understand, but i agree with this "But they probably need at least 1 theme even if its ugly to be fully compliant!".

For the level AA it's 4.5:1 for normal text and 3:1 for large text.

[jepsar]

I'd suggest to implement a resource handler to replace colors to your needs. You can have a look at PFE for an example.

https://github.com/primefaces-extensions/primefaces-extensions/blob/master/core/src/main/java/org/primefaces/extensions/application/ThemeAccentColorResource.java

[wbss1]

I was trying to follow your suggestion, i got this css body .ui-button { background: var(--saga0); color: #fff; border: 1px solid var(--saga0); margin: 0; outline: 0 none; border-radius: 4px; transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s,opacity .2s; }, but var --sage0 it's not defined.

I entered the classes ThemeAccentColorResource and ThemeAccentColorResourceHandler in my project and put <resource-handler>com.myproject.ThemeAccentColorResourceHandler</resource-handler> in-config.xml. What I miss?

[jepsar]

You will need to define those in a custom style sheet (if you already have one), or you could modify the handler to prepend the styles to the PF template. See also

https://www.primefaces.org/showcase-ext/sections/utils/themeAccentColorResourceHandler.jsf

So you need something like

:root {
    --saga0: hsl(29, 44%, 53%); // Main color
    --saga1: hsl(29, 44%, 57%); // Hover color
    --saga2: hsl(29, 44%, 61%); // Active color
    --saga3: hsl(29, 44%, 77%); // Focus outline color
    --saga4: hsl(29, 44%, 23%); // Text color
}

where you define the colors you want to use.

[melloware]

@wbss1 please let us know what configuration for Saga you end up with.

[wbss1]

@melloware i set this

:root {
    --saga0: #0B78D5; /* Main color */
    --saga1: #0859A7; /* Hover color */
    --saga2: #0859A7; /* Active color */
    --saga3: #6CBCF9; /* Focus outline color */
    --saga4: #495057; /* Text color */
}