[#48743] - [6.2] Install from web - commercial badge contrast [a11y]
- Closed
- 1 Nov 2026
- Medium
- Build: 6.2-dev
- # 48743
- Diff
- brianteeman:install_from_web_commercial_badge
User tests: Successful: Unsuccessful:
Pull Request resolves #48400 .
- I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.
Summary of Changes
The badge used for commercial applications fails accessibility color contrast checks. The choice was to either change the yellow to a muddy brown or to keep the yellow and change the text from white to dark. To keep consistency with the JED I chose to keep the yellow
Testing Instructions
This is a change to scss to either use a prebuilt package or npm i
Check the badge color used for commercial apps in the Install from Web tab of the Extension Instyaller
Actual result BEFORE applying this Pull Request
Expected result AFTER applying this Pull Request
Link to documentations
Please select:
-
Documentation link for guide.joomla.org:
-
No documentation changes for guide.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | NPM Change |
| Labels |
Added:
NPM Resource Changed
PR-6.2-dev
|
||
I have tested this item ✅ successfully on 5535f2e
I was able to test this PR fix. Thanks @brianteeman!
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48743.
I have tested this item 🔴 unsuccessfully on 5535f2e
Verdict: needs a one-word change. Light mode now passes, dark mode is still below 4.5:1.
Verification
6.2-dev + PR (DDEV), Install from Web tab with live JED data, $ badge in the list and "Commercial" badge on an extension's detail page (RSForm! Pro), Atum colour scheme via OS setting. Computed colours, WCAG contrast ratio. Before = same instance with client.scss from 6.2-dev rebuilt.
.badge-warning (12px bold) |
before | after (this PR) | with var(--warning-text) |
|---|---|---|---|
light: background #ffb514 |
white, 1.77:1 | #495057, 4.62:1 |
#000, 11.87:1 |
dark: background #f0ad4e |
white, 1.95:1 | #495057, 4.20:1 |
#000, 10.79:1 |
--template-text-dark isn't redefined for dark mode, so it stays #495057 on the lighter dark-mode yellow. Text at 12px needs 4.5:1 (1.4.3).
Suggested fix
&.badge-warning {
color: var(--warning-text, #000);
background-color: var(--warning);
}--warning-text is #000 in both _variables.scss and _variables-dark.scss and is meant for text on --warning. Measured in the browser with that value: 11.87:1 light, 10.79:1 dark. The fallback covers admin templates without that variable; Atum's own .bg-warning uses #000 too. --template-text-dark is also the configurable "Dark Text Colour" of the Atum template style, so a lighter custom value lowers the badge contrast with it.
The other badges (C/M/P, Component/Module/Plugin, POPULAR) are 4.51:1 or more in both modes. stylelint clean.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48743.
I have tested this item 🔴 unsuccessfully on 5535f2e
Verdict: needs a one-word change. Light mode now passes, dark mode is still below 4.5:1.
Verification
6.2-dev + PR (DDEV), Install from Web tab with live JED data, $ badge in the list and "Commercial" badge on an extension's detail page (RSForm! Pro), Atum colour scheme via OS setting. Computed colours, WCAG contrast ratio. Before = same instance with client.scss from 6.2-dev rebuilt.
.badge-warning (12px bold) |
before | after (this PR) | with var(--warning-text) |
|---|---|---|---|
light: background #ffb514 |
white, 1.77:1 | #495057, 4.62:1 |
#000, 11.87:1 |
dark: background #f0ad4e |
white, 1.95:1 | #495057, 4.20:1 |
#000, 10.79:1 |
--template-text-dark isn't redefined for dark mode, so it stays #495057 on the lighter dark-mode yellow. Text at 12px needs 4.5:1 (1.4.3).
Suggested fix
&.badge-warning {
color: var(--warning-text, #000);
background-color: var(--warning);
}--warning-text is #000 in both _variables.scss and _variables-dark.scss and is meant for text on --warning. Measured in the browser with that value: 11.87:1 light, 10.79:1 dark. The fallback covers admin templates without that variable; Atum's own .bg-warning uses #000 too. --template-text-dark is also the configurable "Dark Text Colour" of the Atum template style, so a lighter custom value lowers the badge contrast with it.
The other badges (C/M/P, Component/Module/Plugin, POPULAR) are 4.51:1 or more in both modes. stylelint clean.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48743.
I have tested this item 🔴 unsuccessfully on 5535f2e
Verdict: needs a one-word change. Light mode now passes, dark mode is still below 4.5:1.
Verification
6.2-dev + PR (DDEV), Install from Web tab with live JED data, $ badge in the list and "Commercial" badge on an extension's detail page (RSForm! Pro), Atum colour scheme via OS setting. Computed colours, WCAG contrast ratio. Before = same instance with client.scss from 6.2-dev rebuilt.
.badge-warning (12px bold) |
before | after (this PR) | with var(--warning-text) |
|---|---|---|---|
light: background #ffb514 |
white, 1.77:1 | #495057, 4.62:1 |
#000, 11.87:1 |
dark: background #f0ad4e |
white, 1.95:1 | #495057, 4.20:1 |
#000, 10.79:1 |
--template-text-dark isn't redefined for dark mode, so it stays #495057 on the lighter dark-mode yellow. Text at 12px needs 4.5:1 (1.4.3).
Suggested fix
&.badge-warning {
color: var(--warning-text, #000);
background-color: var(--warning);
}--warning-text is #000 in both _variables.scss and _variables-dark.scss and is meant for text on --warning. Measured in the browser with that value: 11.87:1 light, 10.79:1 dark. The fallback covers admin templates without that variable; Atum's own .bg-warning uses #000 too. --template-text-dark is also the configurable "Dark Text Colour" of the Atum template style, so a lighter custom value lowers the badge contrast with it.
The other badges (C/M/P, Component/Module/Plugin, POPULAR) are 4.51:1 or more in both modes. stylelint clean.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48743.
I am not talking to ai
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2026-11-01 17:47:14 |
| Closed_By | ⇒ | brianteeman | |
| Labels |
Added:
a11y
|
||
I am not talking to ai
Brian, that was me – I tested it on my own install and used tools for the measuring. Your change fixes light mode. In dark mode the yellow is lighter and the grey text only gets 4.2:1. With color: #000 it passes in both modes, see the screenshot.
Your text was written by ai. I am not engaging with anything ai generated here
I have tested this item ✅ successfully on 5535f2e
I was able to test this PR fix. Thanks @brianteeman!
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48743.