Gutenberg: Insufficient color contrast for calendar selected date and Publish button

[karlgroves]

Insufficient color contrast for calendar selected date and Publish button

• Severity: Medium
• Affected Populations:
  
  
  
  • Low-Vision
  
  
  • Cognitively Impaired
  
  
• Platform(s):
  
  
  
  • All / Universal
  
  
• Components affected:
  
  
  
  • Document Panel
  
  
  • Publish and Unpublish
  
  

Issue description

The selected date within the calendar, and the "Publish" button, have
insufficient color contrast, below the minimum threshold of 4.5:1 for
text:

• "Publish" button: #fff (white) on #0085ba (blue): 4.15:1
• Selected date within the calendar: #fff (white) on #0085ba (blue): 4.15: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

    /* selected calendar date */
    .components-datetime__date .CalendarDay__selected {
        background: #0085ba;
    }

    .CalendarDay__selected,
    .CalendarDay__selected:active,
    .CalendarDay__selected:hover {
        ...
        color: #fff;
    }


    /* Publish button */
    .components-button.is-primary {
        background: #0085ba;
         ...
        color: #fff;
    }

Remediation Guidance

Darken the background color to achieve a minimum contrast of 4.5:1.

Recommended Code

    /* selected calendar date */
    .components-datetime__date .CalendarDay__selected {
        background: #006a95;
    }

    .CalendarDay__selected,
    .CalendarDay__selected:active,
    .CalendarDay__selected:hover {
        ...
        color: #fff;
    }

    /* Publish button */
    .components-button.is-primary {
        background: #006a95;
         ...
        color: #fff;
    }

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

[mapk]

Thanks. This appears to be the standard WordPress primary button styles across the board, not just Gutenberg.

Here's the conversation on this in Core Trac. https://core.trac.wordpress.org/ticket/31459

I'd like to get Accessibility Team's input on this. @afercia @LukePettway

Examples of this same button used elsewhere:

w.org header

Download page on w.org

Login page

[afercia]

Publish button (and all the primary blue buttons in WordPress):
Yes, they were previously discussed in https://core.trac.wordpress.org/ticket/31459. In order to not touch the color palette, we opted to add a subtle text-shadow around the white text to increase the perceived contrast. See https://core.trac.wordpress.org/changeset/34948

This technique is explicitly mentioned in https://www.w3.org/TR/WCAG20-TECHS/G18.html. However, it's a compromise and the best option would be to just darken the #0085ba blue. This part should be reported on the core Trac.

Selected date within the calendar
(and all the other controls in Gutenberg that use a #0085ba background without the text-shadow technique) Contrast is insufficient. I'd say it's one more good reason to just darken the #0085ba blue, as the text-shadow technique can be easily overlooked and can be undesirable on some elements.

[mapk]

Just for reference, the selected date within the calendar looks like this:

[melchoyce]

The next color up in our color chart that passes contrast is #307bad, which has a contrast ratio of 4.6:

That would also allow us to remove that text shadow, which would be nice.

[mapk]

Alrighty, as mentioned in the triage slack chat, let's break out the primary button issue into a Core Trac issue and work on the calendar date highlight in Gutenberg.

[sarahmonster]

Note: currently that #307bad isn't available as a colour in Gutenberg's palette of blues:

https://github.com/WordPress/gutenberg/blob/c2c8276ac8e89af8382d5180ffa6a52f7fa3f98e/assets/stylesheets/_colors.scss

We might want to review how blues are being used in an attempt to scale down the number of different shades in use.

[afercia]

Ideally, the WordPress palette and the Gutenberg palette should be unified, in an effort to get the best of both worlds. I don't see great value in keeping two separate sets of colors, especially in terms of maintenance and consistency.

[sarahmonster]

Agreed! I'd really love to see our palette unified and pared down a wee bit.

[afercia]

Glad to hear there's consensus! That's definitely a job for designers. I'd expect from the design team to open a Trac ticket and lead the effort to unify the two palettes 🙂

[afercia]

Note for triage: only one part of this issue should be moved to core Trac. Please keep this issue open.

[afercia]

Note 2: the Publish button was fixed in #15544. The Calendar selected date still needs improvements.

[afercia]

As mentioned in https://github.com/WordPress/gutenberg/issues/15432#issuecomment-489544687 here's the relevant core Trac tickets:

The design of the focus outline on buttons/elements could be improved
https://core.trac.wordpress.org/ticket/34904
With some design proposals from @MichaelArestad

a11y-focus: Standardizing the handling of :focus and :hover
https://core.trac.wordpress.org/ticket/34957

So maybe there's no need to move the first part of this issue to Trac, as there are already tickets about it.

[joyously]

This issue should be closed by removing all opinionated styles from the calendar block. (and all blocks!)
There is text color, background color, padding, width of 100%, link color.

Here is what the block styles produce on the front end:

and here is how my theme styles it without any additional specific styling (I just removed the wp-block-calendar class using Dev Tools):

[tellthemachines]

Current status of this ticket:

• Trac tickets already exist as per @afercia's comment
• Publish button background has been changed to an accessible colour

• Calendar selected date background remains to be changed, but could possibly be addressed as part of #15962.

  As soon as that last item is done, it should be safe to close this issue, or have I missed anything?

[joedolson]

I haven't been able to trace exactly where it changes, but in looking at the current color contrast for the selected date, the color is now rendering as #007cba, which passes contrast tests at 4.57:1 (https://jdlsn.com/color/?type=hex&color=FFFFFF&color2=007cba). I think that means that this issue can now be closed.

[mapk]

I think you're right, @joedolson. Here's a screenshot of the current state.

I'll close it out. Thanks everyone!