Color Contrast Checker

Check if your website meets WCAG AA and AAA requirements

Verify the contrast between the foreground and background colors of text and graphic elements on any webpage, software or PDF. Simply use the pipette tool or type in your HEX code.

Screenshot: Contrast Checker with buttons and input fields to select foreground and background color, showing the contrast between the colors as well as the WCAG rules that fail or pass.

Pick your color

Screenshot: The color picker section of the Bookmarklet.

Use the pipette tool to select the foreground and background colors from anywhere on your screen, such as a website, PDF, or image.

Get the results

Screenshot: The result section for large text showing the contrast ratios that pass or fail.

The bookmarklet checks the color contrast for each possible situation and tells you if it meets the WCAG requirements or not.

Copy and share

Screenshot: Highlighted copy button with a mouse cursor showing where to copy the text to the clipboard.

Copy a detailed description of the results directly to your clipboard.

Setup Guide

Follow these simple steps to setup the bookmarklet.

Step 1

Make sure your browser's bookmarks bar is visible. Most browsers allow this by pressing Ctrl + Shift + B or Cmd + Shift + B on a Mac.
Step 2

Drag-&-drop the following bookmarklet link to your bookmarks bar:

Color Contrast Bookmarklet
Step 3

Let's get started using the bookmarklet!

Go to any webpage you want to test. Click on the bookmarklet that you saved in your bookmarks bar and it will pop-up instantly, ready to use.

Alternative way

An alternative to drag-&-drop is to press the button below to copy the bookmarklet code. The code usually starts with "javascript:".

Copied to clipboard

Then go an and create a new bookmark in your browser. To do this right-click anywhere on the bookmarks bar or press the Tab key until you reach it, then press Shift + F10 or the Context Menu key.

Choose "Add Page" or "Add Bookmark", depending on your browser.

Type "Color Contrast Checker" in the name field and paste the bookmarklet code you copied earlier into the URL or Location field.

Click Save or press the Enter key.

Source Code

More information and the detailed source code can be found on GitHub.

What is a browser bookmarklet?

A bookmarklet is a tiny app that you save in your browser's bookmarks bar, without the need to install anything. When you click on the bookmark, it adds functionality on the current page.

It's that simple!