fix: use contrast threshold for saturated background colors#1018
fix: use contrast threshold for saturated background colors#1018bert-e merged 2 commits intodevelopment/1.0from
Conversation
Hello hervedombya,My role is to assist you with the merge of this Available options
Available commands
Status report is not available. |
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
fca9d1c to
37e930f
Compare
|
/approve |
Queue out of orderThe changeset has received all authorizations to enter the merge queue, Look into https://devdocs.scality.net/support/faq/#bert-e for guidance about The following options are set: approve |
|
/approve |
…colors The previous approach compared WCAG contrast ratios of textPrimary vs textReverse, which produced wrong results on saturated colors like red where both ratios are near-tied. Switch to a threshold-based approach: if the lighter text candidate meets WCAG AA large-text contrast (3.0), use it; otherwise fall back to the darker candidate.
…mentation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
3f65ee8 to
6546afa
Compare
|
I have successfully merged the changeset of this pull request
Please check the status of the associated issue CUI-3. Goodbye hervedombya. The following options are set: approve |
Problem
Our
getContrastTextutility picks a text color (light or dark) to display on a given background. It was using a pure "best contrast wins" approach — it computed the WCAG contrast ratio for both candidate text colors against the background and returned whichever was higher.This breaks on saturated mid-luminance colors. Some colors have a deceptively low WCAG relative luminance despite appearing visually bright, so the algorithm would pick dark text — which looks wrong and is harder to read in practice. This is a well-known limitation of WCAG luminance calculation with saturated reds and greens.
Solution
Replaced the "highest contrast wins" comparison with a threshold-based approach — the same strategy MUI (Material UI) uses:
This biases toward light text on saturated colors, which matches human visual expectation and is consistent with how most design systems handle this case.