The color-blind emulator gives you an idea of what your webpage looks like to people with different types of color blindness. It also shows high-contrast scenarios that people with low vision or light sensitivity might use to engage with your content.
You can enable the color-blind emulator when setting up an advanced scan.
On this page:
- Enable the color-blind emulator
- View results from the color-blind emulator
- Types of color blindness emulated
- High-contrast scenarios emulated
Enable the color-blind emulator
To enable the color-blind emulator:
- Go to Run automated scan.
- Select Set up advanced scan.
- Fill out the required fields.
- Under Audit options, select the checkbox for Color-blind emulator.
- Select Run scan.
View results from the color-blind emulator
To view results from the color-blind emulator:
- Run an advanced scan with the color-blind emulator enabled.
- On the Scan results page, set the Report table to View by page.
- Select Emulator to view results from a specific page. You’ll be taken to a page showing an unaltered screenshot of your website and results for each type of color blindness.
Types of color blindness emulated
The color-blind emulator replicates eight types of color blindness:
- Achromatomaly (partial color blindness, sees the absence of most colors)
- Achromatopsia (complete color blindness, can only see shades)
- Deuteranomaly (trouble distinguishing greens)
- Deuteranopia (green blind–can't see greens at all)
- Protanomaly (trouble distinguishing reds)
- Protanopia (red blind–can't see reds at all)
- Tritanomaly (trouble distinguishing blues)
- Tritanopia (blue blind–can't see blues at all)
High-contrast scenarios emulated
The color-blind emulator shows these high-contrast scenarios:
- High-contrast mode in grayscale
- High-contrast mode in inverted colors
- High-contrast mode in inverted grayscale
- High-contrast mode in yellow on black
- High-contrast default mode