Most Prism presets are failing a11y color contrast checks
See original GitHub issueDescribe the bug
Many of the prism themes are failing the color contrast checks that are run by cypress-axe
. Many of the themes are close or are meeting “AA Large” but because of the font size the contrast needs to be a minimum of “AA”.
So far I have checked (and fixed, see https://github.com/system-ui/theme-ui/pull/565):
- Dracula (failed)
- Duotone Dark (failed)
- Duotone Light (failed)
- Github (failed)
- Night Owl (failed)
- Night Owl Light (failed)
- Oceanic Next (passed)
To Reproduce
Run a11y checks on a site using Theme-UI and prism presets.
Expected behavior
Pass all a11y checks.
Screenshots
N/A
Additional context
N/A
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Fixing contrast issues, on your own site and elsewhere
One of them does not have sufficient color contrast and would fail an accessibility audit, and the other would pass.
Read more >A11y - Color Contrast Checker | Figma Community
This plugin checks the color contrast ratio of all visible text in a frame, and it provides feedback on whether it meets WCAG's...
Read more >Text elements must have sufficient color contrast against the ...
Checks all text elements to ensure that the contrast between the foreground text and the background colors meet the WCAG 2 AA contrast...
Read more >Using Contrast Checker + Color Suggestions - Stark plugin
With Stark, you can check the AA and AAA color contrast of your text or shape layers. Stark's Contrast Checker showing a failing...
Read more >accessibility talkback - Cutacut.com
Accessibility issue #3: Insufficient color contrast. ... To activate the TalkBack shortcut, go to Settings > Accessibility and turn on the Volume Key ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
My original PR up above had some fixed versions. It was pretty simple to just use your Colorable tool and tweak the contrast until it met cutoffs. That PR could be reopened and worked on.
There is also this which I found, but haven’t looked into:
https://openbase.io/js/a11y-syntax-highlighting
I don’t think we should wait on 1 based on the comments in the other issue 😕
I think we should fork the existing ones, make them have sufficient color contrast, and promote the forked more accessible ones in the docs. We can still provide the official ones in code, but I don’t think we should promote them in docs.