Accessibility Contrast Matrix

Verify Accessible Contrast Values for multiple colors at once

Add colors all at once via the CSV drop or enter in colors one at a time in the matrix builder (strict formatting rules for now)

DROP COLORS

ex: #aa0000, #ffffff, #aa00bb


BUILD COLORS

One at a time. ex: #fff

Color Matrix

(if you built a list of colors, you will see it below and you can click the buttons to remove a color)


AX Matrix Guide

GREAT Greater than 7

GOOD 4.5-7

OKAY 3.0-4.5

BAD Less than 3.0

WCAG 2.1

The industry standard, AA, requires 4.5 (GOOD) for regular text and 3.0 (OKAY) for large text or graphics.

The best, AAA, requires 7 (GREAT) for regular text and 4.5 (GOOD) for large text or graphics.

Large text is considered 18px & bold or 24px.

Note: Colors that fail the accessible threshold of WCAG 2.1 AA (contrast value less than 3) are inverted in the matrix in hopes to make the text readable to the users using this app.