Accessibility - Extensions (EdgeHTML)

Note

This documentation is for extensions for the legacy version of Microsoft Edge. For information on the new Microsoft Edge, see Microsoft Edge (Chromium) Extensions.

Important

The new Microsoft Edge program is now open to accept chromium-based extensions for the new Microsoft Edge (v77 or later). If you want to submit a new extension, visit Publish to Microsoft Edge (Chromium) Add-ons Store to learn about the submission process.

With this announcement, Microsoft is no longer accepting new extensions for the legacy version of Microsoft Edge. If you own an Extension for the legacy version, you should begin the process of porting your Extension to the new Microsoft Edge. The new Microsoft Edge is based on Chromium, so Extensions designed for the legacy version of Microsoft Edge do not work with the new version.

Creating accessible extension icons for Microsoft Edge

Third-party extension developers are encouraged to use image assets that meet Microsoft’s strict accessibility requirements so that icons are clearly visible for both light and dark themes. We recommend that all extension icons have a 14:1 ratio between the icon’s background color and the dominant color of the icon itself.

First-party extensions developed by Microsoft apply a “stickering” visual treatment to satisfy these requirements.

Examples of the "stickering"

The main goal of “stickering” is to make the icon visually accessible on any background color. The recommended color ratio between the white outer stroke and your icon should be 14:1 to support the high contrast requirements.

Good icon

With stickering, a primarily dark icon will remain visible on any background color.

Bad icon

Without stickering, an icon could blend in with the background and become impossible to see.

"Stickering" your extension icon

The following five steps outline the suggested method of creating an extension icon that meets Microsoft’s accessibility requirements:

Step 1	Step 2	Step 3	Step 4	Step 5
Set your icon within your specified grid.	Reduce your icon size by 2 pixels.	Copy your icon and paste in place. Create a 2 pixel outer stroke with rounded corners.	Outline your stroke, release the compound path, and merge the remaining shapes.	Color the outer stroke white and the inner icon as you wish.