Kontrast

Check and adjust web element contrast in real time.

get it

Quickly check and adjust contrast in realtime in your browser to meet the standards of WCAG (Web Content Accessibility Guidelines).

Reviews
Discussion
You need to become a Contributor to join the discussion.
Bagaskara
BagaskaraMaker@bagaskara_gt · Indie Maker 🚀
👋Hey PH, After my post surprisingly got #2nd of the week on Indie Hackers and a handful of positive feedback, I officially launched Kontrast on Product Hunt!! 📖 Story When working with CSS, I used to just apply colors that look good to me. Unfortunately, this is not the best thing to do because I don't pick colors with accessibility in mind. Text and background colors should have sufficient contrast. So, I made a browser extension that could quickly check and adjust color using WCAG 2.0 guidelines for contrast accessibility. 👉 What is WCAG? Web Content Accessibility Guidelines is a standard ensures that your website is accessible by everyone, irrespective of disabilities and age. 👉 Why should we care about contrast? Over 200 million people reported experiencing moderate to severe vision impairment in the world. Many sites developed with contrast accessibility barriers that make it difficult for some people to read. Even Product Hunt isn't all WCAG compliant 😸🙌. Picking WCAG compliant color is a breeze with Kontrast. Features included: ✔ Auto inspect contrast for the selected element ✔ Display accessibility ratio ✔ Automatically get closest WCAG compliant color ✔ Color Slider ✔ RGB and HSL mode ✔ Color picker ✔ Easily copy color (HEX, RGBA, HSLA) ✔ Ignore CSS hover effect ✔ Dark Mode Special thanks to Gary Simon from Coursetro.com for covering my product. This is my first product here. I'm glad that I've finished it. I would love to hear feedback from you all 😄. Thank you!
Nathaniel Blackburn
Nathaniel Blackburn@itsnblackburn · UI Engineer
This is a fantastic extention but would appreciate some transparency that this is in fact a paid extension if you want to benefit from all of it's features (most of which are locked away). While i don't object to the idea of a paid extention when it provides clear value, it would serve you well to clarify the limitations and benefits of upgrading both on the website and in the extention.
Bagaskara
BagaskaraMaker@bagaskara_gt · Indie Maker 🚀
@itsnblackburn Great feedback! I updated the website. Now it should be clear that this is paid extension with a limited feature in the free version. Thank you
Nathaniel Blackburn
Nathaniel Blackburn@itsnblackburn · UI Engineer
@bagaskara_gt Much better, thanks for getting this done so quickily 😃
Frederic Guerra
Frederic Guerra@frederic_guerra
Hello, i buy your extension but i don't manage to use it, i dowload a file with a readme text and i dowoad the app on my smartphone, but where do i copy the licence key? how can i do to use Kontrast? can you explain me please ?
Bagaskara
BagaskaraMaker@bagaskara_gt · Indie Maker 🚀
@frederic_guerra Hi Frederic, Kontrast is a browser extension for Chrome and Firefox. First, you must need to download the free version of the extension in your desktop (Kontrast is not designed for smartphone use). Chrome: Download Link Firefox: Download Link In the extension, click dollar button and verify your license key there. I'm sorry if the instruction in README file isn't clear enough. If there are still any questions just let me know 😀
Nick Fitchpatrick
Nick FitchpatrickMaker@nick_fitch · UX Designer, Freelancer, Coffee Addict
Hi Product Hunt! I am excited to have acquired Kontrast! Thank you @bagaskara_gt for the hard work that was put into this extension thus far. I am excited to build upon the fantistic work you have done. If you are an active user, I would love to hear your feedback! If you haven't downloaded it yet, check out our site at GetKontrast.com!
Bagaskara
BagaskaraMaker@bagaskara_gt · Indie Maker 🚀
@nick_fitch I hope this project will get maintained and improved properly in the future. Best of luck with sales, man!