How to Add a Color Overlay to Any Website
Learn how to use Helperbird's add a color overlay to any website. Complete guide for improving web accessibility and reading support.
What is a Color Overlay?
A color overlay adds a transparent colored layer on top of the entire webpage. It is like looking through a sheet of colored plastic or glass.
Many people find that a tinted overlay reduces the harsh contrast of black text on white backgrounds. This can make text appear calmer and easier to read.
Who is This For?
This feature is helpful for:
- People with dyslexia who benefit from colored overlays
- Anyone with Irlen Syndrome or visual stress
- People who find bright white screens uncomfortable
- Anyone who experiences eye strain or headaches when reading online
- Students who need to read for long periods
Step 1: Open Helperbird
Click the Helperbird icon in your browser toolbar. It looks like a small owl and is usually in the top-right corner of your browser.
This will open the Helperbird menu.
Step 2: Open the All Features Section
Scroll down to the bottom of the Helperbird menu. You will see a section called All Features.
Click the arrow next to All Features to expand it and show all available features.
Step 3: Find Dyslexia Support
Look through the list of features until you see Dyslexia support.
It has a purple icon with a brain symbol on it.
Step 4: Open Dyslexia Support
Click on Dyslexia support to open it.
A panel will appear with two tabs at the top: Tools and Settings.
Make sure the Tools tab is selected. This is where you will find the Overlay toggle.
Step 5: Turn on Overlay
In the Tools tab, look for Overlay.
Click the toggle switch next to it to turn it on. The toggle will turn green when it is enabled.
A colored tint will immediately appear over the entire webpage.
Step 6: Customize the Overlay
To adjust the overlay color and intensity, click on the Settings tab at the top of the panel.
Here you can choose different colors and adjust how strong the overlay appears.
Overlay Settings
In the Settings tab, you can customize the following:
Color – Choose a color for the overlay. Popular choices include yellow, blue, pink, and green. Different colors work better for different people, so try a few to find what is most comfortable for you.
Brightness – Adjust how strong the overlay is. A lower brightness makes the overlay more transparent, while a higher brightness makes the color more intense.
Tip: Many people with dyslexia or Irlen Syndrome find that certain specific colors work best for them. If you have worked with a specialist who recommended a particular overlay color, you can match it here. Try different colors and brightness levels to find what feels most comfortable for your eyes.
Video Tutorial
Need Additional Help?
If you have any questions or run into any issues, please contact the Helperbird support team. You can reach us at Helperbird support. We are happy to help you get the most out of Helperbird.
