This page explains the ContrastChecker bookmarklet, by Ani Chiang, which is available on the Intopia’s accessibility testing bookmarklets page.
Bookmarklet 24. ContrastChecker
This bookmarklet allows you to check the contrast between two colours by sampling colours with an eyedropper or entering colour values directly.
The checker automatically calculates the contrast ratio and provides pass or fail results for the 3:1, 4.5:1 and 7:1 contrast thresholds.
The bookmarklet was created for, and works best with, Chrome on Windows.
Video transcript
All of the information presented in this video is covered in the “How to use it” section below.
Use this bookmarklet when you want to:
- check the contrast between text and its background
- check the contrast of large text
- check the contrast of user interface components, such as form controls and buttons
- check the contrast of meaningful graphical objects, such as icons and chart elements
- sample colours directly from a web page using an eyedropper
- check colours that only appear in hover or focus states
- manually check known HEX or RGB colour values
- quickly identify whether two colours meet 3:1, 4.5:1 or 7:1 contrast thresholds
How to use it
- Step 1: Start on Intopia’s testing bookmarklets page
- Step 2: Find the ‘ContrastChecker’ bookmarklet
- Step 3: Drag the bookmarklet to your browser’s Bookmarks Bar
- Step 4: Use the test page to review the bookmarklet
- Step 5: Activate the bookmarklet
Three ways to capture a colour
1. Eyedropper
Select the Eyedropper button to activate the onscreen loupe. Move the loupe over the colour you want to sample and select it.
2. Colour input field
Enter a HEX or RGB colour value directly into the colour input field.
3. Keyboard shortcut
Activate an eyedropper directly using a keyboard shortcut:
-
Windows and Chrome:
- Colour 1: Alt + 1
- Colour 2: Alt + 2
- macOS and Chrome:
- Colour 1: Option + 1
- Colour 2: Option + 2
Features
- Automatic contrast results: The contrast ratio and WCAG pass or fail results are automatically calculated when both colour values have been entered.
- HEX ↔ RGB: Converts the colour values between HEX and RGB.
- Copy: Copies the colour values and contrast details to the clipboard.
- Explanation: The ‘?’ button expands an explanation of the different contrast thresholds and relevant exceptions. It also provides links to the relevant WCAG Success Criteria.
- Reset: Removes both colour values and returns the bookmarklet to its default state.
- Toggle panel: Switches the bookmarklet between a top panel and side panel.
- Keyboard shortcuts: Opens a popup containing the available keyboard shortcuts.
Keyboard shortcuts
- Eyedropper 1: Alt + 1
- Eyedropper 2: Alt + 2
- Reset: Alt + R
- Convert: Alt + V
- Copy: Alt + C
- Toggle panel: Alt + T
- Close: Esc
On macOS, use Option instead of Alt.
Three ways to resize the panel
1. Drag the edge
Select and hold the edge of the panel, then drag it to resize the panel.
2. Keyboard
Move keyboard focus to the panel edge, then use the Up and Down Arrow keys to resize the panel.
3. Onscreen buttons
Select the panel edge once to display the resize buttons, then use the onscreen buttons to increase or decrease the panel size.
Tips
Tip 1: Capturing hover and focus colours
Use the eyedropper keyboard shortcuts to capture colours from hover and focus states that may otherwise disappear when you move away from the element.
- Set up the hover or focus state
- Activate the appropriate eyedropper keyboard shortcut, such as Alt + 1
- Move the loupe over the colour and select it
Tip 2: Working at extreme zoom
When using extreme browser zoom to capture a colour accurately, you may want to reduce the size of the ContrastChecker panel to provide more screen space.
You can then use an eyedropper keyboard shortcut to capture the colour without needing to interact with the panel.
Three ways to dismiss the bookmarklet
- Activate the ContrastChecker bookmarklet again
- Select the ‘X’ close button
- Press the Esc key