Colors

Tools and resources to ensure your colors—in type, UI elements, design systems, and more—meet accessibility standards.

tpgi

Contrast Checker

Color Contrast Checker

Evaluating your design for color contrast is a critical aspect of accessibility testing and organizations may benefit from appropriate user experience training and expertise to ensure proper contrast.

color-studio

Color Generator

Color Studio

It is too hard to build coherent and accessible themes with the right colors. This should help.

Contrast Checker

Color Contrast Checker

AA Large applies to text > 24px or > 18.5px for bold fonts. Learn more: Text Contrast Non-text Contrast (WCAG 2.1) For APCA font size and weight need to be taken into account, so the little colored dotis not really meaningful: WCAG 3.0 APCA (Working Draft)

color-cube

Color Generator

ColorCube

A color A11y Tool for Designers & Developers

pika

Color Simulator

Pika

An open-source colour picker app for macOS.

vision-aussie

Contrast Checker

Colour Contrast Determinator

The Colour Contrast Determinator contains text alternatives for screen reader users. For example, the text alternative for the hue slider might be "Hue values 0 to 217 fail. Values 218 to 285 pass. Values 286 to 360 fail".

color-tester

Contrast Checker

ColorTester

Software for test contrast ratio (WCAG 2.0 (JIS X 8341-3:2010) color contrast success criteria) between fore color and background color.

Contrast Checker

Contrast Checker

This tool is built for designers and developers to test color contrast compliance with the Web Content Accessibility Guidelines (WCAG) as set forth by the World Wide Web Consortium (W3C). These calculations are based on the formulas specified by the W3C.

image-color

Contrast Checker

Color Contrast Checker

Enter your colors in HEX format or click on the icon to use the color picker. Contrast ratio value will be updated automatically as you change color values. We use Web Content Accessibility Guidelines (WCAG) to calculate the color contrast ratio.

userway-color

Contrast Checker

Color Contrast Checker

Ensure Accessible Color Use for WCAG & ADA Compliance.

monsido

Contrast Checker

Contrast Checker

The tool tests the contrast of your background and text for accessibility. You can use it to visualize different color combination palettes for your website design that are in compliance with WCAG, EU directive, and ADA standards.

Contrast Checker

Color Contrast & Color Perception Accessibility Checker

This tool lets you check the color contrast between different color pairings and also check for common color perceptions against Web Content Accessibility Guideline (WCAG) standards.

Image Color Checker

Color Check for ADA image compliance

Color Check in an interactive tool for validating web image compliance with ADA (Americans with Disabilities Act) contrast and readability standards.

Color Simulator

Check My Colours

A tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.

color-a11y

Contrast Checker

Color Contrast Accessibility Validator

This website provides free color contrast analysis tools that will display the color contrast issues of a web page or chosen color-pair; per WCAG 2.1 Guidelines.

adobe

Color Generator

Accessible color palette generator

Adobe color's accessible color palette generator.

Vision Simulator

Coblis

The Color BLIndness Simulator can close this gap for you. Just play around with it and get a feeling of how it is to have a color vision handicap.

colortool

Color Generator

Color Tool - Material Design

Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.

button-contrast

Contrast Checker

Button Contrast Checker

A tool to test the contrast of all buttons and links of a page at once. Enter your domain and Button Checker test if your buttons have enough contrast and are compliant with WCAG 2.1.

colorreview

Color Simulator

Color.review

Colors that look and work great for everyone and what you need to know about colors & accessibility.

tanaguru

Contrast Checker

Tanaguru Contrast-Finder

Findind the good contrasts, for web accessibility, between two colors.

colorgenerator

Color Generator

Accessible Color Generator

High-Contrast Color Suggestions.

interactor

Color Generator

Colors interactor

A simple way to check the interactions between the colors of your palette.

ratio

Contrast Checker

Contrast Ratio

Easily calculate color contrast ratios. Passing WCAG was never this easy!

accessible-color

Contrast Checker

Accessible Colors

A simple tool to test background/text contrast ratio and automatically find the closest accessible colors.

colorbox

Color Generator

ColorBox

Produce accessible color palettes with the help of ColorBox.

whocanuse

Color Simulator

Who Can Use

A tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

toptal

Vision Simulator

Toptal Color Blind Filter

Use the Colorblind Filter to select safe colors earlier in the design process.

colortester

Contrast Checker

Color Tester

Create and test your color palette, validate color contrast for accessibility (https://www.w3.org/TR/WCAG20/), simulate your palette seen by a colorblind person, convert colors to HSLA, RGBA and hex for your CSS, convert to CMYK.

contraste

Color Generator

Contraste

Contraste allows you to quickly know if a combination of colors, for a text and a background, passes accessibility thresholds defined by the W3C.

accessible-colors

Color Generator

Accessible Brand Colors

Shows you how ADA compliant your colors are in relation to each other.

colors

Color Generator

Colors

A nicer color palette for the web. Mix and match color classes to create a variety of accessible themes.

leonardo

Color Generator

Leonardo

An open source contrast-based color generator.

grid

Contrast Checker

Contrast Grid

Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.

accessible-color-builder

Color Generator

Accessible color palette builder

An Elm-based prototype to help designers build accessible color palettes.

sim

Vision Simulator

Sim Daltonism

A color blindness simulator for iOS and Mac. It takes a live video feed from the camera on iOS and filters it in real time using a color blindness simulation algorithm.

colorable

Contrast Checker

Colorable

Color combination contrast tester.

contrast-analyser

Contrast Checker

Colour Contrast Analyser

Helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.

webaim

Contrast Checker

WebAIM: Contrast Checker

A web app tool to check your foreground, background and text color contrast.

color-oracle

Vision Simulator

Color Oracle

A free color blindness simulator for Windows, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.

random11y

Color Generator

Randoma11y

Randomly produce an accessible color palette with contrast ratio check.

contrast-triangle

Contrast Checker

The Contrast Triangle

A three-way color contrast checker to help determine your colors, text, and links are accessible.

color-safe

Color Generator

Color Safe

Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

contrast

Contrast Checker

Contrast

A macOS app for quick access to WCAG color contrast ratios.

Colorific

Color Simulator

Colorific

Colorific is a tool that allows you to test for color accessibility for common color perception and various color blind conditions.

hexnaw

Contrast Checker

Hex Naw

Hex Naw is a tool that helps designers and developers test entire color systems for contrast and accessibility. Plug in your palette or color system and let Hex Naw do the rest.