WordPress.org
Get WordPress

Make WordPress Core

Changeset 48368


Ignore:
Timestamp:
07/07/2020 10:09:23 AM (5 years ago)
Author:
afercia
Message:

Accessibility: Improve color contrast for the blue links :hover state.

For a number of years, WordPress has been using a #00a0d2 blue shade for the links :hover state. This blue shade doesn't have a sufficient color contrast with the various (too many) background colors used in the admin interface.

The new #006799 blue shade is part of the official WordPress color palette and does have a sufficient color contrast with most of the admin backgrounds.

Props ryokuhi, audrasjb, joedolson, mapk.
See #47682.

Location:
trunk/src
Files:
12 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/vendor/thickbox/thickbox.css

    r43309 r48368  
    144144#TB_closeWindowButton:hover .tb-close-icon,
    145145#TB_closeWindowButton:focus .tb-close-icon {
    146     color: #00a0d2;
     146    color: #006799;
    147147}
    148148

  • trunk/src/wp-admin/css/common.css

    r48340 r48368  
    226226a:hover,
    227227a:active {
    228     color: #00a0d2;
     228    color: #006799;
    229229}
    230230
    … …  
    10291029.show-filters .filter-links a.current:hover,
    10301030.show-filters .filter-links a.current:focus {
    1031     color: #00a0d2;
     1031    color: #006799;
    10321032}
    10331033
    … …  
    10921092.wp-filter .drawer-toggle:focus:before {
    10931093    background-color: transparent;
    1094     color: #00a0d2;
     1094    color: #006799;
    10951095}
    10961096
    … …  
    29192919.plugin-details-modal #TB_closeWindowButton:hover,
    29202920.plugin-details-modal #TB_closeWindowButton:focus {
    2921     color: #00a0d2;
     2921    color: #006799;
    29222922    outline: none;
    29232923    box-shadow: none;

  • trunk/src/wp-admin/css/edit.css

    r48340 r48368  
    973973
    974974a.post-format-icon:hover:before {
    975     color: #00a0d2;
     975    color: #006799;
    976976}
    977977

  • trunk/src/wp-admin/css/forms.css

    r48362 r48368  
    143143.wp-core-ui input[type="reset"]:hover,
    144144.wp-core-ui input[type="reset"]:active {
    145     color: #00a0d2;
     145    color: #006799;
    146146}
    147147

  • trunk/src/wp-admin/css/install.css

    r47771 r48368  
    2121a:hover,
    2222a:active {
    23     color: #00a0d2;
     23    color: #006799;
    2424}
    2525

  • trunk/src/wp-admin/css/login.css

    r47813 r48368  
    2828a:hover,
    2929a:active {
    30     color: #00a0d2;
     30    color: #006799;
    3131}
    3232
    … …  
    297297.login #backtoblog a:hover,
    298298.login h1 a:hover {
    299     color: #00a0d2;
     299    color: #006799;
    300300}
    301301

  • trunk/src/wp-admin/css/media.css

    r48265 r48368  
    307307#find-posts-close:hover,
    308308#find-posts-close:focus {
    309     color: #00a0d2;
     309    color: #006799;
    310310}
    311311

  • trunk/src/wp-includes/css/buttons.css

    r48360 r48368  
    206206.wp-core-ui .button-link:hover,
    207207.wp-core-ui .button-link:active {
    208     color: #00a0d2;
     208    color: #006799;
    209209}
    210210

  • trunk/src/wp-includes/css/editor.css

    r46866 r48368  
    8383.mce-window-head .mce-close:hover .mce-i-remove:before,
    8484.mce-window-head .mce-close:focus .mce-i-remove:before {
    85     color: #00a0d2;
     85    color: #006799;
    8686}
    8787
    … …  
    14471447#wp-link-close:hover,
    14481448#wp-link-close:focus {
    1449     color: #00a0d2;
     1449    color: #006799;
    14501450}
    14511451

  • trunk/src/wp-includes/css/jquery-ui-dialog.css

    r46350 r48368  
    308308.ui-button.ui-dialog-titlebar-close:hover,
    309309.ui-button.ui-dialog-titlebar-close:focus {
    310     color: #00a0d2;
     310    color: #006799;
    311311}
    312312

  • trunk/src/wp-includes/css/media-views.css

    r48232 r48368  
    4242.media-frame a:hover,
    4343.media-frame a:active {
    44     color: #00a0d2;
     44    color: #006799;
    4545}
    4646
    … …  
    237237.media-modal-close:hover,
    238238.media-modal-close:active {
    239     color: #00a0d2;
     239    color: #006799;
    240240}
    241241
    242242.media-modal-close:focus {
    243     color: #00a0d2;
     243    color: #006799;
    244244    border-color: #5b9dd9;
    245245    box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
    … …  
    15981598.media-selection .button-link:hover,
    15991599.media-selection .button-link:focus {
    1600     color: #00a0d2;
     1600    color: #006799;
    16011601}
    16021602

  • trunk/src/wp-includes/functions.php

    r48367 r48368  
    34883488        a:hover,
    34893489        a:active {
    3490             color: #00a0d2;
     3490            color: #006799;
    34913491        }
    34923492        a:focus {
Note: See TracChangeset for help on using the changeset viewer.