Start with your brand colors and neutrals to quickly find which text/background pairs are accessible?

Start with your brand colors and neutrals to quickly find which text/background pairs are accessible.

WCAG AA requires a minimum ratio of 4?

WCAG AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text.

Export the CSV and include it in your design system documentation for developer reference.

WCAG contrast ratio grid for all color combinations — Eightshapes style

Generate a WCAG contrast ratio grid for all your color combinations — check accessibility compliance at a glance, Eightshapes style.

1Add colors to your palette using HEX values and optional labels.
2The grid automatically generates contrast ratios for every foreground/background combination.
3Review which pairs pass WCAG AA or AAA levels and which fail.
4Filter the grid to show all combinations, passing only, or failing only.
5Export the full grid as CSV for documentation or team review.

Start with your brand colors and neutrals to quickly find which text/background pairs are accessible.
WCAG AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text.
Export the CSV and include it in your design system documentation for developer reference.

Free: max limited colors. Starter+: unlimited colors in palette.

OneKitTools TeamUpdated 2.21.4