How to Manually Check Color Contrast
Video Length
2:59
New Resource for Contrast Checking
Our new favorite tool for color contrast analyzing is TPGi's Color Contrast Analyzer (CCA). CCA is available for free for Windows and Mac. It allows you to find colors easily, immediately evaluate their contrast, and tweak existing colors to make them higher contrast.
Download CCA Links to an external site.
WEBAIM CONTRAST CHECKER
WebAIM Contrast Checker Links to an external site. is a free online tool to check color contrast. We recommend using this tool, as it will quickly and easily inform you if your color contrast meets both the minimum and enhanced WCAG standards for color contrast.
To use the WebAIM Contrast Checker, you'll need the hex codes for both the background and foreground/text colors. These six-digit codes are how colors are represented consistently on screens. White is #FFFFFF and black is #000000. For any other colors, you can use a color picker app to locate the hex code (more on that later).
To use the Contrast Checker, insert the hex code for your foreground and background colors. Selecting the double-sided arrow ⟷ in between foreground and background will swap the colors. Once you've inserted the hex codes, the section below will inform you if the colors Pass or Fail the minimum (WCAG AA) and enhanced (WCAG AAA) standards. We strongly recommend using colors that Pass both standards for whatever size your text is.
When manually checking color contrast through the WebAIM Contrast Checker Links to an external site., you'll need the hex codes of the colors you want to check. In the next section, we'll show you how to find hex codes to put into the WebAIM Contrast Checker.
FINDING HEX CODES
To use the Contrast Checker, you'll need hex codes. The quickest and easiest way to find hex codes is to use a lightweight application to locate the codes.
For PC users, we recommend Instant Eyedropper Links to an external site.. This tool is free and easy-to-use. Once you have installed it, there will be an icon in the System Tray (up arrow in the taskbar). Click this icon, then hover to the color you want the hex code for. Click again and the app will copy the hex code to your clipboard so you can paste it into the Contrast Checker.
For Mac users, the built-in Digital Color Meter application will work, but it is rather unintuitive. We recommend ColorSlurp
Links to an external site., since its free version is much more user-friendly than Digital Color Meter. Once you have installed it, open the app, select the eyedropper icon
, then select the color you want the hex code for. Click again and the app will copy the hex code to your clipboard so you can paste it into the Contrast Checker. ColorSlurp also includes a built-in Contrast Checker tool
Links to an external site., so feel free to use that instead.
The advantage of using an application is that you can select colors from anything on your computer. If you are always selecting from your web browser, though, there are many free and easy-to-use extensions, such as ColorPick Eyedropper Links to an external site. or ColorZilla Links to an external site..