Insufficient color contrast in the options menu

[karlgroves]

Insufficient color contrast in the options menu

• Severity: Medium
• Affected Populations:
  • Low-Vision
  • Cognitively
• Platform(s):
  • All / Universal
• Components affected:
  • Tools and Options

Issue description

Shortcut key instructions in the "Visual Editor" and "Keyboard
Shortcuts" items of the Options menu have insufficient color contrast,
below the minimum threshold of 4.5:1 for text:

• "Ctrl+Shift+Alt+M" and "Shift+Alt+H" rendered text: #a0a3a6 (light gray) on #fff (white): 2.5:1

Sufficient color contrast is important for users who have low-vision or
are color-blind, because text with a low contrast ratio may be difficult
or impossible for such users to see.

Issue Code

    /* media all */
    .components-menu-item__shortcut {
        ...
        opacity: 0.5;
        ...
    }

    /* media all */
    :not(:disabled):not([aria-disabled=true]).components-menu-item__button.components-icon-button:focus, :not(:disabled):not([aria-disabled=true]).components-menu-item__button:focus {
        color: #191e23;
        ...
    }

Remediation Guidance

Increase the opacity, or remove the opacity and use a mid-gray color, so
that the text has a minimum contrast ratio of 4.5:1.

Recommended Code

    /* media all */
    .components-menu-item__shortcut {
        ...
        opacity: 1;
        ...
    }

    /* media all */
    :not(:disabled):not([aria-disabled=true]).components-menu-item__button.components-icon-button:focus, :not(:disabled):not([aria-disabled=true]).components-menu-item__button:focus {
        color: #767676;
        ...
    }

Relevant standards

• 1.4.3 Contrast (Minimum) (Level
  AA)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-55 in Tenon's report

[mapk]

I can't find the PR, but it appears that this has been resolved. This is also a duplicate of #10576.

Resolved examples: