Inaccessible "OK" button in dialogs (Moono)

[Olek Nowodziński]

Problem

The contrast between the white text and green background is too low to meet WCAG 2.0 AA for small text.

At the moment it looks like

but to meet WCAG 2.0 it must be more like

References

• ​https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast.html
• ​https://github.com/ckeditor/ckeditor5-design/issues/106
• ​http://docs.ckeditor.com/#!/guide/dev_a11y
• ​http://dasplankton.de/ContrastA/ – a nice tool to play with

[Olek Nowodziński]

Current colorset

[Olek Nowodziński]

Required colorset

[Marek Lewandowski]

It looks notably worse. I can say that initial gradient was way too bright.

Since mono skin has gradients all over the place, maybe we could apply slightly more notable gradient?

[Olek Nowodziński]

Replying to m.lewandowski:

It looks notably worse. I can say that initial gradient was way too bright.

Since mono skin has gradients all over the place, maybe we could apply slightly more notable gradient?

Because top color of the button in the 2nd screenshot is the top threshold of AA, you could only make bottom color closer to black and, by doing it, make it even more ominous.

Take a look on ​http://dasplankton.de/ContrastA/ tool. You can click a button to display WCAG 2.0 thresholds in the color selector. You'll notice that there isn't much room for improvement.

[Mike Gifford]

I like this tool as it provides a bunch of contrasts #55830c on #fff:

​http://contrast-finder.tanaguru.com/result.html?foreground=%2355830c&background=%23FFF&isBackgroundTested=false&ratio=4.5&algo=HSV

It also doesn't require Flash wish is an advantage.

Also, gotta watch with the gradient.

This is a good color contrast tool to check that it works with the css gradients ​https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en

[Mike Gifford]

Hmm.. The RGB seems to look fine as does the hex:

​https://leaverou.github.io/contrast-ratio/#%23fff-on-rgb%2885%2C%20131%2C%2012%29%200px%20-1px%200px%3B

But it is still definitely not enough with the CSS gradients.