[fineract-site] Fix WCAG 2.1 AA color contrast violations - FINERACT-2503

[AliRana30]

Summary

Resolves all 23 color contrast violations to meet WCAG 2.1 Level AA standards. This PR focuses strictly on color/contrast fixes and does not include any layout or structural changes.

Key Fixes

• Navbar: Switched to high-contrast light theme (white background, dark grey text).
• Footer: Switched to light theme with dark teal text for readability.
• Icons: Restored all sidebar icons to accessible teal (#00695C).
• Dark Mode: Applied global text overrides to fix nearly invisible text caused by Materialize defaults.

Accessibility Audit

Metric	Baseline	Post-Fix
WAVE Contrast Errors	23	0
AIM Score	1.7/10	9.8/10
Lighthouse Accessibility	--	85/100

Testing

• Verified with WAVE Evaluation Tool & Lighthouse.
• Manual cross-theme inspection on localhost:8000.

Jira: FINERACT-2503
Related: FINERACT-2484

[sonarqubecloud]

Quality Gate failed

Failed conditions
4.6% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[meonkeys]

Thanks! I'll review this now.

Friendly reminder: if/when you change this PR, do so in new commits and do not rebase/squash/force push unless you have a good reason to do so. If you do force push please say when/why you do. This was recently added to CONTRIBUTING.md for this repo (and note it differs from apache/fineract repo policy).

[AliRana30]

@meonkeys Thanks! for you review, I have read all your concerns. Next time I will be more careful with everything and will try to fix everything soon.

[meonkeys]

Please also update CONTRIBUTING.md. I want the next developer to understand how they should use Wave/Lighthouse/etc. to check their work. Maybe add a few words of instruction under ### compliance?

Are there any local-first/automated tools we can just build WCAG compliance into our checks? I strongly prefer this approach. Maybe WAVE or Lighthouse have a tool we can use? Maybe put axe back in and give it a configuration matching what you're checking manually in Wave/Lighthouse? Maybe try Oobee (mentioned by Damian)?

[AliRana30]

@meonkeys Apologies for getting late. I was working hard to resolve all your concerns and bugs.
Here are all before after changes for this PR :

What changed

• Added CSS variables for light/dark theme with WCAG 2.1 AA compliant colors (--link-color: #00796B light, #4db6ac dark)
• Fixed 130+ contrast failures: headings, body text, links, chips, buttons, card panels, collection items in both modes
• Fixed icon-text alignment in About/Contribute/mailing sections with flexbox (overrides Materialize float: left default)
• Fixed Subscribe/Archives button icons separating from text (display: inline-flex)
• Removed 243-line duplicate CSS block that was silently overriding all fixes
• Removed dead nav .brand { display: none } rule that was hiding sidebar brand text
• Added WCAG Testing section to CONTRIBUTING.md (Lighthouse, WAVE, axe, Oobee)
• Added cache-busting ?v=20260302h on CSS links

How tested

• Lighthouse: Desktop 100/100, Mobile 89/100
• WAVE WebAIM: 1.7 → 9.8
• Manually on 375px, 768px, 1440px in Chrome, both light and dark mode

[AliRana30]

Wave Aim Score before was 1.7 , which is now:

For Light mode :

For Dark mode :

[AliRana30]

Lighthouse report :

For Mobile :

For Desktop:

[meonkeys]

Here are some more changes. Please also go through all my previous review questions and comment/resolve them appropriately.

[meonkeys]

Please see https://issues.apache.org/jira/browse/FINERACT-2503?focusedCommentId=18062264&page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#comment-18062264