Color Vision Accessibility Checker

Measure WCAG contrast, simulate major color-vision deficiencies, and optionally flag low-contrast regions in a UI screenshot

Use this checker to evaluate both contrast compliance and how a color pair behaves for users with different kinds of color-vision deficiency.

What the badges mean:

  • AA normal: whether the contrast ratio passes WCAG AA for normal-sized text. The threshold is 4.5:1.
  • AAA normal: whether the contrast ratio passes WCAG AAA for normal-sized text. The threshold is 7:1.

Why this matters:

  • "Normal" means standard body text, small labels, and most UI copy.
  • Large text has lower thresholds in WCAG: AA large passes at 3:1 and AAA large passes at 4.5:1.
  • So a pair can fail AAA normal but still be acceptable for large headings or bold display text.

How to use the fields:

  • Foreground Color: the text, icon, or main UI color placed on top
  • Background Color: the surface color behind it
  • Design Image: optional screenshot or mockup for region-based low-contrast analysis
  • WCAG Level: controls the threshold used when flagging image regions

Reading the result:

  • The Normal / Protanopia / Deuteranopia / Tritanopia / Achromatopsia cards show how the pair looks under each simulation.
  • The contrast ratio is recalculated after simulation so you can see whether a pair that works in normal vision becomes risky for other users.
  • Screenshot analysis marks tiles whose local contrast falls below the selected WCAG threshold.

Example Results

1 examples

Check a button palette for color-blind accessibility

Compare foreground and background colors under WCAG and color-vision simulations before finalizing a UI theme.

Color vision accessibility report
View input parameters
{ "foreground": "#1f2937", "background": "#ffffff", "wcagLevel": "AA" }

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/webp

Key Facts

Category
Design & Color
Input Types
color, file, select
Output Type
html
Sample Coverage
4
API Ready
Yes

Overview

The Color Vision Accessibility Checker is a specialized tool designed to evaluate UI color contrast against WCAG standards and simulate how color pairs appear to users with various color-vision deficiencies. By inputting foreground and background colors, or uploading a design screenshot, you can instantly verify AA and AAA compliance while identifying low-contrast regions that may hinder readability for users with protanopia, deuteranopia, tritanopia, or achromatopsia.

When to Use

  • •When establishing a new brand color palette to ensure baseline WCAG compliance for text and interactive elements.
  • •Before finalizing UI mockups to verify that text remains legible for users with different types of color blindness.
  • •When auditing an existing application or website screenshot to quickly identify specific regions that fail contrast requirements.

How It Works

  • •Enter your foreground and background hex codes to calculate the baseline contrast ratio.
  • •Select a WCAG level (AA or AAA) to set the strictness threshold for your accessibility check.
  • •Optionally upload a design image (PNG, JPEG, or WEBP) to scan for localized low-contrast areas.
  • •Review the generated report, which displays recalculated contrast ratios across five distinct color-vision simulations and highlights failing regions in your uploaded image.

Use Cases

Testing primary button text and background colors for readability across all color-vision profiles.
Scanning a complex dashboard screenshot to locate text overlays that blend into the background.
Validating a dark mode theme to ensure text contrast meets WCAG AA standards before development.

Examples

1. Checking a button palette for color-blind accessibility

UI Designer
Background
A designer is creating a new primary action button using dark gray text on a white background.
Problem
Need to ensure the button text is legible for all users, including those with color vision deficiencies, under WCAG AA standards.
How to Use
Set the Foreground Color to #1f2937, Background Color to #ffffff, and select AA for the WCAG Level.
Example Config
{
  "foreground": "#1f2937",
  "background": "#ffffff",
  "wcagLevel": "AA"
}
Outcome
The tool generates a report showing the contrast ratio passes WCAG AA and remains highly legible across Protanopia, Deuteranopia, Tritanopia, and Achromatopsia simulations.

2. Auditing a dashboard mockup for low-contrast text

Accessibility QA Tester
Background
A QA tester is reviewing a complex analytics dashboard mockup before it goes to the engineering team.
Problem
Manually checking every text label against its background is too slow and prone to human error.
How to Use
Upload the dashboard mockup as the Design Image, set the WCAG Level to AA, and run the checker.
Example Config
{
  "wcagLevel": "AA"
}
Outcome
The HTML report displays the uploaded image with specific tiles highlighted where the local contrast ratio fails the 4.5:1 WCAG AA threshold.

Try with Samples

image, png, jpg
Windows Image Processing C++ Samples
Windows C++ image processing examples including reading/saving images, resizing, and format conversion using Windows Imaging Component (WIC)
preferred input family image
image
Web Image Processing Rust Samples
Web Rust image processing examples including image read/save, scaling, and format conversion
preferred input family image
image
macOS Image Processing Objective-C Samples
macOS Objective-C image processing examples including image reading/saving, image scaling, and format conversion
preferred input family image
image
Web Image Processing Python Samples
Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion
preferred input family image
image

Related Hubs

Image Convert Tools
Explore 100 image tools for convert workflows and compare closely related utilities quickly.
Image Tools
Explore 40 image tools for utility workflows and compare closely related utilities quickly.
Validation Validate Tools
Explore 16 validation tools for validate workflows and compare closely related utilities quickly.

FAQ

What is the difference between WCAG AA and AAA?

WCAG AA requires a contrast ratio of 4.5:1 for normal text, while the stricter AAA level requires 7:1. Large text has lower thresholds (3:1 for AA and 4.5:1 for AAA).

Which color-vision deficiencies does this tool simulate?

The tool simulates Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Achromatopsia (total color blindness).

Why does the contrast ratio change in the simulation cards?

The tool recalculates the contrast ratio based on how the colors are perceived in each specific color-blindness simulation, revealing hidden accessibility risks that might not be obvious in normal vision.

What does the design image upload do?

Uploading a screenshot allows the tool to analyze the image in tiles, flagging specific local areas where the contrast falls below your selected WCAG threshold.

What file formats are supported for the design image?

You can upload PNG, JPEG, or WEBP images up to 10MB in size.

API Documentation

Request Endpoint

POST /en/api/tools/color-vision-accessibility-checker

Request Parameters

Parameter Name Type Required Description
foreground color Yes -
background color Yes -
designImage file (Upload required) No -
wcagLevel select No -

File type parameters need to be uploaded first via POST /upload/color-vision-accessibility-checker to get filePath, then pass filePath to the corresponding file field.

Response Format

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP Documentation

Add this tool to your MCP server configuration: 

{
  "mcpServers": {
    "elysiatools-color-vision-accessibility-checker": {
      "name": "color-vision-accessibility-checker",
      "description": "Measure WCAG contrast, simulate major color-vision deficiencies, and optionally flag low-contrast regions in a UI screenshot",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-vision-accessibility-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

Supports URL file links or Base64 encoding for file parameters.

If you encounter any issues, please contact us at [email protected]