WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#31713 closed defect (bug) (wontfix)

Color contrast ratio in the admin

Reported by: afercia Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.1
Component: Administration Keywords:
Focuses: ui, accessibility Cc:
PR Number:

Description (last modified by rianrietveld)

There's room for improvements for the color contrast ratio in the admin. Overall it's good but there are some places here and there were it's not sufficient, most notably:

  • Primary buttons
  • TinyMCE buttons
  • Login screens (see #31548)
  • orange (for example Comments Approve, Unapprove, Pending)

For a AA level color contrast ratio should be at least 4.5:1.

Please also notice #777 on #fff gives a contrast of 4.48:1 which *substantially* complies with the required 4.5:1.
You may not notice this because some color contrast checkers will round the reported value and will just report the first decimal "4.5:1" but actually it's 4.48:1.
Just mentioning this to let you consider if there are any legal issues that require a *formal* compliance.

A while ago I did a little research checking several colors in the admin and prepared a first draft of a patch. But after the admin color changes in #31234, at this point that patch can only be useful as a list of places to check :) Uploading it anyway as a starting point.

Tracking label: #a11y-color

Attachments (1)

contrast-ratio-draft.patch (18.8 KB) - added by afercia 5 years ago.
useful as list of places to check

Download all attachments as: .zip

Change History (12)

@afercia
5 years ago

useful as list of places to check

#1 @obenland
5 years ago

/cc @hugobaeta

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 years ago

#3 @afercia
5 years ago

Looking at the new colors in #31234, we would need at least two new shades of grey between #464b50 and #82878c:

  • the first one mainly for text on white background (or vice-versa), the threshold is #767676
  • the second one for text on light grey backgrounds (just #f1f1f1 maybe more gray backgrounds?)

both would need the nice touch of @hugobaeta, when you have a chance :)

#4 @afercia
4 years ago

  • Summary changed from Color contast ratio in the admin to Color contrast ratio in the admin

This ticket was mentioned in Slack in #design by afercia. View the logs.


4 years ago

#6 @melchoyce
4 years ago

Could you upload a before/after screenshot? Thanks!

This ticket was mentioned in Slack in #design by afercia. View the logs.


4 years ago

This ticket was mentioned in Slack in #design by hugobaeta. View the logs.


4 years ago

#9 @rianrietveld
4 years ago

  • Description modified (diff)

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


4 years ago

#11 @rianrietveld
4 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Closing this one: this ticket has been split into multiple others labeled #a11y-color

Note: See TracTickets for help on using tickets.