Using the Chrome extension
The Stark tools you know and love, right in your browser.
Accessing the extension
Once the extension is installed, you can locate it from the Extensions icon in the top right corner of your Chrome browser.
To easily access Stark, click the pin icon and the extension will remain pinned in your browser bar.
Using the Contrast Checker
Once you open Stark, you'll find the contrast checker front and center. You have two options to choose from: Object Selection Mode, and Eye Dropper.
The extension defaults to the
Object Selection Mode, which allows you to
simply click any element on your site and get its background and foreground
colors checked. When an element is selected, we draw a box around it to indicate
where we're getting the colors from.
For more control over the colors selected, switch to the
Eye Dropper tool by
selecting the eyedropper icon from the upper list.
To compare two colors:
- Click on the eyedropper icon in one of the two color boxes
- Hover over the first color you’d like to compare and click
- Check to see that the desired color appears in the color box
- Repeat process with the other color box
Once both colors have been selected, you can review their contrast ratio and check if they pass WCAG 2.0 standards.
Not a fan of HEX? You can use the dropdown to the right of the mode icons to switch between different color formats.
Using the simulator
To use the Vision Simulator, just click on the simulation you’d like to view and it will be applied to the entire page.
Moving the pop-out
You have complete control of where Stark sits on your page. If you find it’s in the way, just grab the pop-out and move it to another part of the browser window. Want to take a screenshot? Hit the minimize button and Stark will step aside.
If you want to change the default location of where Stark shows when you open it, click on the gear icon in the upper right corner of the pop-out, and then you can choose among four options.
Signing in with your account
Stark accounts ensure you always access the latest and greatest we have to offer. If you’re already using a Stark account in your design software, sign in by going to the gear icon in the upper right corner of the extension’s pop-out.
New to Stark? Make sure to sign up for an account! From Free to PRO, creating a Stark account allows you to gain access to resources, educational material, and new features before the rest of the world knows about them!