Selected block outline has insufficient color contrast

[karlgroves]

Selected block outline has insufficient color contrast

• Severity: Medium
• Affected Populations:
  • Low-Vision
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Block Editing

Issue description

When the mouse moves over a block, a bright blue outline appears.
However when keyboard focus is in a block or any of that block's
editing controls, the outline is a very light gray, the contrast of
which is below the minimum threshold of 3:1 for interface controls:

• Rendered block border: #e3e5e7 (light gray) on #fff (white): 1.262:1

This makes it more difficult for low-vision users to see which block
they've moved into. If they're using the Arrow keys to move the
cursor, the block toolbar does not immediately appear, and therefore the
only way for users to identify which block they're in is this pale gray
border, and the text cursor.

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

Issue Code

    .editor-block-list__layout .editor-block-list__block.is-selected>.editor-block-list__block-edit::before {
        outline: 1px solid rgba(145,151,162,.25);
    }

Remediation Guidance

Darken the outline color to achieve a minimum contrast ratio of 3:1 relative to the white background.

Recommended Code

    .editor-block-list__layout .editor-block-list__block.is-selected>.editor-block-list__block-edit::before {
        outline: 1px solid #949494;
    }

Relevant standards

1.4.11 Non-text Contrast (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-100 in Tenon's report

[mapk]

Thanks! This has definitely been on our list!
It was resolved recently in #14145.

I'm closing this as it has been fixed in a more recent version of Gutenberg.

Example:

[afercia]

it has been fixed in a more recent version of Gutenberg.

Maybe "fixed" is a bit optimistic :) I'd like to hear @karlgroves opinion on the new selected state indication for the blocks (See GIF above).

[mapk]

Also a duplicate of #12254.

[afercia]

For history, here's the screenshot from the WPCampus full report that relates to a previous implementation:

Lengthy discussions and multiple PRs didn't help to quickly address this issue, see for example the original report in #10559 (closed the reopened), #12254, #11737, #12478, #14095, #13700, #14145, #14197.