#BRIGHTER SCREEN CHROME APP CODE#
#BRIGHTER SCREEN CHROME APP SIMULATOR#

For many of you already using Stark in design software, sign in with your account in the same way you have previously. Stark accounts ensure you always access the latest and greatest we have to offer. Speaking of, if you want to change the default location of where Stark shows when you open it, just head over to the Settings tab and choose among the four options. Want to take a screenshot? Just hit the minimize button and Stark will step aside.

If you find it’s in the way, just grab it and move it out of the way. You have complete control of where Stark sits on your page. Using the simulators is as simple as clicking any of them–they'll be applied to your entire page, meaning you can scroll through it like normal. We've also included the Blurred Vision simulator we added recently to our design tool plugins. We've covered the numbers for those impacted by color blindness, but did you know there are many different types? You'll find all of them here from Protanopia (red-green blindness) to Tritanopia (blue-yellow blindness).

#BRIGHTER SCREEN CHROME APP SIMULATOR#

So, now that we've covered Contrast, it's time to head over to the Simulator tab. Just having proper contrast can mitigate those issues and more. Perhaps they prefer to have their screen brightness as dim as possible (why do you do this, Mom?). Maybe they're looking at your site outside on a bright day or it's loaded up in a store kiosk with a subpar display. You're most likely reading this article indoors on a nice, bright screen, but that's not the case for all of your users. While the ethical imperative of making your site accessible to those affected is argument enough, we'll go one step further and add that addressing contrast issues in this way also improves your site's usability for everyone. No matter what mode you use, the bottom will always clearly spell out whether your color combo passes WCAG 2.0 standards.

#BRIGHTER SCREEN CHROME APP CODE#

Use the dropdown in the top-right to switch between different color formats, such as HEX, RGB, and HSL, allowing you to copy and paste into your code with ease. We understand developers have different preferences for the values used in their code. This mode will be instantly familiar to anyone who's ever used a design tool before–just put the dropper over the color you want to check and click. If, for whatever reason, you need more fine-grained control, click the Dropper. This is by far the quickest way to check your site's contrast ratios. When an element is selected, we draw a box around it to indicate where we're getting the colors from. We've defaulted to the 'Object Selection Mode', which allows you to simply click any element on your site and get its background and foreground colors checked. You have two options to choose from: a quick and easy-to-use one we call Object Selection Mode and the other, which we call the Dropper, allows for more fine-grained control. Once you open the extension, you'll find the contrast checker front and center. Let’s get into what to expect when you hit that download button. So how does Stark for Chrome help with that? We’ve made it ridiculously easy for those developing a site, designing in the browser, or doing QA to ensure the product is meeting accessibility requirements, optimizing for the best outcomes, and ensuring it’s usable for as many individuals as possible. These numbers are simply too large for anyone to ignore. Zoom out to a worldwide scale and look at just those with color blindness and the number sits at approximately 300 million people–yup, getting real close to the population count for the entire United States. It's not just adults either, as it's one of the most consistently cited disabilities among children. Looking at that same demographic, the CDC reports the economic impact is more than $145 billion every year. In the US alone, approximately 12 million people 40 years of age and over have some form of vision impairment. Our talks with numerous teams have shown that development is usually the first place accessibility starts but then is often simultaneously skipped-which is unfortunate since that's typically the last stop your product makes on the ride to your users' screens. We’ve long advocated that accessibility should be baked in at all points in a product's lifecycle and Stark for Chrome is our first entry into the workflow of developers.

Today that changes with the launch of Stark for Chrome. Given the product development process starts with design, Stark’s initial efforts into the world of accessibility have largely been in the design realm. Our tools have given designers a way to kickstart projects, QA projects in flight, and retrofit work that’s already been done.

Our mission has always been to help product design and engineering teams make world-class accessible products by making tools that live right alongside the programs they already use.

Brighter screen chrome app