Insufficient Color Contrast for `Code` Blocks in Dark Theme

While reading the release notes for 1.4.4, I had trouble reading the text that mentions Open redirect in wp_nonce_ays.

If you are using Dark Theme, let me give you an example:

This is a very long text. You should be able to read a long text. This is only an example.

For those who cannot read the text while using a dark theme, the text is as follows:

This is a very long text. You should be able to read a long text. This is only an example.

I ram Axe on this web page and here are the results:

Elements must have sufficient color contrast

HTML: <code>This is a very long text. You should be able to read a long text. This is only an example.</code>
Issues: Element has insufficient color contrast of 2.16 (foreground color: #dd0033, background color: #3c3c3c, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1

Axe is a very useful tool for testing accessibility issues in websites and I used Axe to see if my website has any accessibility issues and the only issues I have is the “sufficient color contrast” but Axe listed it as “potential issues” and Axe could not determine the color contrast in my website.

This is what Axe looks like when running automated testing in ClassicPress Forums:

And here’s a screenshot of my website that shows Axe as well:

I am hoping that if Discord could fix issues other than color contrast issues, this would be of great help for those who use a screen reader, but manual testing is as important as automated testing of accessibility issues. Of course, I only focus on the issue that deals with color contrast for code text. Perhaps the code text should be consistent with the code block as follows?

This is some text... And testing to see if this code block might have a scrollbar, I wonder if this code block can wrap text to the next line? If not, and the text continues in this line, then it needs to have tabindex='0" so that keyboard users can press the TAB key to focus in the code block and use the arrow key to move left and right.

Yes, I know I should break up text into multiple lines but I just want to test if a keyboard user can focus into the code block using the TAB key.

Update: The <pre> element does not have a tabindex, but the <code> element inside the <pre> block does have overflow set in CSS! Nice! :smile: Not sure if overflow in CSS is the same as tabindex in HTML… Seems like I might want to do some testing of my own. But I digressed. At least the code block has keyboard support, which is great.

Anyway, Axe is available for Firefox, Chrome, and Edge. I hope I can be of help to anyone.

I’ve made a few changes to the dark theme colors, I think it should be OK now. Please check. Don’t forget a hard refresh or clearing your browser cache to pick up updated CSS.

There is insufficient color contrast for the text surround the `text`. I did a hard refresh and no change.

This is what I’m seeing:

I apologize for not providing a screenshot of what I’m referring to.

For discussing issues, I will provide a screenshot of any issues I found in the future.

That’s weird, that’s not what the background color of the code block should be. This is what it is on my end: