WordPress.org
Get WordPress

Make WordPress Core

Changeset 62454


Ignore:
Timestamp:
06/03/2026 09:40:38 AM (2 days ago)
Author:
youknowriad
Message:

Administration: Improve admin color scheme contrast for the editor chrome.

Update the core admin color schemes so their sidebar and primary button colors
work well when the block editor and Site Editor apply the user's admin color
scheme to the editor chrome. The chrome background is generated from a seed
through the WPDS ramp algorithm, which only emits surface colors within
specific luminance bands and cannot reproduce arbitrary colors, so several
schemes could never match.

Adjust the Blue, Coffee, Ectoplasm, Light, Midnight, Ocean, and Sunrise schemes
to bring sidebar and primary button text contrast to WCAG 2.x AA (4.5:1), keep
each scheme's character, and reduce the number of distinct colors per scheme by
reusing the selected menu item's background for the primary button (except for
Light).

Props fushar, simison, youknowriad, joen.
Fixes #65382.

Location:
trunk/src
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/colors/blue/colors.scss

    r59656 r62454  
    1 $highlight-color: #096484;
     1$highlight-color: #437aa8;
    22
    33@use "../_admin.scss" with (
    44    $scheme-name: "blue",
    5     $base-color: #52accc,
     5    $base-color: #245278,
    66    $icon-color: #e5f8ff,
    77    $highlight-color: $highlight-color,
    88    $notification-color: #e1a948,
    9     $button-color: #e1a948,
    10 
     9    $menu-highlight-text: #fff,
     10    $menu-highlight-icon: #fff,
     11    $menu-bubble-text: #1e1e1e,
    1112    $menu-submenu-text: #e2ecf1,
    1213    $menu-submenu-focus-text: #fff,
    13     $menu-submenu-background: #4796b3,
    1414
    1515    $dashboard-icon-background: $highlight-color

  • trunk/src/wp-admin/css/colors/coffee/colors.scss

    r59656 r62454  
    1 $base-color: #59524c;
     1$base-color: #5c4c40;
    22
    33@use "../_admin.scss" with (
    44    $scheme-name: "coffee",
    55    $base-color: $base-color,
    6     $highlight-color: #c7a589,
     6    $highlight-color: #916745,
    77    $notification-color: #9ea476,
     8    $menu-highlight-text: #fff,
     9    $menu-highlight-icon: #fff,
     10    $menu-bubble-text: #1e1e1e,
     11    $menu-submenu-focus-text: #fff,
    812    $form-checked: $base-color,
    9 
    10     $low-contrast-theme: "true"
    1113);

  • trunk/src/wp-admin/css/colors/ectoplasm/colors.scss

    r59656 r62454  
    1 $base-color: #523f6d;
     1$base-color: #4a3369;
    22
    33@use "../_admin.scss" with (
    … …  
    55    $base-color: $base-color,
    66    $icon-color: #ece6f6,
    7     $highlight-color: #a3b745,
     7    $highlight-color: #646c3e,
    88    $notification-color: #d46f15,
     9    $menu-highlight-text: #fff,
     10    $menu-highlight-icon: #fff,
     11    $menu-bubble-text: #1e1e1e,
     12    $menu-submenu-focus-text: #fff,
    913
    1014    $form-checked: $base-color,

  • trunk/src/wp-admin/css/colors/light/colors.scss

    r59656 r62454  
    11@use "sass:color";
    22
    3 $highlight-color: #04a4cc;
     3$highlight-color: #007cba;
    44$text-color: #333;
    55$menu-avatar-frame: #aaa;
    … …  
    88    $scheme-name: "light",
    99    $base-color: #e5e5e5,
    10     $icon-color: #999,
     10    $icon-color: #6a6a6a,
    1111    $text-color: $text-color,
    1212    $highlight-color: $highlight-color,
    13     $notification-color: #d64e07,
     13    $notification-color: #c64606,
    1414
    1515    $body-background: #f5f5f5,
    1616
    1717    $menu-highlight-text: #fff,
    18     $menu-highlight-icon: #ccc,
    19     $menu-highlight-background: #888,
     18    $menu-highlight-icon: #fff,
     19    $menu-highlight-background: #6e6e6e,
    2020
    2121    $menu-bubble-text: #fff,

  • trunk/src/wp-admin/css/colors/midnight/colors.scss

    r59656 r62454  
    11@use "sass:color";
    22
    3 $base-color: #363b3f;
    4 $highlight-color: #e14d43;
     3$base-color: #333c42;
     4$highlight-color: #cf4339;
    55$notification-color: #69a8bb;
    66
    … …  
    1010    $highlight-color: $highlight-color,
    1111    $notification-color: $notification-color,
     12    $menu-highlight-text: #fff,
     13    $menu-highlight-icon: #fff,
     14    $menu-bubble-text: #1e1e1e,
     15    $menu-submenu-focus-text: #fff,
    1216
    1317    $dashboard-accent-2: color.mix($base-color, $notification-color, 90%),

  • trunk/src/wp-admin/css/colors/ocean/colors.scss

    r59656 r62454  
    1 $base-color: #738e96;
     1$base-color: #39535a;
    22
    33@use "../_admin.scss" with (
    … …  
    55    $base-color: $base-color,
    66    $icon-color: #f2fcff,
    7     $highlight-color: #9ebaa0,
     7    $highlight-color: #567958,
    88    $notification-color: #aa9d88,
     9    $menu-highlight-text: #fff,
     10    $menu-highlight-icon: #fff,
     11    $menu-bubble-text: #1e1e1e,
     12    $menu-submenu-focus-text: #fff,
    913    $form-checked: $base-color,
    10 
    11     $low-contrast-theme: "true"
    1214);

  • trunk/src/wp-admin/css/colors/sunrise/colors.scss

    r59656 r62454  
    1 @use "sass:color";
    2 
    3 $highlight-color: #dd823b;
    4 
    51@use "../_admin.scss" with (
    62  $scheme-name: "sunrise",
    7   $base-color: #cf4944,
    8   $highlight-color: $highlight-color,
     3  $base-color: #8a312d,
     4  $highlight-color: #ad631e,
    95  $notification-color: #ccaf0b,
    10   $menu-submenu-focus-text: color.adjust($highlight-color, $lightness: 35%)
     6  $menu-highlight-text: #fff,
     7  $menu-highlight-icon: #fff,
     8  $menu-bubble-text: #1e1e1e,
     9  $menu-submenu-focus-text: #fff
    1110);

  • trunk/src/wp-includes/general-template.php

    r62368 r62454  
    49424942        _x( 'Light', 'admin color scheme' ),
    49434943        admin_url( "css/colors/light/colors$suffix.css" ),
    4944         array( '#e5e5e5', '#999', '#d64e07', '#04a4cc' ),
     4944        array( '#e5e5e5', '#6a6a6a', '#c64606', '#007cba' ),
    49454945        array(
    49464946            'base'    => '#999',
    … …  
    49544954        _x( 'Blue', 'admin color scheme' ),
    49554955        admin_url( "css/colors/blue/colors$suffix.css" ),
    4956         array( '#096484', '#4796b3', '#52accc', '#74B6CE' ),
     4956        array( '#183751', '#245278', '#437aa8', '#e1a948' ),
    49574957        array(
    49584958            'base'    => '#e5f8ff',
    … …  
    49664966        _x( 'Midnight', 'admin color scheme' ),
    49674967        admin_url( "css/colors/midnight/colors$suffix.css" ),
    4968         array( '#25282b', '#363b3f', '#69a8bb', '#e14d43' ),
     4968        array( '#232a2e', '#333c42', '#69a8bb', '#cf4339' ),
    49694969        array(
    49704970            'base'    => '#f1f2f3',
    … …  
    49784978        _x( 'Sunrise', 'admin color scheme' ),
    49794979        admin_url( "css/colors/sunrise/colors$suffix.css" ),
    4980         array( '#b43c38', '#cf4944', '#dd823b', '#ccaf0b' ),
     4980        array( '#6f2724', '#8a312d', '#ad631e', '#ccaf0b' ),
    49814981        array(
    49824982            'base'    => '#f3f1f1',
    … …  
    49904990        _x( 'Ectoplasm', 'admin color scheme' ),
    49914991        admin_url( "css/colors/ectoplasm/colors$suffix.css" ),
    4992         array( '#413256', '#523f6d', '#a3b745', '#d46f15' ),
     4992        array( '#392751', '#4a3369', '#646c3e', '#d46f15' ),
    49934993        array(
    49944994            'base'    => '#ece6f6',
    … …  
    50025002        _x( 'Ocean', 'admin color scheme' ),
    50035003        admin_url( "css/colors/ocean/colors$suffix.css" ),
    5004         array( '#627c83', '#738e96', '#9ebaa0', '#aa9d88' ),
     5004        array( '#2b3f44', '#39535a', '#567958', '#aa9d88' ),
    50055005        array(
    50065006            'base'    => '#f2fcff',
    … …  
    50145014        _x( 'Coffee', 'admin color scheme' ),
    50155015        admin_url( "css/colors/coffee/colors$suffix.css" ),
    5016         array( '#46403c', '#59524c', '#c7a589', '#9ea476' ),
     5016        array( '#382e27', '#5c4c40', '#916745', '#9ea476' ),
    50175017        array(
    50185018            'base'    => '#f3f2f1',
Note: See TracChangeset for help on using the changeset viewer.