Hi folks, I just launched a resource that I think you might find useful when designing new websites. It's a Button Contrast Checker, but I think it is a little bit different than other checkers:
- checks all the buttons/links of a page webpage at once
- checks contrast in different states (hover and focus)
- reports non-text contrast (1.4.11) as buttons are user interface components.
- results can be shared with your team
Now, more interesting: the result for the DN website: https://www.aditus.io/button-contrast-checker/www-designernews-co-2019-09-11-at-11-11-23-562
Let me know what you think. Feedback is very welcome :)
Isn't checking for contrast in the browser a little late?
This fells like it should be done at the design stage.
While it should certainly be done at the design stage it's never too late to double check, especially after the development phase.
It's also say it would be quite for analysing a website due for redesign/refresh to validate to a client
That's my thoughts on it anyway, it will save me checking each button/link individually!
I agree with you, though it's never late to re-check. Also, I think this can be perfect for testing against living styleguides.
One thing that already happened to me: designing a component that I thought had enough contrast, but not really knowing where it was going to be used. Let's say I design a blue button with enough text contrast. If the button is used within a blue background, it might not have enough non-text contrast (button background with adjacent color).