Spyglass Contrast Checker ⋆ SeaMonster Studios

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:
1. Turn on "Developer mode" in the top-right corner.
2. Click "Load unpacked" in the top-left.
3. 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.

Spyglass Contrast Checker

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

18 Submissions

50% Fail WCAG AA

47.3 Avg APCA Lc

Sort by:

on ,

The quick brown fox

Original

APCA Balanced

, ,

Full data

WCAG Ratio
WCAG Size/Weight (Normal)
WCAG Size/Weight (Large)
APCA Lc
APCA Size Fix
APCA Weight Fix
APCA Color Fix
APCA Balanced
Page
Submitted	2026-08-19T05:07:29-07:00

on ,

The quick brown fox

Original

APCA Balanced

, ,

Full data

WCAG Ratio
WCAG Size/Weight (Normal)
WCAG Size/Weight (Large)
APCA Lc
APCA Size Fix
APCA Weight Fix
APCA Color Fix
APCA Balanced
Page
Submitted	2026-08-19T05:07:28-07:00

on ,

The quick brown fox

Original

APCA Balanced

, ,

Full data

WCAG Ratio
WCAG Size/Weight (Normal)
WCAG Size/Weight (Large)
APCA Lc
APCA Size Fix
APCA Weight Fix
APCA Color Fix
APCA Balanced
Page
Submitted	2026-08-19T05:07:28-07:00

on ,

The quick brown fox

Original

APCA Balanced

, ,

Full data

WCAG Ratio
WCAG Size/Weight (Normal)
WCAG Size/Weight (Large)
APCA Lc
APCA Size Fix
APCA Weight Fix
APCA Color Fix
APCA Balanced
Page
Submitted	2026-08-19T05:07:27-07:00

on ,

The quick brown fox

Original

APCA Balanced

, ,

Full data

WCAG Ratio
WCAG Size/Weight (Normal)
WCAG Size/Weight (Large)
APCA Lc
APCA Size Fix
APCA Weight Fix
APCA Color Fix
APCA Balanced
Page
Submitted	2026-08-19T05:07:27-07:00

#A6792B on #1F1010 16px, 400

The quick brown fox

Original

#A6792B

WCAG Color

#B64029

APCA Color

#A6792B

APCA Balanced

49.6px, 700, #A6792B

Full data

WCAG Ratio	4.73:1
WCAG Size/Weight (Normal)	Normal text (AA): 16px, 400
WCAG Size/Weight (Large)	Large text (AA): at least 24px+ or 18.5px+ and 700+
APCA Lc	34.7
APCA Size Fix	49.6px
APCA Weight Fix	700
APCA Color Fix	#A6792B
APCA Balanced	49.6px / 700 / #A6792B
Page	Home - Cyrano's Cafe
Submitted	2026-08-03T18:50:38.577Z

#A31E22 on #F6EDE6 16px, 400

The quick brown fox

Original

#A31E22

APCA Color

#A31E22

APCA Balanced

18.0px, 400, #A31E22

Full data

WCAG Ratio	6.57:1
WCAG Size/Weight (Normal)	Normal text (AA): 16px, 400
WCAG Size/Weight (Large)	Large text (AA): at least 24px+ or 18.5px+ and 700+
APCA Lc	75.0
APCA Size Fix	18.0px
APCA Weight Fix	400
APCA Color Fix	#A31E22
APCA Balanced	18.0px / 400 / #A31E22
Page	Sugarfire Events - Sugarfire Smoke House
Submitted	2026-08-03T17:56:03.914Z

#EE252B on #A31E22 63.8px, 400

The quick brown fox

Original

#EE252B

WCAG Color

#F58184

APCA Color

#F68F92

APCA Balanced

63.8px, 400, #F68F92

Full data

WCAG Ratio	1.78:1
WCAG Size/Weight (Normal)	Normal text (AA): normal text wouldn't pass
WCAG Size/Weight (Large)	Large text (AA): 63.8px, 400
APCA Lc	16.2
APCA Size Fix	N/A
APCA Weight Fix	N/A
APCA Color Fix	#F68F92
APCA Balanced	N/A / N/A / #F68F92
Page	A Home Run Matchup: Sugarfire + Jordan Walker
Submitted	2026-08-03T17:50:37.222Z

#EB3723 on #000000 18px, 400

The quick brown fox

Original

#EB3723

APCA Color

#EB3723

APCA Balanced

47.8px, 700, #EB3723

Full data

WCAG Ratio	5.10: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	35.1
APCA Size Fix	47.8px
APCA Weight Fix	700
APCA Color Fix	#EB3723
APCA Balanced	47.8px / 700 / #EB3723
Page	Backyard Office FAQ \| SDEK ADU & Studio Shed Questions
Submitted	2026-08-03T16:57:22.808Z

#C7BCFF96 on #341F64 13px, 600

The quick brown fox

Original

#C7BCFF96

WCAG Color

#E0DAFF

APCA Color

#C7BCFF

APCA Balanced

61.0px, 700, #C7BCFF

Full data

WCAG Ratio	3.71:1
WCAG Size/Weight (Normal)	Normal text (AA): 13px, 600
WCAG Size/Weight (Large)	Large text (AA): needs 24px+ or 18.5px+ and 700+
APCA Lc	32.3
APCA Size Fix	61.0px
APCA Weight Fix	700
APCA Color Fix	#C7BCFF
APCA Balanced	61.0px / 700 / #C7BCFF
Page	Polly Alt Test · Products · The Collection Snowboard: Liquid · Shopify
Submitted	2026-07-30T22:33:27.227Z

#BFA393 on #0A0000 14px, 300

The quick brown fox

Original

#BFA393

APCA Color

#BFA393

APCA Balanced

23.8px, 500, #BFA393

Full data

WCAG Ratio	8.76:1
WCAG Size/Weight (Normal)	Normal text (AA): 14px, 300
WCAG Size/Weight (Large)	Large text (AA): at least 24px+ or 18.5px+ and 700+
APCA Lc	55.4
APCA Size Fix	23.8px
APCA Weight Fix	500
APCA Color Fix	#BFA393
APCA Balanced	23.8px / 500 / #BFA393
Page	Jersey City Dentist \| Midtown Dental Group New Jersey
Submitted	2026-07-08T22:08:36.222Z

#BFA393 on #FBFBFB 28px, 800

The quick brown fox

Original

#BFA393

WCAG Color

#A48C7E

APCA Color

—

APCA Balanced

28px, 800, —

Full data

WCAG Ratio	2.29:1
WCAG Size/Weight (Normal)	Normal text (AA): normal text wouldn't pass
WCAG Size/Weight (Large)	Large text (AA): 28px, 800
APCA Lc	44.2
APCA Size Fix	✓
APCA Weight Fix	✓
APCA Color Fix	—
APCA Balanced	✓ / ✓ / —
Page	Accessibility Policy \| Midtown Dental Group
Submitted	2026-07-08T17:11:36.665Z

#FE4F02D9 on #FFFFFF 14px, 400

The quick brown fox

Original

#FE4F02D9

WCAG Color

#B43801

APCA Color

#FE4F02

APCA Balanced

21.4px, 600, #FE4F02

Full data

WCAG Ratio	4.52:1
WCAG Size/Weight (Normal)	Normal text (AA): 14px, 400
WCAG Size/Weight (Large)	Large text (AA): at least 24px+ or 18.5px+ and 700+
APCA Lc	54.3
APCA Size Fix	21.4px
APCA Weight Fix	600
APCA Color Fix	#FE4F02
APCA Balanced	21.4px / 600 / #FE4F02
Page	US Sports Camps Staff Store – YEB-B2B
Submitted	2026-06-24T18:17:26.757Z

#000000 on #808D6F 16px, 400

The quick brown fox

Original

#000000

APCA Color

#000000

APCA Balanced

30.0px, 700, #000000

Full data

WCAG Ratio	5.96:1
WCAG Size/Weight (Normal)	Normal text (AA): 16px, 400
WCAG Size/Weight (Large)	Large text (AA): at least 24px+ or 18.5px+ and 700+
APCA Lc	N/A
APCA Size Fix	30.0px
APCA Weight Fix	700
APCA Color Fix	#000000
APCA Balanced	30.0px / 700 / #000000
Page	Valley House Inn
Submitted	2026-06-09T20:44:01.169Z

#5A3E22 on #EAE6E1 15px, 500

The quick brown fox

Original

#5A3E22

APCA Color

#5A3E22

APCA Balanced

15.9px, 500, #5A3E22

Full data

WCAG Ratio	7.87:1
WCAG Size/Weight (Normal)	Normal text (AA): 15px, 500
WCAG Size/Weight (Large)	Large text (AA): at least 24px+ or 18.5px+ and 700+
APCA Lc	N/A
APCA Size Fix	15.9px
APCA Weight Fix	500
APCA Color Fix	#5A3E22
APCA Balanced	15.9px / 500 / #5A3E22
Page	Valley House Inn
Submitted	2026-06-09T20:37:58.532Z

#FFFFFF on #3E6AE1 14px, 500

The quick brown fox

Original

#FFFFFF

APCA Color

#FFFFFF

APCA Balanced

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 -, -

The quick brown fox

Original

#28D3B5

WCAG Color

#198572

APCA Color

—

APCA Balanced

—, —, —

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 -, -

The quick brown fox

Original

#333333

APCA Color

—

APCA Balanced

—, —, —

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

Organization	Submitter	URL	FG	BG	Size	Weight	WCAG	APCA Lc	APCA Balanced Fix	Date
	Anonymous						Fail ()			Aug 19, 2026
	Anonymous						Fail ()			Aug 19, 2026
	Anonymous						Fail ()			Aug 19, 2026
	Anonymous						Fail ()			Aug 19, 2026
	Anonymous						Fail ()			Aug 19, 2026
SeaMonster Studios	Deneb Pulsipher	cyranos.com	#A6792B	#1F1010	16px	400	Pass (4.73:1)	34.7	49.6px / 700 / #A6792B	Aug 3, 2026
sugarfiresmokehouse.com	Deneb Pulsipher	sugarfiresmokehouse.com	#A31E22	#F6EDE6	16px	400	Pass (6.57:1)	75.0	18.0px / 400 / #A31E22	Aug 3, 2026
SeaMonster Studios	Deneb Pulsipher	sugarfiresmokehouse.com	#EE252B	#A31E22	63.8px	400	Fail (1.78:1)	16.2	N/A / N/A / #F68F92	Aug 3, 2026
SeaMonster Studios	Deneb Pulsipher	sdek.org	#EB3723	#000000	18px	400	Pass (5.10:1)	35.1	47.8px / 700 / #EB3723	Aug 3, 2026
admin.shopify.com	Anonymous	admin.shopify.com	#C7BCFF96	#341F64	13px	600	Fail (3.71:1)	32.3	61.0px / 700 / #C7BCFF	Jul 30, 2026
Midtown Dental Group	Deneb Pulsipher	midtowndentalgroup.com	#BFA393	#0A0000	14px	300	Pass (8.76:1)	55.4	23.8px / 500 / #BFA393	Jul 8, 2026
Midtown Dental Group	Deneb Pulsipher	midtowndentalgroup.com	#BFA393	#FBFBFB	28px	800	Fail (2.29:1)	44.2	✓ / ✓ / —	Jul 8, 2026
SeaMonster Studios	Deneb Pulsipher	yeb-b2b.myshopify.com	#FE4F02D9	#FFFFFF	14px	400	Pass (4.52:1)	54.3	21.4px / 600 / #FE4F02	Jun 24, 2026
Valley House	Deneb Pulsipher	thevalleyhouseinn.com	#000000	#808D6F	16px	400	Pass (5.96:1)	N/A	30.0px / 700 / #000000	Jun 9, 2026
Valley House	Deneb Pulsipher	thevalleyhouseinn.com	#5A3E22	#EAE6E1	15px	500	Pass (7.87:1)	N/A	15.9px / 500 / #5A3E22	Jun 9, 2026
www.tesla.com	Deneb	www.tesla.com	#FFFFFF	#3E6AE1	14px	500	Pass (4.82:1)	78.4	15.9px / 500 / #FFFFFF	May 14, 2026
SeaMonster Studios	Deneb	www.seattleattractions.com	#28D3B5	#FFFFFF	-	-	Fail (1.90:1)	N/A	— / — / —	May 11, 2026
SeaMonster Studios	Deneb	www.ecosia.org	#333333	#D7EB80	-	-	Pass (9.68:1)	N/A	— / — / —	May 11, 2026

Spyglass Contrast Checker

How to Use:

Bookmarklet Code:

Color Contrast Playground

Good Contrast Examples

Bad Contrast Examples

Complex Backgrounds (Chrome Extension Required)

Call Us

(206) 701-9767

Email Us

hello@seamonsterstudios.com

hello@
seamonsterstudios.com

Get Somethin' Started

Let's talk about your project