Custom CSS line number color contrast is too low

[earnjam]

This came up in Gutenberg audit of the Custom HTML block and I couldn't find a core ticket about it.
​https://github.com/WordPress/gutenberg/issues/8736

The color contrast of the line numbers in the Additional CSS control in the Customizer is currently 2.66. We should be above 4.5:1 to meet WCAG AA level.

[audrasjb]

Hello and thanks for your Trac Ticket.

Nice catch.

Indeed, the color contrast is not compliant with AA criteria.

I made some checks/tests:

• this is not only related to the customizer but to every instance of CodeMirror (like theme/plugin editor).
• If we keep current #F7F7F7 for the background color of the gutter, we need at least #666 for line numbers.
• we need to override CodeMirror defaults.
• we need to generate .min.css files, and to edit both LTR and RTL versions.
• the good CSS file to edit is wp-admin/css/code-editor.css.

I guess the following CSS rule should do the job:

.wrap .CodeMirror .CodeMirror-linenumber { color: #666; }

A great good-first-bug for potentially new contributors :)

Cheers,
Jb

[audrasjb]

@abdullahramzan the patch looks good to me, thanks! (but please don't forget we try to leave good-first-bug labelled issues to engage new contributors to learn how to contribute to WordPress Core :)

By the way, thank you for this quick patch :)

[Luminus]

I checked this out at the WordCamp Brighton contributor day and the patch works fine.

[johnbillion]

In 43574:

Customize: Increase the colour contrast of the line numbers in CodeMirror.

Props earnjam, abdullahramzan, audrasjb, Luminus

Fixes #44763

[johnbillion]

In 43575:

Customize: Increase the colour contrast of the line numbers in CodeMirror.

Props earnjam, abdullahramzan, audrasjb, Luminus

Fixes #44763

Merges [43574] to the 4.9 branch.

[pento]

[43574] needs to be merged into the 5.0 branch, and [43575] needs to be reverted from the 4.9 branch.

[SergeyBiryukov]

In 43699:

Customize: Revert [43575] from the 4.9 branch.

This change is out of the 4.9.x scope, and will be reintroduced in 5.0.x.

See #44763.

[SergeyBiryukov]

In 43700:

Customize: Increase the colour contrast of the line numbers in CodeMirror.

Props earnjam, abdullahramzan, audrasjb, Luminus.
Merges [43574] to the 5.0 branch.
Fixes #44763.