Aman-Mittal opened a new issue, #587:
URL: https://github.com/apache/fineract-backoffice-ui/issues/587

   #575 and #584 are dark-mode contrast failures. Sweeping the same way in 
**light** mode turns up a separate set, and these are not hardcoded one-offs — 
they are the theme's own `--primary-color` and the status-pill palette used as 
foreground on light surfaces.
   
   Method: every leaf text node in the routed view, computed colour against the 
resolved ancestor background, WCAG AA thresholds with the large-text allowance. 
Disabled controls excluded (1.4.3 exempts them).
   
   ## Failures
   
   | Where | Foreground | Background | Size | Ratio | Needs |
   |---|---|---|---|---|---|
   | **Status pill — Pending** (all list and record screens) | `#F29900` | 
`#FEF7E0` | 12px/600 | **2.10** | 4.5 |
   | Empty state "Nothing is waiting in this queue." | `#95A5A6` | `#F0F2F5` | 
16px | **2.28** | 4.5 |
   | Active tab label (*Overview*, *Client Details*, *Loan Approval*) | 
`#3498DB` | `#F0F2F5` | 14px | **2.81** | 4.5 |
   | **Account-number links on Loans** (10 per page) | `#3498DB` | `#FFF` | 
14px | **3.15** | 4.5 |
   | `Transfer From` / `Transfer To` headings | `#3498DB` | `#FFF` | 14px | 
**3.15** | 4.5 |
   | **"Mark All Read" button** (enabled) | `#FFF` | `#3498DB` | 14px | 
**3.15** | 4.5 |
   | Status pill — Active | `#1E8E3E` | `#E6F4EA` | 12px/600 | **3.70** | 4.5 |
   | Account number `#000000020` on record headers | `#7F8C8D` | `#FFF` | 14px 
| **3.48** | 4.5 |
   | Loan Schedule Type value | `#2E86C1` | `#FFF` | 14px | **3.97** | 4.5 |
   | Profile `(ID: 1)` | `#888888` | `#FFF` | 11.9px | **3.54** | 4.5 |
   | `\|` separator on record headers | `#BDC3C7` | `#FFF` | 14px | 1.78 | — 
decorative, low priority |
   
   ![Loans list in light mode: pale blue account links and pale green Active 
pills](https://raw.githubusercontent.com/Aman-Mittal/fineract-backoffice-ui/ux-audit-screens-2026-09-21/docs/ux-audit/light-loans-links-pills.jpeg)
   
   ![Approval Queues in light mode: the empty-state line is barely 
legible](https://raw.githubusercontent.com/Aman-Mittal/fineract-backoffice-ui/ux-audit-screens-2026-09-21/docs/ux-audit/light-empty-state-faint.jpeg)
   
   ## The two that matter most
   
   **Status pills.** `Pending` at **2.10:1** is the worst reading found in 
either theme, and status is the column operators scan. These pass in dark mode 
— the dark pills use a different treatment — so this is light-specific. The 
pill palette needs darker text on those tints: roughly `#8A5300` on `#FEF7E0` 
and `#126330` on `#E6F4EA` clear 4.5:1 while keeping the same look.
   
   **`--primary-color` as foreground.** `#3498DB` measures 3.15:1 on white and 
2.81:1 on the `#F0F2F5` page background. It is fine as a *button fill* with 
white text where the darker `--primary-strong` (`#2471A3`) is used — the 
**Guide** button measures 5.3:1 and passes. But used as text, or as a fill 
without that darkening, it fails:
   
   - the Loans account-number links,
   - active tab labels across record views,
   - the `Transfer From` / `Transfer To` section headings,
   - the enabled **Mark All Read** button, which uses raw `#3498DB` as its fill 
where Guide uses `#2471A3`.
   
   So the fix is not one hex — it is that the palette has no validated "primary 
on light surface" foreground token. Adding one (a darkened `--primary-text`, 
around `#1F6391`, which gives ~5.6:1 on white) and pointing these usages at it 
would clear most of the table.
   
   ## Related — the same affordance has two different colours
   
   Account-number links are `#3F51B5` on **Clients** and `#3498DB` on 
**Loans**. Two link colours for the same thing in the same product, and each 
fails in a different theme: the indigo fails dark (#575, 2.43:1), the blue 
fails light (3.15:1). Worth settling on one themed token for links while fixing 
either.
   
   ## Clean in light mode
   
   So nobody re-checks them: Dashboard, Audit Logs, Scheduler Jobs, Journal 
Entries, Global Configurations, Staff, Loan Products, Bulk Import and Reporting 
returned **zero** failures.
   
   ## Reproduction
   
   1. Sign in, switch to light mode via the header toggle.
   2. **Clients** or **Loans** — sample a `Pending` pill against its own 
background.
   3. **Loans** — sample an account-number link against the row.
   4. **Tasks → Approval Queues** — the empty-state line and the active tab 
label.
   5. **Notifications** — the `Mark All Read` button label against its fill.
   
   ## Tested against
   
   Deployed build of `main`, Chrome, 1440x900, light theme.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to