No Code Attached Yet a11y bug
avatar coolcat-creations
coolcat-creations
1 Aug 2021

Steps to reproduce the issue

grafik

grafik

The color contrast in the green drop downs is not enough

Expected result

White and a darker green would work
grafik

Actual result

Contrast Checker fails

System information (as much as possible)

Joomla 4 RC5 and Firefox Developer Edition

avatar coolcat-creations coolcat-creations - open - 1 Aug 2021
avatar joomla-cms-bot joomla-cms-bot - change - 1 Aug 2021
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 1 Aug 2021
avatar brianteeman
brianteeman - comment - 1 Aug 2021

I'm a bit confused - which green are you referring to. If it is the green box with the black indicator then you cut the graphic before it shows the relevant part ;)

image

If its the green text on the white background then it is also fine

image

avatar coolcat-creations
coolcat-creations - comment - 1 Aug 2021

I tested the black chevron on the green and It shows both fail in the color contrast checker?

avatar chmst
chmst - comment - 1 Aug 2021

The black chevron on dark green indeed has bad contrast.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35010.

avatar chmst chmst - change - 1 Aug 2021
Labels Added: a11y
avatar chmst chmst - labeled - 1 Aug 2021
avatar brianteeman
brianteeman - comment - 1 Aug 2021

It is not text. It's a user interface component which as shown in the screenshot passes because the contrast only needs to be 3:1

avatar coolcat-creations
coolcat-creations - comment - 1 Aug 2021

Ok, got you - however the contrast is so weak that it confused even me and I am not color blind. this could be optimized or not?

avatar coolcat-creations coolcat-creations - change - 1 Aug 2021
Title
J4 RC5 a11y - color contrast for drop down
J4 RC5 a11y - increae color contrast for drop down
avatar coolcat-creations coolcat-creations - edited - 1 Aug 2021
avatar brianteeman
brianteeman - comment - 1 Aug 2021

The problem is that because of the strange way the arrow has been created that has to stay as black and changing the green is the only option but that has a knock on effect throughout the template.

For me the only real solution is to fix the way the arrow is created

avatar coolcat-creations
coolcat-creations - comment - 2 Aug 2021

Seems we could change the css to

.form-select.form-select-success, .form-select.form-select-danger { background-image: url("/administrator/templates/atum/images/select-bg-white.svg"); }

and add a white arrow svg.

I am currently with the Joomla Kids Training and not able to do the PR but hopefully next week if no one has time to do it.

Or someone could fix the strange markup that is done there...

avatar Krshivam25
Krshivam25 - comment - 3 Aug 2021

I'm working on this issue. Thanks

avatar Quy
Quy - comment - 3 Aug 2021

Is it necessary to have the color background? Maybe resurrect this PR #28755

avatar Krshivam25
Krshivam25 - comment - 3 Aug 2021

Is it necessary to have a color background? Maybe resurrect this PR #28755

Maybe not as another tab is having white color background.
color

avatar Hackwar Hackwar - change - 22 Feb 2023
Labels Added: No Code Attached Yet bug
Removed: ?
avatar Hackwar Hackwar - labeled - 22 Feb 2023

Add a Comment

Login with GitHub to post a comment