A11y Color Combinator

Set your minimum desired contrast (cannot go below WCAG minimum):

MIN CONTRAST: 4.5

SELECT A BASE COLOR:

--base: NULL

Or Pick One of These:

CONTRAST: ??

OVERLAY:

--overlay: NULL

Select a BASE color first.

Example Content Application

Sphinx of black quartz, judge my vow

"While color contrast is often primarily an aesthetic choice, the use of color on a website pertains to using color to communicate information. WCAG guideline 1.4.1 on the use of color requires that "color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."

"Any sufficiently advanced technology is indistinguishable from magic."
- Arthur C. Clarke

How Are You?Another Text Input ExamplePlease select your favorite Web language:

HTML

CSS

JavaScript

Helpful Links:

Contrast Success Criterion (WCAG)Understanding Use of Color (WCAG)About Color Contrast (MDN)About Use of Color/Perceivable (MDN)What is Color Contast? (The A11y Project)Colors and Luminance (MDN)

"Having good color contrast on your site benefits all your users, but it is particularly beneficial to users with certain types of color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colors. This is because they don't see bright and dark areas as readily as those without such conditions, and therefore have trouble seeing edges, borders, and other details."

About This App About The Author

BASE:

OVERLAY: