Color Contrast Issues (Corporate UI)

OLLI_S · 2 Nov 2024, 11:03

I checked the color contrast in the Corporate UI of VulnDetect.
For most elements the color contrast is fulfilling the requirements, so here I list only those elements where the color contrast is not sufficient.
I know there is a gap between design (what it looking good and sexy) and the required color contrast. But these requirements are important for all users, not only for users that have visual impairments.

Requirements

All text elements, images containing text and relevant elements without text (e.g. icons) a minimum color contrast ratio of 4.5:1 is required (to fulfil level AA of the WCAG). For content with a font size of at least 18 Point or 14 Point plus bold a color contrast ratio of 3.0:1 is required.
Disabled elements (like disabled toolbar icons or disabled edit fields) are excluded from measurement.

International standards:

ISO 9241-171 - 10.4.5
WCAG 2.0 - 1.4.3

Color Contrast Issues

Breadcrumb Navigation (on top of every page)

2.7:1 at blue links (like "Home")
2.6:1 at title of the current page (like "Dashboard")

Charts in the Dashboard

2.9:1 Green chart
3.8:1 Red chart
2.8:1 Orange chart:
1.5:1 Yellow chart
3.8:1 Blue line: z

Tables

2.5:1 for blue links on grey background
2.7:1 for blue links on white background
1.5:1 for placeholder-text in the search fields
For placeholder texts the color contrast 3.0:1 is sufficient, so use the text color #949494 (HEX) / 148, 148, 148 (RGB)

Buttons

2.4:1 for the button "Export to CSV"
2.7:1 for the button "Move Selected Hosts To New Group"
2.7:1 for the button "Create New Group"
2.7:1 for the button "Edit Selected Group"
2.4:1 for the button "Automate Selected Approvals"
2.7:1 for the button "Approve Version In Selected Approvals"
2.9:1 for the button "Disable Selected Approvals"
2.7:1 for the button "Save"
2.7:1 for the button "Change Password"
2.7:1 for the button "Submit" (in "Support")
2.7:1 for the button "Login"
4.2:1 for the button "Corporate User" in "Login"
4.2:1 for the button "Personal User" in "Login"

Stauts icons

2.1:1 for the green checkmark on grey background (on page "Hosts)
2.4:1 for the white checkmark on green background (on page "Hosts)
1.6:1 for the white exclamation mark on yellow background (on page "Hosts)
2.9:1 for the white exclamation mark on red background (on page "Hosts)

Status Lables

2.9:1 for the status "Insecure"
2,4:1 for the status "OK"

Other Elements

2.6:1 for the version number of the Agent Installed in the Configuration
2.6:1 for the Help Text "Inspections will run at this time..." in the Configuration
2.5:1 for the link "support@secteer.com" in "Support"
2.7:1 for the link "SecTeer VulnDetect Technical Guide" in "Support"
2.6:1 for the placeholder-text in the form fields in "Support"
For placeholder texts the color contrast 3.0:1 is sufficient, so use the text color #8995A7 (HEX) / 137, 149, 167 (RGB)
2.6:1 for the text "Login to your account" at the login page
2.6:1 for the placeholder-text in the form fields in "Login"
For placeholder texts the color contrast 3.0:1 is sufficient, so use the text color #8995A7 (HEX) / 137, 149, 167 (RGB)
2.7:1 for the link "Forgot password?"
2.7:1 for the text "Not Registered?" in "Login"
2.7:1 for the text "Get access to SecTeer VulnDetect" in "Login"
2.7:1 for the text "SecTeer VulnDetect is free for personal use." in "Login"

OLLI_S · 2 Nov 2024, 11:01

Added the color contrast for the white exclamation mark on yellow background (on page "Hosts)

OLLI_S · 2 Nov 2024, 11:01

Added the color contrast for the white exclamation mark on red background (on page "Hosts)

OLLI_S · 11 Feb 2024, 10:46

@Tom In the sidebar you have the High-Contrast Mode.
Is this mode the "solution" for the low color contrast?