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).