[
https://issues.apache.org/jira/browse/FINERACT-2503?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=18062290#comment-18062290
]
Ali Mahmood edited comment on FINERACT-2503 at 3/2/26 10:48 PM:
----------------------------------------------------------------
Here are my answer to all your concerns :
1.The color on security.css line 39 changed from #26a69a to #00796B — why?
Ans : #26a69a on a white background has a contrast ratio of 2.9:1, which
fails WCAG 2.1 AA
(minimum 4.5:1 for normal text). #00796B gives 5.1:1, which passes.
That colour change
is the entire purpose of fix/wcag-contrast-fixes.
2.What changed in index.html?
Ans : Two intentional changes: (1) The ® trademark symbol was replaced with
its HTML
entity ® in 30 places — avoids encoding ambiguity on some
platforms. (2) A
"Toggle Theme" <li> was added to the mobile sidebar so dark/light
mode is
accessible on mobile.
3.What is all that Cube Loader CSS?
Ans : It was for experiment , I did'nt implemented it and now have removed
it.
4.Can you reduce the number of colors / create a color palette?
Ans : We already use CSS custom properties in :root {} for all theme colours
— --primary-
bg, --link-color, --border-color, --text-color etc. The whole
palette is: #3434 (nav/dark
text), #f8f8ff (light bg), #00796B (primary teal/links), #4db6ac
(teal for dark mode),
#ffffff/#121212 (light/dark page bg) — 5 colours total.
5. Maybe abstraction would help — SASS or SCSS?
Ans :The site is static HTML with no build step — CSS custom properties
already handle
variable reuse and theming without tooling. If you want will
introduce SCSS if the
project wants to add a build dependency.
6. About frequent use of !important
Ans : I reduced the count from 138 to 91 by using ID-level specificity
wherever possible;
the remaining ones have no CSS-only alternative.
7.Two identical PRs
Ans : I'll rebase and split them: fix/wcag-contrast-fixes for
colour/security changes only,
fix/mobile-responsiveness for nav/sidebar fixes only, then
force-push both.
If you're satisified by my approach , then we can move ahead. I sincerely
apologize for my mistakes, that you have to read and check everything.
was (Author: JIRAUSER312525):
Here are my answer to all your concerns :
1.The color on security.css line 39 changed from #26a69a to #00796B — why?
Ans : #26a69a on a white background has a contrast ratio of 2.9:1, which
fails WCAG 2.1 AA
(minimum 4.5:1 for normal text). #00796B gives 5.1:1, which passes.
That colour change
is the entire purpose of fix/wcag-contrast-fixes.
2.What changed in index.html?
Ans : Two intentional changes: (1) The ® trademark symbol was replaced with
its HTML
entity ® in 30 places — avoids encoding ambiguity on some
platforms. (2) A
"Toggle Theme" <li> was added to the mobile sidebar so dark/light
mode is accessible
on mobile.
3.What is all that Cube Loader CSS?
Ans : It was for experiment , I did'nt implemented it and now have removed
it.
4.Can you reduce the number of colors / create a color palette?
Ans : We already use CSS custom properties in :root {} for all theme colours
— --primary-bg,
--link-color, --border-color, --text-color etc. The whole palette
is: #343434 (nav/dark
text), #f8f8ff (light bg), #00796B (primary teal/links), #4db6ac
(teal for dark mode),
#ffffff/#121212 (light/dark page bg) — 5 colours total.
5. Maybe abstraction would help — SASS or SCSS?
Ans :The site is static HTML with no build step — CSS custom properties
already handle
variable reuse and theming without tooling. If you want will
introduce SCSS if the
project wants to add a build dependency.
6. About frequent use of !important
Ans : I reduced the count from 138 to 91 by using ID-level specificity
wherever possible;
the remaining ones have no CSS-only alternative.
7.Two identical PRs
Ans : I'll rebase and split them: fix/wcag-contrast-fixes for
colour/security changes only,
fix/mobile-responsiveness for nav/sidebar fixes only, then
force-push both.
If you're satisified by my approach , then we can move ahead. I sincerely
apologize for my mistakes, that you have to read and check everything.
> [fineract-site] Fix WCAG 2.1 AA contrast violations and improve mobile
> responsiveness
> -------------------------------------------------------------------------------------
>
> Key: FINERACT-2503
> URL: https://issues.apache.org/jira/browse/FINERACT-2503
> Project: Apache Fineract
> Issue Type: Improvement
> Reporter: Ali Mahmood
> Assignee: Adam Monsen
> Priority: Minor
> Labels: accessibility, fineract-site, wcag
> Attachments: AIM Score.png, fineract footer.png, fineract.png
>
>
> Here is the quick summary of what fixes I made regarding both WCAG Contrast
> and responsivness across all devices :
> *Responsiveness Fixes* :
> *Fixed the Sidebar:* I fixed the responsiveness of sidebar with following
> changes:
> 1. Added closing button
> 2. Fixed alignment of both logo and organization name
> 3. Added proper padding for all sidebar options
> *Cleaned Up the Header:* I centered the logo and moved the menu button to the
> left. I also removed the cluttered links from the top bar to make it look
> much cleaner on mobile.
> *Uniform Boxes & Spacing*: I made all the feature boxes the same size so they
> look balanced and reduced the extra "empty space" between sections to make
> the page scroll better.
> *Better Mobile View:* Fixed overlapping text and icons so the site works
> perfectly on small phone screens (like 375px).
> *Contrast Fixes :*
> *Switched to Light Theme Footer:* I moved the footer/reference section to a
> light theme with dark teal text. This fixed the remaining accessibility
> issues—we now have 0 contrast errors!
> *Switched to Light Theme Navbar :* I moved the navbar section to light theme
> so it contrasts perfectly with apache fineract's original theme and looks
> good.
> Improved AIM Score : Before contrast fixes ,AIM Score was *1.7*. Now the AIM
> score is *"9.8"*
> Related: FINERACT-2484
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
