[wp-trac] [WordPress Trac] #63449: Low color contrast for <code> elements in description text on Settings > General page

[WordPress Trac]

#63449: Low color contrast for <code> elements in description text on Settings >
General page
----------------------------+-----------------------------
 Reporter:  sainathpoojary  |      Owner:  (none)
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:  trunk
 Severity:  normal          |   Keywords:
  Focuses:  accessibility   |
----------------------------+-----------------------------
 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:

 [[Image(https://rioudcpuyg.ufs.sh/f/PL8E4NiPUWyOLkGVv6eKbdmxBDqZFPO905ga2ljtv4iur8Kf)]]

 ===

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63449>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform