Low contrast in generated demo page

[matatk]

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...

1. Simply use a darker colour than the cyan both for the button's background and link text.
2. 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.)

[mrcoles]

@matatk good point! Here’s a start: 9d16e44

Let me know if you think other improvements should be made!

[matatk]

@mrcoles ah, this looks much clearer; great :-).

I'd definitely recommend some explicit focus/hover indication, as opposed to relying on the browser's default (sometimes this is quite low-contrast and easy to miss). I tried the very simple

a:focus, a:hover { outline: 3px solid #33e; outline-offset: 2px; }

and it seems to be quite clear, though it has the disadvantage of not following the rounded borders of the button alas.