Accessibility Contrast Grid
Test your color palette for WCAG contrast requirements. Build your grid with every text and background pairing, then review the matrix for implementation.
Your palette
One hex code per line, with an optional label after a comma.
- AAA Passes AAA for all text (7:1+)
- AA Passes AA for all text (4.5:1+)
- AA18 Large text, icons, and UI only (3:1+)
- DNP Does not pass
Large text means 24px and up, or about 18.7px and up when bold. Ratios are rounded down, so a pairing that shows 4.4 really does fall short of 4.5. Select any tile or pairing to see the full breakdown.