Contrast Checker Bookmarklet
The Contrast Checker Bookmarklet will display a miniature version of WebAIM's popular Contrast Checker in any web page. By using the eyedropper tool in the color picker tools, you can readily check the contrast of any page content by selecting the foreground and background colors.
Quick Installation
Drag the link below to the Bookmarks bar of your browser:
To activate the Contrast Checker bookmarklet, navigate to the page you want to test, then click the Contrast Checker bookmark in your browser's Bookmarks bar.
The eyedropper / color picker tool can be used to extract a color value from anywhere on your screen, including outside your browser window. Enable the eyedropper by clicking the color block immediately below the hex color value input, then click the eyedropper icon. NOTE: Unfortunately browsers have not yet implemented accessibility support for the eyedropper tool within color inputs.
You can move the contrast checker dialog by dragging the top bar. Press Esc to close it.
Installation and Usage Details
You can use the bookmarklet from any bookmark location, but we recommend the Bookmarks/Favorites Bar.
Press Control + Shift + B (command + shift + B on Mac) to show the Bookmarks/Favorites bar, then drag the link above to that bar.
You can also open the Bookmarks/Favorites manager with Control + Shift + O (command + control + B on Mac) to manually add the bookmarklet. For the bookmarklet "URL", right click the link above, select "Copy Link Address", then paste the copied code into the URL field.
To activate the bookmarklet, navigate to the page on which contrast will be tested, then click the Contrast Checker bookmark on the Bookmarks/Favorites bar.
NOTE: The eyedropper tool is not currently provided in Firefox for Windows.