Accessibility Contrast Matrix

Test color combinations and build an accessible color palette. (press control, option, shift, f to autofilll the input)

Add your colors

Enter hex codes with or without #. Supports 2, 3 or 6 digits (e.g., #000, ff, ff0000).

0 color pairs

Contrast Matrix Table

Toggle hex codes

Contrast pair cards

Toggle only accessible combinations

Toggle grayscale

Preview card samples

Select a color pair card above to show a preview of how it could look

Page heading

Content heading

Here's a paragraph for something to try to read.

Page heading

Content heading

Here's a paragraph for something to try to read.

Accessibility for color pairs come in at three rankings: A, AA, AAA. We can grade them according to these thresholds.

Contrast value	Rating	WCAG 2.1 acceptable standards
Greater than 7	Great	Meets AAA rating for all text sizes
4.5 to 7	Good	Meets AA rating for all text sizes and AAA for large text sizes
3.0 to 4.5	Verify	Meets AA rating for large text sizes
Less than 3	Bad	All pairs in this range are not accessibly compliant

W3 Org explains WCAG Understanding SC 1.4.3: Contrast (Minimum) (Level AA)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes Text that is part of a logo or brand name has no contrast requirement.

Accessibility Contrast Matrix

Verify Accessible Contrast Values for one or many colors at the same time

Add your colors

0 color pairs

Contrast Matrix Table

Contrast pair cards

Preview card samples

Content heading

Content heading

Preview Button Focus samples