Skip to content

fix: use contrast threshold for saturated background colors#1018

Merged
bert-e merged 2 commits intodevelopment/1.0from
feature/CUI-3-fix-contrast-text-saturated-colors
Mar 3, 2026
Merged

fix: use contrast threshold for saturated background colors#1018
bert-e merged 2 commits intodevelopment/1.0from
feature/CUI-3-fix-contrast-text-saturated-colors

Conversation

@hervedombya
Copy link
Contributor

@hervedombya hervedombya commented Feb 26, 2026

Problem

Our getContrastText utility 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:

  1. Compute the contrast ratio of the lighter text candidate against the background.
  2. If it meets a minimum contrast threshold (3.0 — WCAG AA for large text), use the lighter text.
  3. Otherwise, fall back to the darker text.

This biases toward light text on saturated colors, which matches human visual expectation and is consistent with how most design systems handle this case.

@bert-e
Copy link
Contributor

bert-e commented Feb 26, 2026

Hello hervedombya,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options
name description privileged authored
/after_pull_request Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval Bypass the pull request author's approval
/bypass_build_status Bypass the build and test status
/bypass_commit_size Bypass the check on the size of the changeset TBA
/bypass_incompatible_branch Bypass the check on the source branch prefix
/bypass_jira_check Bypass the Jira issue check
/bypass_peer_approval Bypass the pull request peers' approval
/bypass_leader_approval Bypass the pull request leaders' approval
/approve Instruct Bert-E that the author has approved the pull request. ✍️
/create_pull_requests Allow the creation of integration pull requests.
/create_integration_branches Allow the creation of integration branches.
/no_octopus Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity Change review acceptance criteria from one reviewer at least to all reviewers
/wait Instruct Bert-E not to run until further notice.
Available commands
name description privileged
/help Print Bert-E's manual in the pull request.
/status Print Bert-E's current status in the pull request TBA
/clear Remove all comments from Bert-E from the history TBA
/retry Re-start a fresh build TBA
/build Re-start a fresh build TBA
/force_reset Delete integration branches & pull requests, and restart merge process from the beginning.
/reset Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

@bert-e
Copy link
Contributor

bert-e commented Feb 26, 2026

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

@hervedombya hervedombya force-pushed the feature/CUI-3-fix-contrast-text-saturated-colors branch from fca9d1c to 37e930f Compare February 26, 2026 10:20
@hervedombya
Copy link
Contributor Author

/approve

@bert-e
Copy link
Contributor

bert-e commented Feb 26, 2026

Queue out of order

The changeset has received all authorizations to enter the merge queue,
however the merge queue is currently in an incoherent state. In order
to protect this pull request, I have not added the changeset to the
queue.

Look into https://devdocs.scality.net/support/faq/#bert-e for guidance about
what to do next to unlock the situation, or ask for help on the #ci-support
Slack channel.

The following options are set: approve

@hervedombya
Copy link
Contributor Author

/approve

hervedombya and others added 2 commits March 3, 2026 10:33
…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>
@hervedombya hervedombya force-pushed the feature/CUI-3-fix-contrast-text-saturated-colors branch from 3f65ee8 to 6546afa Compare March 3, 2026 09:33
@bert-e
Copy link
Contributor

bert-e commented Mar 3, 2026

I have successfully merged the changeset of this pull request
into targetted development branches:

  • ✔️ development/1.0

Please check the status of the associated issue CUI-3.

Goodbye hervedombya.

The following options are set: approve

@bert-e bert-e merged commit 6546afa into development/1.0 Mar 3, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants