Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text elements must have sufficient color contrast against the background. #11689

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from

Conversation

oussama-taoufiq
Copy link

Error Title
Text elements must have sufficient color contrast against the background
Error Severity
Serious
Status
Fail
Accessibility Issue
[Description of issue] The 2 instance of Colour contrast as shown in the screenshots : The visual presentation of text and images of text does not have a contrast ratio of at least 4.5:1

Impact on users

  • People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.

[Pattern] Throughout the application dashboard.
[Steps to reproduce]
With the application called Colour Contrast Analyser, select the foreground colour and the background colour of the 2 mentioned in the screenshot and check the contrast ratio

Remediation
[Recommendation] Please have the contrast ratio of the 2 instance and across the site of at least 4.5:1

[Additional Resources]
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

Screenshot
image


Screenshot
image

oussama-taoufiq and others added 3 commits December 27, 2024 10:56
"I forgot my password" and "I forgot my username" are links without underline and its not visually evident without color vision.
Adjust the color contrast of the text with its background for the element a in the ul.breadcrumb.main and for the element h3 in the .panel-heading.
@github-actions github-actions bot added the ui label Jan 29, 2025
Copy link

dryrunsecurity bot commented Jan 29, 2025

DryRun Security Summary

The pull request involves CSS styling updates in the Dojo application's dojo.css file, primarily changing colors and background colors for various UI elements like breadcrumbs, panel headings, and badges, with no apparent security implications.

Expand for full summary

Summary:

The code changes in this pull request appear to be focused on updating the CSS styles for various elements in the Dojo application. The changes include modifying the colors and background colors of elements such as breadcrumbs, panel headings, and badges. From an application security perspective, these changes are primarily related to the visual styling of the application and do not appear to introduce any security vulnerabilities. However, it is always important to review any code changes, even if they are just CSS updates, to ensure that they do not introduce any unintended consequences or security issues.

Files Changed:

  • dojo/static/dojo/css/dojo.css: This file has been updated with several changes to the CSS styles:
    • The color of the .breadcrumb a.active element is changed from #777 to #546474.
    • The color of the .panel-default > .panel-heading element is changed from white to #252525.
    • The background color of the .panel-default > .panel-heading element is changed from white to rgba(32, 166, 216, 0.75).
    • The border color of the .panel-default > .panel-heading element is changed from #A1C0D7 to #A1C0D7.
    • The color of the .badge.badge-count element is changed from #d9534f to #d9534f.
    • The color of the .badge.badge-count.badge-count0 element is changed from #5cb85c to #5cb85c.
    • The color of the .breadcrumb a.active element is changed from #546474 to #546474.

Code Analysis

We ran 9 analyzers against 1 file and 0 analyzers had findings. 9 analyzers had no findings.

View PR in the DryRun Dashboard.

Text elements must have sufficient color contrast against the background.
Copy link
Contributor

@mtesauro mtesauro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants