Colour Contrast Issues (Business Edition)


  • Community Moderator

    I checked the colour contrast in the business version of VulnDetect.
    For most elements the colour contrast is fulfilling the requirements, so here I list only those elements where the colour contrast is not sufficient.
    I know there is a gap between design (what it looking good and sexy) and the required colour 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 colour 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 colour 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

    Colour 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 colour 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 colour 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 colour 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"

  • Community Moderator

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


  • Community Moderator

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