Luminosity contrast ratio of '--rz-secondary' text with its background does not meet the minimum contrast ratio of 4.5:1 in Windows. #1579

Closed
opened 2026-01-29 17:55:37 +00:00 by claunia · 2 comments
Owner

Originally created by @msftedad on GitHub (Jan 24, 2025).

Describe the bug
Luminosity contrast ratio of '--rz-secondary' text with its background does not meet the minimum contrast ratio of 4.5:1 in Windows. The low contrast ratio between the '--rz-secondary' text and its background in Windows can greatly impact users with visual impairments. This issue makes it challenging for them to read the text, which can result in missed information and a diminished user experience.

To Reproduce
Steps to reproduce the behavior:

  1. Open URL: Blazor Color Utilities | Free UI Components by Radzen in the latest edge browser.
  2. Navigate to '--rz-secondary' content in theme colors section.
  3. Turn on the accessibility insights for windows tool.
  4. Select Foreground color (#FFFFFF) and Background color (#E91E63) of 'Search' and 'more options' icon using color picker.
  5. Verify whether contrast ratio between '--rz-secondary' text with its background does meet the minimum contrast ratio or not.

Alternatively link your repo with a sample project that can be run.
https://blazor.radzen.com/colors?theme=material

Expected behavior
Contrast ratio between '--rz-secondary' text with its background should be greater than or equal to the required ratio of 4.5:1 in Windows.

Screenshots
If applicable, add screenshots to help explain your problem.

https://github.com/user-attachments/assets/88fe1551-d194-4a0c-8fe2-7af3086b74cc

Desktop (please complete the following information):
OS: Windows 11 Enterprise Insider Preview Version 24H2(OS Build 26120.2415)
Browser: Microsoft Edge Version 132.0.2957.26

Additional context
NA

Originally created by @msftedad on GitHub (Jan 24, 2025). <!-- IMPORTANT: Read this first!!! 1. If you own a Radzen Professional or Еnterprise subscription you can report your issue or ask us a question via email at info@radzen.com. Radzen staff will reply within 24 hours (Professional) or 16 hours (Enterprise) 2. The Radzen staff guarantees a response to issues in this repo only to paid subscribers. 3. If you have a HOW TO question start a new forum thread in the Radzen Community forum: https://forum.radzen.com. Radzen staff will close issues that are HOWTO questions. 4. Please adhere to the issue template. Specify all the steps required to reproduce the issue or link a project which reproduces it easily (without requiring extra steps such as restoring a database). --> **Describe the bug** Luminosity contrast ratio of '--rz-secondary' text with its background does not meet the minimum contrast ratio of 4.5:1 in Windows. The low contrast ratio between the '--rz-secondary' text and its background in Windows can greatly impact users with visual impairments. This issue makes it challenging for them to read the text, which can result in missed information and a diminished user experience. **To Reproduce** Steps to reproduce the behavior: 1. Open URL: [Blazor Color Utilities | Free UI Components by Radzen](https://blazor.radzen.com/colors?theme=material) in the latest edge browser. 2. Navigate to '--rz-secondary' content in theme colors section. 3. Turn on the accessibility insights for windows tool. 4. Select Foreground color (#FFFFFF) and Background color (#E91E63) of 'Search' and 'more options' icon using color picker. 5. Verify whether contrast ratio between '--rz-secondary' text with its background does meet the minimum contrast ratio or not. Alternatively link your repo with a sample project that can be run. https://blazor.radzen.com/colors?theme=material **Expected behavior** Contrast ratio between '--rz-secondary' text with its background should be greater than or equal to the required ratio of 4.5:1 in Windows. **Screenshots** If applicable, add screenshots to help explain your problem. https://github.com/user-attachments/assets/88fe1551-d194-4a0c-8fe2-7af3086b74cc **Desktop (please complete the following information):** OS: Windows 11 Enterprise Insider Preview Version 24H2(OS Build 26120.2415) Browser: Microsoft Edge Version 132.0.2957.26 **Additional context** NA
Author
Owner

@msftedad commented on GitHub (Jun 23, 2025):

Hi @yordanov, Issue is still repro'ing at our end. Could you please reactivate this issue?

@msftedad commented on GitHub (Jun 23, 2025): Hi @yordanov, Issue is still repro'ing at our end. Could you please reactivate this issue?
Author
Owner

@yordanov commented on GitHub (Jun 25, 2025):

Hi @msftedad,

The contrast ratio between --rz-secondary color and background color is 4.54:1 covering the WCAG AA requirements.

Image

Please share if there’s anything else you think should be modified.

@yordanov commented on GitHub (Jun 25, 2025): Hi @msftedad, The contrast ratio between --rz-secondary color and background color is 4.54:1 covering the WCAG AA requirements. <img width="729" alt="Image" src="https://github.com/user-attachments/assets/420c3b9e-d0cb-4c73-9508-c8b043e5376d" /> Please share if there’s anything else you think should be modified.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1579