[#23480] - WCAG: Autum alert colors are too similar for Color-Blind Users
- Closed
- 8 Jan 2019
- Urgent
- Build: 4.0.0-alpha6
- # 23480
Steps to reproduce the issue
I've been processing new extensions with JED Checker for Joomla 4, and I have noticed that the Alert colors are difficult to differentiate for Color-Blind Users.
These are the Autum colors vs the original Bootstrap 4 colors:
| Alert Class | Autum | Bootstrap 4 |
|---|---|---|
| Font Success | #18411a |
#155724 |
| Font Info | #08434c |
#004085 |
| Font Warning | #5d2e00 |
#856404 |
| Font Danger | #661514 |
#721c24 |
| Background Success | #d5e5d6 |
#d4edda |
| Background Info | #cfe6e9 |
#cce5ff |
| Background Warning | #f0decc |
#fff3cd |
| Background Danger | #f3d4d4 |
#f8d7da |
This is the sample page: https://blog.anibalhsanchez.com/media/Color-Blind/JED-checker-Test-J4-Administration.html
You can check the colors here: https://www.color-blindness.com/coblis-color-blindness-simulator/
References
By some estimates, up to 10% of the male population of the world suffers from some form of color blindness. The most common being Protanopia, or Red-Green color blindness, the inability to distinguish between red and green hues.
- Accessibility Basics: Testing Your Page For Color Blindness
https://css-tricks.com/accessibility-basics-testing-your-page-for-color-blindness/ - Improving The Color Accessibility For Color-Blind Users https://www.smashingmagazine.com/2016/06/improving-color-accessibility-for-color-blind-users/
- Web Accessibility Guidelines v1.0 - Contrast & Color Find colors that provide maximum contrast, including enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color deficiencies. http://web-accessibility.carnegiemuseums.org/design/color/
Expected result
Autum Colors aligned with WCAG guidelines for Color-Blind Users.
Actual result
Current colors can't be easily differentiated.
Please, check the screenshots.
joomla-cms-bot
- 
A quick check of the WCAG color contrast checker doesn't show a problem with the one I checked (success)
The overall contrast is not the problem. It is how similar the colors are for a color-blind user.
Color should not be used as the sole indicator for message severity, and personally I wouldn't try to find a color palette that creates enough shades of gray to be visually different.
The overall contrast is not the problem. It is how similar the colors are for a color-blind user.
Your post says that it is about the contrast - that is the only thing that WCAG is concerned with
Color should not be used as the sole indicator for message severity,
Exactly although my pr that addressed that was closed
The contrast works in different ways for each viewer. So, yes, the first check is about the contrast between foreground and background. The content is legible. In a second analysis, I'm trying to express that these colors don't communicate for color-blind users the original intention.
Yes, icons can help to communicate the same intention.
In any case, the template is still in the works and it has not been a11y checked. So, you can close the issue if it can't be addressed now.
yes sadly a huge amount of time and effort to make the template accessible has been thrown away
We will look into it when it is time to do so
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-01-08 18:38:22 |
| Closed_By | ⇒ | rdeutz |
I second Anibal's issue. For a colourblind man (officially: a man with "color vision deficiency" = CVD) like me, the colours of the buttons are not distinctive enough: they seem to blend to similar colours.
I tested this on a site, together with my (female) neighbour, who is not colourblind. We used this page: https://www.color-blindness.com/coblis-color-blindness-simulator/ which enables the rest of the Joomla users to see the colours a colourblind person sees.
The top picture is what I took from Joomla 4 alpha 7 back end.
The second and third show what a colourblind person sees, depending on the type of colourblindness s/he is affected by:
First "Green-Weak/Deuteranomaly" CVD
Secondly "Red-Blind/Protanopia" CVD
You will understand the buttons are not workable for a man with CVD (I say man, because this is the type of colourblindness that affects only men: 8 percent of the male population)
A solution could be either a change of the colour scheme, or a setting under "options" that would make Joomla 4 acceptable for colourblind people.
@Thomsterdam The conclusion of this ticket was that the current template is going to be replaced with a new version. This new template is still in the works and not even checked for accessibility.
FYI: https://volunteers.joomla.org/teams/j4-backend-template-working-group/reports/926-team-setup
I doubt that will make any difference as the current template IS compliant with the WCAG guidelines.
You can read them here https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html
There are three visual indicators - colour, icon and text
Two of those are independent of colour so it satisfies WCAG
I agree that in your Protanopia simulation the colours are very similar and we could play around t adjust the colours to make the simulator show it as more different. BUT and an important BUT. Every individual is different and we can never have a set of colours that would satisfy everyone
Current Colors
Greyscale Comparison
Dichromatic view: Red-Blind/Protanopia
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/23480.