The Spyglass contrast checker bookmarklet is designed to be a lightweight bookmarklet you can activate on any page with an element you want to check the contrast of. Drag the button below to your bookmarks bar, and then click it on any webpage to launch the tool.
For a more robust version of Spyglass, download Spyglass as a zip that will soon be in the Chrome Web store, as it already is in the Firefox Addons.
If you're participating in the pre-release focus group, follow these steps to install the extension in Chrome:
- Download and Extract: Download the Extension ZIP here. Unzip it to a folder on your computer. Do not delete this folder after installing.
-
Open Extensions:
In your Chrome address bar, go to
chrome://extensions -
Load the Tool:
- Turn on "Developer mode" in the top-right corner.
- Click "Load unpacked" in the top-left.
- Select the folder you unzipped in Step 1.
Quick Tips: Pin the extension using the puzzle piece icon so it's easy to find. If Chrome shows a "Disable developer mode" warning, just click the 'X' to ignore it.
The full browser version can often check text overlaid on images and gradients, as well as APCA values in addition to simpler WCAG contrast ratios. That version also lets you save data from your tests in a CSV, or even send us tests that you run.
We're compiling a list of brand color combinations that don't work along with alternatives that do, and would really appreciate your help! Beneath the playround, you can checkout the table of companies we've already audited, and use the extension to go check on some colors from your favorite brand. Be part of the solution.
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
#FFFFFF on #3E6AE1
14px, 500
#FFFFFF
#FFFFFF
15.9px, 500, #FFFFFF
Full data
| WCAG Ratio | 4.82:1 |
|---|---|
| WCAG Size/Weight (Normal) | Normal text (AA): 14px, 500 |
| WCAG Size/Weight (Large) | Large text (AA): at least 24px+ or 18.5px+ and 700+ |
| APCA Lc | 78.4 |
| APCA Size Fix | 15.9px |
| APCA Weight Fix | 500 |
| APCA Color Fix | #FFFFFF |
| APCA Balanced | 15.9px / 500 / #FFFFFF |
| Page | Electric Cars, Solar & Clean Energy | Tesla |
| Submitted | 2026-05-14T10:42:19.283Z |
#28D3B5 on #FFFFFF
-, -
#28D3B5
#198572
—
—, —, —
Full data
| WCAG Ratio | 1.90:1 |
|---|---|
| WCAG Size/Weight (Normal) | Normal text (AA): 18px, 900 |
| WCAG Size/Weight (Large) | Large text (AA): 24px+ or 18.5px+ and 700+ |
| APCA Lc | N/A |
| APCA Size Fix | — |
| APCA Weight Fix | — |
| APCA Color Fix | — |
| APCA Balanced | — / — / — |
| Page | Seattle Premier Attractions: The Best Activities and Events in Seattle |
| Submitted | 2026-05-11T17:47:39.566Z |
#333333 on #D7EB80
-, -
#333333
—
—, —, —
Full data
| WCAG Ratio | 9.68:1 |
|---|---|
| WCAG Size/Weight (Normal) | Normal text (AA): 18px, 400 |
| WCAG Size/Weight (Large) | Large text (AA): at least 24px+ or 18.5px+ and 700+ |
| APCA Lc | N/A |
| APCA Size Fix | — |
| APCA Weight Fix | — |
| APCA Color Fix | — |
| APCA Balanced | — / — / — |
| Page | Ecosia - the search engine that plants trees |
| Submitted | 2026-05-11T17:41:39.444Z |