Uplink Admin Menu Manager lets you create a consistent color system for the WordPress admin menu while keeping text and controls readable.
This guide explains what each color setting changes, how the live preview works, why some changes may not appear immediately, and how the built-in WCAG contrast checks affect saving.
[Video Coming Soon]
How the color system works
The plugin uses two levels of appearance settings:
- The Appearance tab establishes global colors for the admin menu and menu groups.
- Individual menu items and groups can override those global colors.
An individual override always takes precedence over the corresponding global setting. If a group or menu item does not respond to a global color change, check its settings under Menus and groups.
A blank individual color field means the item inherits the global value. A field containing a color is an override.
Previewing changes
Changes made on the Appearance tab appear immediately in the WordPress admin menu on the left side of the screen. This lets you test colors before saving them.
Some changes only appear when the related menu state is visible:
- Hover colors appear when you point to an item.
- Focus colors appear when you navigate with the keyboard.
- Submenu colors appear after you open a menu with submenu items.
- Open group colors appear when you expand a group.
- Collapsed group colors appear when a group is closed.
- Current colors appear on the menu item associated with the page you are viewing.
The preview is temporary until you select Save appearance. WordPress will warn you if you try to leave the page with unsaved changes.
Admin menu colors
The Admin menu colors section controls the main WordPress menu and plugin submenus.
Menu background
This is the base background color of the WordPress admin menu.
It appears behind ordinary top-level items and in the space surrounding groups.
Menu text
This controls the labels of ordinary top-level menu items, such as Pages, Plugins, Users, and Settings.
The same text color is also used when a top-level item is current or hovered. Because of this, it must remain readable against both the menu background and the current and hover background.
Menu icons
This controls icons beside top-level menu items.
It works with standard WordPress Dashicons and plugin icons that the Menu Manager can convert into a color mask. Some third-party plugins use images or hard-coded icon styles that cannot be recolored.
Like Menu text, this color must work against both the normal menu background and the current and hover background.
Menu current and hover
This controls the background of:
- The current top-level menu item
- A top-level item being hovered
- A top-level item whose submenu is open
This setting changes the background only. The highlighted item continues to use the Menu text and Menu icons colors.
Plugin submenu background
This controls the background of submenu panels belonging to WordPress and third-party plugin menu items.
It applies to expanded submenus inside the menu and flyout submenus that appear beside it.
Plugin submenu text
This controls the normal text color of links inside plugin submenus.
Open a menu with several submenu links to preview it.
Plugin submenu hover and focus background
This controls the background of a submenu row when it is:
- Hovered with a pointer
- Focused with the keyboard
- Active or current
Plugin submenu hover and focus text
This controls the text color shown over the submenu hover and focus background.
Test this combination by hovering over a submenu item and then navigating through the submenu with the keyboard.
Divider color
This controls the thin lines used to separate menu links.
Choose a contrasting color temporarily if you need to identify which dividers the setting affects.
Divider opacity
This controls how strongly the divider color appears.
A low value creates subtle separation. Setting the opacity to zero hides the dividers.
Group color defaults
The Group color defaults section controls the groups created through Menu Manager.
These values apply to every group unless a group has its own color override.
Open group heading colors
These settings control a group while it is expanded.
Background
The background of the expanded group heading.
Text and icon
The group title, group icon, pin control, and open or close indicator.
Border
The border around the group heading.
A group must also have Show heading border enabled in its individual settings before this color becomes visible.
Hover background
The background of an expanded group heading while it is hovered.
Hover text and icon
The title and icons shown while the expanded heading is hovered.
Collapsed group heading colors
These settings control a group while it is closed.
Background
The background of the collapsed group heading.
Text and icon
The group title and icons while the group is collapsed.
Hover background
The background of a collapsed group heading while it is hovered.
Hover text and icon
The title and icons shown while the collapsed heading is hovered.
Item panel colors
The item panel is the area containing top-level menu items inside an expanded group.
Background
The normal background of grouped menu rows.
Text and icon
The normal labels and icons of menu items inside the group.
Border
The edge around the item panel.
The group must have Show item panel border enabled before this color becomes visible.
Hover and active background
The background of a grouped menu row when it is hovered, focused, opened, or current.
Hover and active text and icon
The label and icon color used for those highlighted grouped rows.
Nested submenu links do not use the Item panel palette. They use the global Plugin submenu colors unless the parent menu item has its own submenu overrides.
Overriding one menu item
Open Menus and groups, then expand a top-level menu item to find its appearance settings.
An individual menu item can override:
- Top-level background
- Top-level text and icon
- Submenu background
- Submenu text
- Submenu hover and active background
- Submenu hover and active text
Submenu controls only appear for items that have a submenu.
Leave an individual color field blank when you want the item to inherit the Appearance default. Add a value only when that item needs to look different.
Overriding one group
Each group can override the global group colors, including:
- Open heading background
- Open heading text and icon
- Open heading hover colors
- Collapsed heading background
- Collapsed heading text and icon
- Collapsed heading hover colors
- Heading border
- Item panel background
- Item panel text and icon
- Item panel hover colors
- Item panel border
Groups also have separate controls for showing or hiding the heading and item panel borders.
As with menu items, blank fields inherit the global Group color defaults.
Understanding the contrast checks
The plugin checks important color combinations before allowing them to be saved. These checks help prevent unreadable menus.
The plugin targets WCAG AA:
- Normal text needs a contrast ratio of at least 4.5:1.
- Interface icons and meaningful boundaries generally need at least 3:1.
- The group Text and icon combinations use the stricter 4.5:1 text requirement.
The ratio is written as 4.5:1. It is not a pixel measurement.
WCAG AAA requires 7:1 for normal text, but AAA is not required to save these settings.
Why one color can affect several checks
The Menu text color appears over both the normal menu background and the current and hover background. It must pass against both.
The Menu icons color is tested the same way.
For example, white text may pass against a dark menu background but fail if the current and hover background is changed to a pale blue. You can fix the failure by darkening the highlight or choosing darker text.
Reading the contrast results
Each result shows:
- The color combination being tested
- Its calculated contrast ratio
- A Pass or Needs attention status
- A bar that gives a visual indication of the result
Use the numerical ratio and status label as the final result. The bar is a quick visual reference.
Required text and icon failures prevent saving. A border marked Review is advisory and does not block the save.
Why a color change may not appear
If a change does not appear in the preview, check the following:
- Make sure the relevant state is visible. Hover, focus, expand, or collapse the item as needed.
- Check whether the menu item or group has an individual override.
- Confirm that you are editing the correct type of color. Grouped rows and plugin submenus use different settings.
- Test icon changes on a standard WordPress Dashicon. Some third-party icons have hard-coded colors.
- Save the Appearance settings before checking the result on another page.
- Refresh the page after saving if cached styles appear to remain.
The most common cause is an individual override. Clear that field under Menus and groups to return the item to the global Appearance value.
Resetting the appearance
Use Reset appearance when you want to return to the supplied color and spacing defaults.
The reset removes stored individual appearance overrides so menu items and groups can inherit the global defaults again. It does not reset the menu structure, group organization, user access, or profile assignments.
After resetting, review the preview and save the Appearance settings to confirm the new configuration.
Leave a Reply