# Color Vision Accessibility Checker Measure WCAG contrast, simulate major color-vision deficiencies, and optionally flag low-contrast regions in a UI screenshot > Canonical page: https://elysiatools.com/en/tools/color-vision-accessibility-checker - **Category:** Design - **Keywords:** color accessibility, color blindness, wcag, contrast ## Overview 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. ## Inputs - **Foreground Color** (color) - **Background Color** (color) - **Design Image** (file) - **WCAG Level** (select) ## 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. ## Frequently asked questions ### 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. ## Related tools - [Accessibility Checker](https://elysiatools.com/en/tools/accessibility-checker): Detect common WCAG 2.1 accessibility issues in HTML, fetched pages, or design images and return fix-ready guidance - [Image Color Palette Extractor](https://elysiatools.com/en/tools/image-color-palette-extractor): Extract dominant colors from an image, export code-ready tokens, and check contrast ratios - [VP8 Image Analyzer](https://elysiatools.com/en/tools/vp8-image-analyzer): Analyze a WebP/VP8 image with Sharp, generate a grayscale displacement map, and render it as an interactive Three.js 3D relief surface - [Accessibility Heatmap Generator](https://elysiatools.com/en/tools/accessibility-heatmap-generator): Generate a contrast-focused accessibility heatmap from a UI screenshot or HTML input and suggest stronger patch colors - [Image Channel Extractor](https://elysiatools.com/en/tools/image-channel): Extract, manipulate, and analyze individual color channels (RGB, Alpha, Luminance) with professional processing options - [Image Color Extractor](https://elysiatools.com/en/tools/image-color-extractor): Extract dominant colors from images using various algorithms including k-means clustering and histogram analysis - [Image Palette to Design Tokens](https://elysiatools.com/en/tools/image-to-design-tokens): Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each - [Cinematic Color Grading](https://elysiatools.com/en/tools/image-cinematic-color): Apply professional cinematic color grading to your images. Choose from popular movie styles like Hollywood Blockbuster, Indie Film, Vintage Film, and more. Perfect for giving photos a movie-like appearance. ## Samples - [Android Image Processing Java Samples](https://elysiatools.com/en/samples/android-image-processing-java): Android Java image processing examples including reading/saving images, scaling, and format conversion - [Android Image Processing Kotlin Samples](https://elysiatools.com/en/samples/android-image-processing-kotlin): Android Kotlin image processing examples including reading/saving images, scaling, and format conversion - [Web Image Processing Python Samples](https://elysiatools.com/en/samples/web-image-processing-python): Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion - [Web Image Processing Rust Samples](https://elysiatools.com/en/samples/web-image-processing-rust): Web Rust image processing examples including image read/save, scaling, and format conversion ## Related content - [CSS Effects, Palettes, and Design Token Generators](https://elysiatools.com/en/hubs/design-generate): Curated tools for CSS visual effects, palette building, and design token generation in one hub. - [Web Accessibility Audit and Accessible Color Tools](https://elysiatools.com/en/hubs/web-accessibility-audits): Review WCAG issues, screen-reader order, contrast failures, color-vision risk, and accessible palette choices in one hub for website and UI accessibility workflows. - [Image Format Conversion and Animated Export Tools](https://elysiatools.com/en/hubs/image-convert): Compare image format converters for JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64, and animation-friendly exports in one hub. - [Image Cleanup, Framing, and Batch Prep Tools](https://elysiatools.com/en/hubs/image-utility): Compare image cleanup, trimming, padding, framing, batch resize/compress, watermarking, and visual polish tools in one hub for asset preparation workflows.