Install and use the Accessible Color Picker extension

Use the Accessible Color Picker to check contrast compliance on your webpage and find accessible alternatives. 

On this page:

• Install the Accessible Color Picker
• Check color contrast using hex codes
• Pick the foreground and background colors of a webpage
• Check contrast compliance

Install the Accessible Color Picker

To install the Accessible Color Picker:

1. Go to the Accessible Color Picker in the chrome web store.
2. Select Add to chrome.
3. Select Add extension. The extension is now available in the Extensions menu next to the address bar.

Check color contast using hex codes

If you already know your hex codes, you can check color contrast compliance without picking the foreground and background colors of a webpage. 

To check color contrast using hex codes:

1. Enter the foreground hex code. 
2. Enter the background hex code.
3. Check the contrast results.

Pick the foreground and background colors of a webpage

You must be on the webpage you want to test before you open the extension. If you want to test more than one webpage, you'll need to close the extension and reopen it when you're on the next webpage. 

To check contrast on a webpage:

1. Go to the webpage you want to test.
2. Select the extensions menu.
3. Choose Accessible Color Picker. The extension will open in a new window.
4. Select the Foreground eyedropper.
5. Find and select the foreground color on the webpage.
6. Select the Background eyedropper.
7. Find and select the background color on the webpage.

Check contrast compliance

To check your contrast results:

1. Check the compliance value under the Hex code fields. If the compliance value:
   • Says AA or AAA, it meets WCAG 2.0 AA or AAA compliance levels.
   • Doesn't say AA or AAA, it doesn't meet WCAG 2.0 AA or AAA compliance levels.
2. To find an accessible alternative, select one of the color chips with AA or AAA. The foreground and background hex codes will update so you can use them in your webpage design.