Text elements must have sufficient color contrast against the background.

[oussama-taoufiq]

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

---

Screenshot

[dryrunsecurity]

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.

[mtesauro]

Approved

[Maffooch]

The following class would need be updated as well: https://github.com/DefectDojo/django-DefectDojo/blob/85acabd8f7f00e2068bb7bbf89591974dfead6bf/dojo/static/dojo/css/dojo.css#L1357C1-L1360C2

Maybe it is because I have seen the white text for so long, but the black makes this look totally different 😅 @blakeaowens what are your thoughts on this?

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[oussama-taoufiq]

@Maffooch Should I make the changes or wait for @blakeaowens's response?

[Maffooch]

@Maffooch Should I make the changes or wait for @blakeaowens's response?

It would probably be best to wait for @blakeaowens here