Hacker News Reader

Comment by axelut | Hacker News Reader

Hi guys, here is Alex, one of the creators of this UI Kit. It was built based on the NOW UI made by Invision: https://www.invisionapp.com/now and we released it under MIT License: https://github.com/creativetimofficial/now-ui-kit so you can use it without any issues for commercial projects or personal websites.

If you have any feedback, suggestions or issues please let us know. I would be glad to talk in comments.

Best, Alex

View on HN

It has a lot of potential but as many others have pointed out - usability is not very good. On certain screens you won't even see the placeholders in the text boxes. Heck, even on a Macbook Pro Retina it's hard to see, and those have really good screens. Apart from that, some of it looks pretty good, but there's tons of this kind of stuff out there already.

Thank you for the feedback. We will take it into consideration for the next v1.1.0 update.

For the record, I have such a screen: a Samsung SyncMaster B2030, about 6 years old. Several of Now UI's widgets (form placeholders, disabled input labels, tab labels on white background) are nearly unreadable on this screen.

I actually checked (using [1]) the contrast ratio of some of these widgets, and they work out to very low numbers:

- Form placeholders - #ddd on #fff - contrast ratio 1.4:1

- Labels of disabled checkboxes - #9a9a9a on #fff - ratio 2.8:1

- Tab labels - #b8b8b8 on #fff - 2.0:1

This is far lower than the W3C's recommended minimum ratio of 4.5:1 [2] for text smaller than 24px. And since the font weight is often lower than normal, the perceived contrast ratio is even lower than the figures above suggest. I think the contrast needs major improvements for decent UX.

PS: http://contrastrebellion.com/

[1]: http://leaverou.github.io/contrast-ratio/#%23dddddd-on-white

[2]: https://www.w3.org/TR/WCAG/#visual-audio-contrast

Button contrast.

Quickly and easily, can you say which of these elements is selected?

http://imgur.com/a/BnHXf

That's, to be blunt, horrible contrast.

I like the look and thanks for releasing it. I think the light greys are a little too light, especially on text and inputs. I struggled to see them without straining.

Thank you for the feedback, we will see what we can improve. Most of the rules were followed from the original UI Kit but on web it seems we should do some minor changes.

It looks good, though for a general UI framework I'd definitely recommend ensuring the colour contrast meets at least AA accessibility guidelines.

I'll second this. Since in a lot of places (Canada for example), WCAG 2.0 Level AA is legally required for new commercial websites and apps, you'll be limiting your usefulness by not adhering to this.

Looks very nice - but I agree with the other feedback - text contrast needs to be reworked in some cases, for instance the warning notification. Keep in mind that different devices will have different color qualities that put some text into slightly unreadable territory, particularly smaller text.

Found some errors with the tooltips. Caused by quick mouse-over of the tooltip button before the tooltip has completely faded.

http://i.imgur.com/BcOI0XW.png

Fancy publishing an npm or bower package?

Love it! Great work

Reply on news.ycombinator.com