Insufficient color contrast on block type buttons

[karlgroves]

Insufficient color contrast on block type buttons

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

Issue description

Three Block type buttons are implemented with very light gray SVG
elements, the contrast ratio of which is below the minimum threshold of
3:1 for interface components:

• #c9d0d5 (ash grey) on #fff (white): 1.6: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

    .editor-inserter-with-shortcuts__block {
        ...
        color: rgba(102,120,134,.35);
    }

#### Remediation Guidance

The SVG elements inherit their `fill` color from parent `<span>`
elements, via `currentColor`.

Therefore the parent color needs to be darkened to meet the 3:1 minimum
contrast ratio. The button border remaining light grey before user
interaction, combined with the even darker hover/focus color plus the
visible tooltip, will ensure that the difference between default and
interacted elements is still clearly visible.

##### Recommended Code

.editor-inserter-with-shortcuts__block {
    ...
    color: rgba(102,120,134,.8);
}

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-89 in Tenon's report

[mapk]

Thanks! It appears this issue is a duplicate of another one already resolved [#12928].

I'm closing this as it's already fixed.

[afercia]

For history, here's the screenshot from the WPCampus full report: