Colour Contrast Grid Generator
Preview WCAG contrast ratios for every colour pairing.
- Reading time:
- 2 min
- Last updated:
- Price:
- Free, no signup
Type or paste text to see the result.
What the Colour Contrast Grid Generator does
Test color combinations against WCAG accessibility standards and generate a comprehensive contrast matrix.
Ensure your text, buttons, and UI elements meet AA and AAA contrast ratio compliance before finalizing design tokens.
Why the Colour Contrast Grid Generator is useful
Low-contrast text makes websites difficult or impossible to read for millions of users with visual impairments.
Failing WCAG contrast guidelines can harm search rankings, lower conversion rates, and create legal accessibility compliance risks.
Also known as: color contrast grid, wcag contrast checker, accessible color combinations, free colour contrast grid generator, online colour contrast grid generator, colour contrast grid generator online free, colour contrast grid generator tool.
How to use the Colour Contrast Grid Generator
- 1
Enter Brand Color Palette
Input your brand HEX or RGB colors (backgrounds, surfaces, and text tokens).
- 2
Calculate Contrast Ratios
The tool computes contrast ratios for every color pair combination.
- 3
Check WCAG Compliance
Review pass/fail badges for WCAG AA (4.5:1), Large Text (3:1), and AAA (7:1) thresholds.
Key features
- Full N x N matrix comparing all input colors as both text and background
- Automatic WCAG 2.1 evaluation for AA, AAA, and UI component standards
- Color blindness preview modes to check legibility under various conditions
- One-click export of accessible color pairings for design systems
Benefits
- Guarantees accessible, readable interfaces across your entire digital product
- Protects your organization from accessibility legal liabilities and complaints
- Simplifies design system documentation for development teams
Real-life use cases
Design System Token Audits
Verify accessible foreground/background pairings for buttons, cards, and input fields.
Website Redesigns
Audit existing brand palettes to ensure marketing pages pass accessibility audits.
Tips for the best results
- Aim for at least 4.5:1 for standard body text and 3:1 for large headings (18pt+ or bold 14pt+).
- Remember that contrast ratios are independent of light or dark themes—math applies equally to both.
- Avoid relying solely on color to convey critical information like error states.
Conclusion
Building an accessible color grid ensures every user can read and interact with your website comfortably and legally.
Frequently asked questions
What is the minimum WCAG AA contrast ratio for body text?
- WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal body text.
What is the requirement for large text?
- Large text (at least 18pt / 24px or bold 14pt / 18.5px) requires a minimum ratio of 3:1.
What does WCAG AAA require?
- WCAG AAA requires an enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text.
How is the contrast ratio calculated?
- It is based on the relative luminance formula defined by the W3C: (L1 + 0.05) / (L2 + 0.05).
Does contrast apply to icons and form borders?
- Yes, WCAG 2.1 non-text contrast requires at least 3:1 for UI components and graphical objects.
Are my colors stored or tracked?
- No, all contrast calculations run client-side in your browser.
Related tools you may need
- Dominant Colour Palette Extractor — Extract the dominant colours from any image as hex swatches.
- CMYK to RGB Converter — Convert print CMYK colors to screen RGB.
- Color Palette Generator — Generate a 5-shade palette from any HEX color.
- Color Picker — Convert any CSS color into HEX, RGB and HSL representations.
- HSL to RGB Converter — Convert HSL color values to RGB.
- HEX to RGB — Convert HEX color codes to RGB with alpha support.
- RGB to HEX — Convert rgb() color values to HEX codes.
- HSL to HEX Converter — Convert HSL color values to HEX.
Keep exploring
Browse the full tools directory, filter by category, or read guides on the Text Tools Hub blog.