[UI-Library][FieldContrastColorPicker] Create a New Accessible Form Component.

[Godoy0722]

Issue Description

This issue intends to create a form field to help users to choose colors with a good contrast between them.

The FieldContrastColorPicker component provides two color pickers that allow users to select two colors. It calculates the contrast ratio between these colors according to WCAG guidelines and displays flags indicating whether the current contrast meets each WCAG category. Additionally, the component offers a live preview section where the first color is used as the background and the second as the text color.

How to reproduce / Current behavior

1. After pulling this commit, you need to run npm run build or npm run dev in order to get this component built and ready for use.
2. You can set, as an example, the following field as a theme option for the default theme like this:

$this->addOption('colorScheme', 'FieldContrastColorPicker', [
            'label' => __('plugins.themes.default.option.colorScheme.label'),
            'description' => __('plugins.themes.default.option.colorScheme.description'),
        ]);

3. With this the theme is already working, but you can also create a hook to manage the colors:

// ... init() function

Hook::add('TemplateManager::display', [$this, 'schemeColors']);

// ...

public function schemeColors($hookName, $args)
    {
        $templateMgr = $args[0];
        $objColorScheme = json_decode($this->getOption('colorScheme'));
        $templateMgr->assign([
            'color1' => $objColorScheme->color1,
            'color2' => $objColorScheme->color2,
        ]);
    }

4. After setting up, you can use the $color1 and $color2 variables inside the .tpl files.

What application are you using?

OJS 3.5

[Godoy0722]

Hello @jardakotesovec and @Devika008 !

I created this issue after a few conversations with Michael and Israel, mostly. The idea was to create a Form component that could help anyone who uses it to choose colors that have a good contrast each other. This component is actually an extension of our ColorPicker form component, but with some additional features:

• You will see two color pickers, that give the user the freedom to choose any color they want to use.
• In the right section of this row, you will see two main pieces of information: the actual contrast value between both colors and a live preview in case you want to use the first color as a background, and the second color as the text color. This way is a practical way to show the user how the contrast works.
• Finally, in the second row, you have WCAG contrast categories that the component is comparing. So, for each contrast level, the component is telling you if the contrast is accepted or not for each category.

The component is already working, but I'm opening this issue to open a discussion and possible improvements for this component if it's accepted in the future.

I'm pinging @mfelczak and @israelcefrin as well as they both participated on the previous discussions too, if they want to add more comments here. Please let me know your thoughts about this component!

[jardakotesovec]

@Godoy0722 Thats great, can you add some screenshots if you have component already working?

[Godoy0722]

Of course! Here`s the component working I recorded.

Gravacao.de.tela.de.2025-03-20.17-45-38.webm

[kaitlinnewson]

Hi @Godoy0722, following along on this as I have a general interest in the area. One small suggestion would be a link (or links) that explain more information - for example, we can't assume that the user knows what Level AA/AAA contrast mean, so a way for them to better understand would be useful. It could be a link to our own docs, e.g. https://docs.pkp.sfu.ca/accessible-content/en/principles#contrast-ratio.

I was also wondering about the "Enhanced" and "Maximum" levels - those could possibly be removed to simplify the component (if we assume most users concerned about this want to meet one of the standards). If those were removed, then maybe you would want to move the "Text" and "Ratio" area below the colour selectors, perhaps side-by-side instead.

[israelcefrin]

Hi @Godoy0722

I've installed on my testing instance and it works fine. The info on contrast ratio seems pretty useful and I ditto to @kaitlinnewson on including links to our own docs explaining what is the purpose of keeping a minimum contrast level.

Also, I have to say that even though it is possible to use the keyboard to set hex color codes, I couldn't change or set colours using the keyboard only-navigation. I mean, users will always need a mouse to interact with it.
Given we are still on the prototyping stage, I would like to ask if we could have something similar to this:
https://vue-accessible-color-picker.netlify.app/

Please, notice that you can either manipulate the controls using the mouse or the keyboard. I haven't tested it using my screenreader yet, but I will do it and post my comments as well.

[Godoy0722]

Hello folks.

Just a heads-up that I updated my branch on both ui-library and pkp-lib to improve accessibility. @kaitlinnewson and @israelcefrin, I added your suggestions on the component so you can also take a look at them. Now, you can move both the saturation and the hue pointers with the keyboard. I will still work a bit more on these features as I believe I can improve this behavior, despite it is working now.

[Godoy0722]

Hello folks! This is just a heads-up that I have been working on major upgrades for this component, which include:

• Creating the color picker component without using a third-party library, which gives us full control of the features we can add to it.
• Accessibility issues for the component itself
• UI updates mainly for the color pickers.

After this, I believe the component is ready to be reviewed. @israelcefrin, @kaitlinnewson , @jardakotesovec , if you want to take a look, you can see these two PRs for this component:

• lib-pkp
• ui-library

Please feel free to reach out to me if you have any questions or suggestions!