Opened 4 years ago

Last modified 4 years ago

#14408 confirmed Bug

Inaccessible "OK" button in dialogs (Moono)

Reported by: Olek Nowodziński Owned by:
Priority: Normal Milestone:
Component: Accessibility Version: 4.0
Keywords: Cc:

Description (last modified by 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

Current colorset

but to meet WCAG 2.0 it must be more like

Required colorset

References

Attachments (2)

Screen Shot 2016-02-16 at 15.56.35.png (30.4 KB) - added by Olek Nowodziński 4 years ago.
Current colorset
Screen Shot 2016-02-16 at 16.04.40.png (22.0 KB) - added by Olek Nowodziński 4 years ago.
Required colorset

Download all attachments as: .zip

Change History (9)

comment:1 Changed 4 years ago by Olek Nowodziński

Summary: Inaccessible "OK" button in dialogsInaccessible "OK" button in dialogs (Moono)

Changed 4 years ago by Olek Nowodziński

Current colorset

Changed 4 years ago by Olek Nowodziński

Required colorset

comment:2 Changed 4 years ago by Olek Nowodziński

Description: modified (diff)

comment:3 Changed 4 years ago by Marek Lewandowski

Status: newconfirmed

comment:4 Changed 4 years ago by 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?

comment:5 in reply to:  4 Changed 4 years ago by 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.

comment:6 Changed 4 years ago by 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

comment:7 Changed 4 years ago by 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

https://c2.staticflickr.com/2/1707/24438311614_96b5ed6bff.jpg

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

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy