Add demo link

[aidantwoods]

Surprisingly, the domain was available. https://www.secureheaders.com/

This makes for a good demo of actually using a couple external JS libraries/fonts/etc... with a CSP too.

Please submit design critiques here 😉

[jens1o]

people with disabilities can't use this website, because the contrast is too poor.

[aidantwoods]

Are you by any chance seeing this version? (Just noticed my experiement with a CSS background texture looks revolting in safari 😢) img_1789

Edit: change to link to avoid huge image :p

[jens1o]

I know people with disabilities, and I'm supporting them and coding with them. The problem in your screenshot is the white-black-texture with the normally black text colo(u)r, but additionally it is the coloring. The red parts are very hard to see with this background.

[aidantwoods]

Here's what the page is actually meant to look like ;p (screencap before was safari version)

I'll make whatever changes necessary to accommodate those who might not be able to read it so well though.

RE the white black texture – it should be really subtle (that was the intent anyway), I'll turn it off completely if it's still no good in this screenshot though.

RE the red text, I can turn off the syntax highlighting on the top box – what colours would you recommend as a replacement. Perhaps if you could recommend two (I'll probably manually style it so that the header name and value are different colours).

Lastly, how is the bottom section? I can make the text bigger/different colours if necessary.

[jens1o]

The color of the first box is okay-ish, but they are things to improve: It worries why only the last-part of the header is styled red or not complete file names(i.e. google analytics link)(same with the blue color).

The color of the second box is quite bad, because the baby-blue color is closely to being recognized as purely white on a white background, if they even can be recognized.

Maybe you can take a look in a theme for your editor/ide with high contrast and check what they use?

[aidantwoods]

Thanks for those suggestions.

It worries why only the last-part of the header is styled red [...]

The strange highlighting was down to the syntax highlighting script I put on the site (mainly for the bottom box) – it couldn't figure out the language in the top box I guess, hence the weirdness. I've now turned that off and styled the top box manually.

I've also slightly darkened the blue colour in the bottom box.

Here's what I've got so far.

I found this website for checking color contrast, I wonder whether you thought its recommendations are good? http://leaverou.github.io/contrast-ratio/

If so, I'll try have a play with some different colour schemes on there later today to try and get something much more readable.

[jens1o]

That's a good checker. Thanks for using these suggestions. :)

[aidantwoods]

I've aimed to score at least 8 on each of the individual background/foreground colour pairs on that site.

Some that I thought were really readable turned out to have very low scores too, e.g.:

So that made for a good learning experience for me!

I've pushed a new version of the site, though you might have to wait a little for the caches to all update. Can you let me know if any foreground colours don't go well together? (as I've only been able to check them individually against the background on that site).

Here's a screencap

[jens1o]

They're quite good, but maybe you can expose the namespace delimiter (\ in hello\world\my\namespace) a little bit more!

[aidantwoods]

How's this instead?

[jens1o]

It's fine from the point of view of readability, but personally, I think it's confusing. Why is the variable same-colored as the classname?

[aidantwoods]

Why is the variable same-colored as the classname?

Heh, not my choice :p can you recommend a better syntax highlighter (using highlight js at present).

[jens1o]

Err... Unfortunately I can't.