The feature that generates a demo page is a real time-saver. However, the styling makes the button and the link have very low contrast. The contrast ratio between the white and cyan is just 1.63:1. Depending on screen, environment and visual acuity, it will be hard for some people to see.
The Web Content Accessibility Guidelines (level AA) recommend at least a 3:1 contrast ratio for meaningful graphical elements (i.e. to help people identify the button against its background) and 4.5:1 for text (for the button's label, and the link)—though if the text is considered large this drops to 3:1.
There are some examples of how to improve non-text contrast on W3C's site.
If you're interested, I'd be happy to submit a PR that addresses the contrast issues. Here are two different possibilities...
- Simply use a darker colour than the cyan both for the button's background and link text.
- Use a darker colour for the link text, keep the cyan for the button's background, but use a darker colour for the button's text and add border.
Further, if you try tabbing through the page, the focus indication is very slight too, because it is using the browser's default, and in some browsers this means it's the same light cyan colour, and quite thin, so is also hard to see. (You can use CSS outline-offset
to create a border between the focus outline and the button/link, to make it easier to meet contrast requirements.)