> For the complete documentation index, see [llms.txt](https://support.agentfire.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.agentfire.com/add-ons/ada-protect/articles-5654542-premium-add-on-ada-protect-design.md).

# How to Change the Look of the Accessibility Tools

How to change the look of ADA Protect's highlight, magnifier, reading and virtual keyboard tools.

Some ADA Protect tools draw on your page, like outlines around links or a reading guide. You can change their style and colors.

Go to **Site Tools** > **ADA Protect**. If it's not there, see [How ADA Protect Works](/add-ons/ada-protect/articles-5650283-premium-add-on-ada-protect-general.md). Click **Design** on the left.

![ADA Protect settings with the Design tab highlighted](https://2039430885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq65vhH2v4k5rpDOha9Vm%2Fuploads%2Fgit-blob-09e86a803183ef2bb41ad43063ea253930a8a210%2Fada-4-design.png?alt=media)

* **Highlight:** the **Style**, **Color**, **Width** and **Offset** of the outlines for **Highlight Titles**, **Highlight Links**, **Highlight Hover** and **Highlight Focus**.
* **Magnifier:** the **Text Magnifier**'s **Background Color**, **Text Color** and **Font Size**.
* **Reading:** the **Reading Guide**'s size, colors and border, and the **Reading Mask**'s height and **Overlay Color**.
* **Virtual Keyboard:** its **Layout** (language) and colors.

Click **Update** at the top to save. Then open your live website in a private window, click the accessibility button and turn on the tool you changed, like **Highlight Links**, to check.