Low color contrast for <code> elements in description text on Settings > General page

[sainathpoojary]

On the Settings > General admin page, there is a descriptive paragraph about the Site Icon that includes an inline <code> element:

The Site Icon is what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. It should be square and at least <code>512 by 512</code> pixels.

The <code> element is styled with a semi-transparent light gray background rgba(0, 0, 0, 0.07) and inherits its text color #646970 from the parent paragraph.

This combination results in insufficient color contrast between the text and background, failing WCAG 2.1 AA and AAA contrast requirements. The issue is detected by tools like Lighthouse and WebAIM.

This is because there is a fixed background property set for the <code> block but no color property is defined, which results in inheriting the parent text color, potentially leading to unpredictable and inaccessible color contrast depending on the context.

Steps to Reproduce

1. Go to Settings > General in a fresh WordPress install.
2. Run a Lighthouse accessibility audit.

Screenshots:

This PR fixes a low color contrast issue for <code> and <kbd> elements in the WordPress admin by setting a default text color #44464B to ensure compliance with WCAG 2.1 standards. Previously, these elements had a fixed light background but inherited text color, which in some contexts (e.g., the Site Icon description on the General Settings page) led to insufficient contrast flagged by accessibility tools like Lighthouse and WebAIM.

Trac ticket: #63449

[pmbaldha]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8809

Environment

• WordPress: 6.9-alpha-20250515.062152
• PHP: 8.2.10-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Supplemental Artifacts

​https://ibb.co/7NgkJ90d

[sabernhardt]

#63236 was marked as a duplicate.

[sabernhardt]

There are two recent pull requests about this.

• ​PR 8809 assigns a darker color to any code or kbd element. The #44464B gray is not in the ​admin color palette. That color would also make code elements lighter on the Permalinks Settings page, where they currently match the #3c434a color for body text.
• @dilipbheda assigned a darker #3c434a text color to p.description code, which is more restrictive, in ​PR 8653.

More contrast is usually better, but I think both proposed colors are unnecessarily dark inside the .description paragraphs. The #646970 paragraph text has a ratio of 4.86:1 against the #f0f0f1 gray body background. The next-darkest gray is #50575e, which would give the site icon dimensions a 5.50:1 ratio (slightly higher than the surrounding paragraph text, but not as drastic as 7.53:1 with #3c434a or 7.09:1 with #44464B).

As much as I do not want the body background changed to white (see ticket #62831), that technically would solve the issue without requiring additional CSS on this ticket. It would increase the contrast for code elements in .description paragraphs from an insufficient 4.15:1 to a passing ratio of 4.72:1.

Increasing the paragraphs' color contrast is another possibility:

p.description,
.form-wrap p {
	margin: 2px 0 5px;
	color: #50575e;
}

[sabernhardt]

[57713] switched a strong tag to code for the site icon dimensions, though any code element in a .description paragraph could have had insufficient contrast earlier than that (and [50025] decreased it from 4.35 to 4.15).

[joedolson]

I'm inclined to broaden the version for this, since while the specific instance of this only exists since 6.5, the situation that causes it dates back significantly further; any usage of code in an admin page would trigger it, and there are likely other cases.

Given that there is no certainty that the change to a white background will happen, I think this is something that should just be fixed. If the background color is changed to white, there will be a host of additional color changes that will need to follow, and this can be re-addressed at that time.

I agree with #50575e as a good color option. It's a subtle change that fixes the problem without any extreme changes.

[sainathpoojary]

I have updated the PR to include color #50575e for code elements in .description paragraphs. This improves contrast and passes Lighthouse accessibility checks.

[joedolson]

In 60481:

Administration: Fix color contrast code in .description.

Fix a color contrast failure by changing the color of code elements inside form description fields to #50575e.

Props sainathpoojary, pmbaldha, sabernhardt, joedolson.
Fixes #63449.

Thanks for the PR! This was merged in r60481.