Drag the button below to your bookmarks bar. Click it on any webpage to launch the tool.
How to Use:
- Install: Drag the blue button above to your browser's bookmarks bar.
- Launch: Go to any webpage and click the "Spyglass Contrast Checker" bookmark.
- Element Picker: Use the "Resting/Hover" toggle to choose a state *before* activating the picker, then click an element to auto-populate its colors.
- Target Toggle: Use the Target Toggle in the Tweak Panel to switch between checking for Standard text (4.5:1) or Large text (3:1).
- Review & Adjust: Check the contrast ratio. If it fails, click the suggestion to apply an accessible color, then use the Tweak panel to fine-tune hue and lightness.
- Advanced Features: The Serial Picker (pixel-level) and Overlay Picker (gradients/images) are available in our Chrome Extension.
Bookmarklet Code:
For manual installation, create a new bookmark and paste the following code into the URL field.
Color Contrast Playground
Good Contrast Examples
White text (#FFFFFF) on a dark gray background (#1F2937) is highly readable.
Dark blue text on a light gray background can be effective.
Semi-transparent white on black (5.32:1 contrast).
Bad Contrast Examples
Dark yellow text on a light yellow background is a common design mistake.
When made just a little darker, larger, and bold, it can pass, though.
Even at a slightly larger text size of 19px, the contrast of this text is a little too low to be easily legible, but notice how for this bolded link, it's finally acceptable.
Buttons often lack sufficient contrast. The left is 2.5:1, the right is 5.6:1.
Mid-tonal colors like this are particularly tricky, but it's important to make sure they have enough contrast, too.
Try using the suggestion next to the hex code to find a fix, then alter it to fit your brand in the Tweak Color panel.
Complex Backgrounds (Chrome Extension Required)
Text over a gradient
Text over an image