WordPress.org

Make WordPress Core

Opened 13 months ago

Closed 11 months ago

Last modified 11 months ago

#44763 closed defect (bug) (fixed)

Custom CSS line number color contrast is too low

Reported by: earnjam Owned by: johnbillion
Milestone: 5.0 Priority: normal
Severity: normal Version: 4.7
Component: Customize Keywords:
Focuses: accessibility Cc:

Description

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.

Attachments (2)

custom-css-line-number-contrast.png (2.5 MB) - added by earnjam 13 months ago.
44763.1.diff (298 bytes) - added by abdullahramzan 13 months ago.

Change History (16)

#1 @earnjam
13 months ago

  • Keywords needs-patch added

#2 @audrasjb
13 months ago

  • Keywords good-first-bug added

#3 @audrasjb
13 months ago

  • Keywords has-screenshots added
  • Milestone changed from Awaiting Review to 4.9.9

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

Last edited 13 months ago by audrasjb (previous) (diff)

#4 @abdullahramzan
13 months ago

  • Keywords has-patch added; needs-patch removed

#5 @audrasjb
13 months ago

@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 :)

#6 @Luminus
12 months ago

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

#7 @johnbillion
12 months ago

  • Owner set to johnbillion
  • Resolution set to fixed
  • Status changed from new to closed

In 43574:

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

Props earnjam, abdullahramzan, audrasjb, Luminus

Fixes #44763

#8 @johnbillion
12 months ago

  • Keywords fixed-major added; good-first-bug has-screenshots has-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

#9 @johnbillion
12 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#10 @pento
11 months ago

  • Keywords fixed-major removed

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

#11 @pento
11 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#12 @SergeyBiryukov
11 months ago

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.

#13 @SergeyBiryukov
11 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#14 @SergeyBiryukov
11 months ago

  • Milestone changed from 4.9.9 to 5.0
Note: See TracTickets for help on using tickets.