codemirror / codemirror5

In-browser code editor (version 5, legacy)
http://codemirror.net/5/
MIT License
26.78k stars 4.96k forks source link

Duotone Theme Color contrast is not up to WCAG standards for comments #7087

Closed robert-j-webb closed 7 months ago

robert-j-webb commented 7 months ago

First of all, thanks for the work, great project 👏

While using the Duotone themes, I noticed that the comment style was under the WCAG contrast ratio for Dark Mode and Light mode

Chrome Dev Tools contrast ratio tool:

Screenshot 2024-02-28 at 1 13 39 PM

Visible Code:

image

Chrome Dev Tools contrast ratio tool:

Screenshot 2024-02-28 at 1 11 51 PM

Visible Code: image

As you can see, they're quite under what's recommended for accessibility - especially with light mode, you can see just how difficult it is to read here.

I'm not sure if there's a different setup for updating themes, but I found these CSS rules / Colors to be WCAG compliant and somewhat on theme.

Also this functions as a workaround for other users with this issue:

.cm-s-duotone-light span.cm-bracket,
.cm-s-duotone-light span.cm-comment {
  color: #6f6e6a !important;
}

.cm-s-duotone-dark span.cm-bracket,
.cm-s-duotone-dark span.cm-comment {
  color: #a7a5b2 !important;
}

Looks like:

Light:

image

Dark:

image

marijnh commented 7 months ago

Adopted your colors in attached patch.