No Login Data Private Local Save

Hex Contrast Grid – Online Test All Pair Combinations

18
0
0
0

Hex Contrast Grid

Test all color pair combinations against WCAG contrast standards

Your Colors
6 colors
Quick Presets
Material Design
Tailwind
Monochrome
Ocean
Sunset
AAA ≥7:1 AA ≥4.5:1 AA Large ≥3:1 Fail <3:1 Click any cell to copy contrast ratio
Scroll horizontally to see all combinations  |  Row = Background  |  Column = Text Color

Frequently Asked Questions

A Hex Contrast Grid is a visual matrix that tests every possible pair of colors from your palette against each other. Each cell shows the contrast ratio when one color is used as text on another as background. This helps designers and developers quickly identify which color combinations meet WCAG accessibility standards without manually testing each pair.

Contrast ratio follows the WCAG 2.x formula: first, each sRGB color channel is linearized. Then relative luminance (L) is computed as 0.2126×R + 0.7152×G + 0.0722×B. The contrast ratio between two colors is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance. The result ranges from 1:1 (identical colors) to 21:1 (pure black vs pure white).

AAA (≥7:1) – Enhanced contrast, suitable for users with low vision. Required for AAA compliance.
AA (≥4.5:1) – Minimum for normal text (under 18pt regular / 14pt bold). Meets AA compliance.
AA Large (≥3:1) – Sufficient for large text (≥18pt regular or ≥14pt bold) at AA level.
Fail (<3:1) – Does not meet any WCAG text contrast requirement and should be avoided for readable content.

Diagonal cells represent a color paired with itself — the text color and background color are identical. This always yields a 1:1 contrast ratio, meaning the text is completely invisible against the background. These cells are intentionally grayed out to indicate they are not usable combinations.

Yes! Click the CSV button to download the full contrast matrix as a CSV file. You can open it in Excel, Google Sheets, or any spreadsheet tool. The first column lists background colors and the first row lists text colors — each cell contains the contrast ratio between that pair.

We support standard 6-digit hex codes (e.g., #FF5733 or FF5733) and shorthand 3-digit hex codes (e.g., #F53 or F53). The input is case-insensitive. Invalid hex values will be visually flagged so you can correct them immediately.

Pro Tips

  • Test early: Run your brand palette through this grid before finalizing design tokens to catch accessibility issues at the foundation level.
  • Dark mode pairs: Use this tool to find text colors that work on dark backgrounds — aim for at least AA (≥4.5:1) for body text.
  • Large text shortcut: If you're designing headings or hero text (≥18pt), the AA Large threshold (≥3:1) gives you more creative freedom.
  • Click to copy: Click any non-diagonal cell to copy that contrast ratio to your clipboard — handy for documentation.
  • Sort by luminance: Sorting colors from darkest to lightest makes the grid easier to scan and reveals natural groupings.
🔧 Related Tools