Joomla! Issue Tracker - CMS

Download
Launch
Feeling Lucky

[#27357] - [4.0] a11y contrast on danger-bg

? Pending

User tests: Successful: Unsuccessful:

avatar brianteeman
brianteeman
28 Dec 2019

Title: WCAG 1.4.3: Elements must have sufficient color contrast (.j-links-link)
Tags: Accessibility, WCAG 1.4.3, color-contrast

Issue: Elements must have sufficient color contrast (color-contrast - https://dequeuniversity.com/rules/axe/3.3/color-contrast?application=msftAI)
Element has insufficient color contrast of 4.48 (foreground color: #495057, background color: #f9acaa, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

Target application: Control Panel - 4.0 Evaluar - Administration - http://localhost/joomla-cms/administrator/index.php

Element path: #plg_quickicon_extensionupdate > .quickicon-text.align-items-center.d-flex > .j-links-link

Snippet: <span class="j-links-link">Updates are available! <span class="badge badge-light">2</span></span>

Testing Instructions

npm i

there is almost no visible difference

Before

image

After

image

avatar brianteeman brianteeman - open - 28 Dec 2019
avatar brianteeman brianteeman - change - 28 Dec 2019
Status New ⇒ Pending
avatar joomla-cms-bot joomla-cms-bot - change - 28 Dec 2019
Category ⇒ Administration Templates (admin)
avatar brianteeman brianteeman - change - 28 Dec 2019
The description was changed
avatar brianteeman brianteeman - edited - 28 Dec 2019
avatar brianteeman brianteeman - change - 29 Dec 2019
Labels Added: ?
avatar astridx
astridx - comment - 3 Jan 2020

If tested this successful.

I did the following:

  1. I had checked the background for the Post Installation Hint
    Control Panel Test Administration
    It was

#f9acaa;

.badge-danger {
    color: 
#3b0d0c;
background-color:
#f9acaa;
border: 1px solid
    #ba2926;
}

  1. I run git fetch origin pull/27357/head:qicon and changed to qicon branch.

  2. I run npm i

  3. After reloading the site I did not realize a change. But in CSS I see the new background color.
    #f5b9b7;

.badge-danger {
    color: 
#3b0d0c;
background-color:
#f5b9b7;
border: 1px solid
    #ba2926;
}
avatar astridx astridx - test_item - 3 Jan 2020 - Tested successfully
avatar astridx
astridx - comment - 3 Jan 2020

I have tested this item ✅ successfully on 0d3ee52

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

avatar HLeithner
HLeithner - comment - 3 Jan 2020

Thanks brian and thanks astrid for your perfect testing description I would like to see this from every tester ;-)

avatar HLeithner HLeithner - change - 3 Jan 2020
Status Pending ⇒ Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 ⇒ 2020-01-03 12:30:27
Closed_By ⇒ HLeithner
avatar HLeithner HLeithner - close - 3 Jan 2020
avatar HLeithner HLeithner - merge - 3 Jan 2020
avatar brianteeman
brianteeman - comment - 3 Jan 2020

Thanks all

Add a Comment

Login with GitHub to post a comment