[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:
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch has-test-info  |     Focuses:  accessibility
-------------------------------------+------------------------------
Changes (by sabernhardt):

 * version:  trunk =>


Comment:

 There are two recent pull requests about this.
 - [https://github.com/WordPress/wordpress-develop/pull/8809 PR 8809]
 assigns a darker color to any `code` or `kbd` element. The `#44464B` gray
 is not in the [https://codepen.io/ryelle/full/WNGVEjw 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 [https://github.com/WordPress
 /wordpress-develop/pull/8653 PR 8653].

 More contrast is usually better, but I think both proposed colors are
 unnecessarily dark inside the `.description` paragraphs. The `#646970`
 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;
 }
 }}}

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