No Login Data Private Local Save

Accessible Color Contrast Grid - Online Test Combinations

27
0
0
0

Accessible Color Contrast Grid Tester

Quickly test multiple foreground and background color combinations for WCAG 2.1 AA and AAA compliance. Add your palette, generate the grid, and instantly see which pairs pass or fail.

Your Color Palette
Add at least two colors to generate the grid. Colors are used as both foregrounds and backgrounds in the combination matrix.

Frequently Asked Questions

Color contrast refers to the difference in luminance (brightness) between foreground (text, icons) and background colors. Sufficient contrast ensures that people with low vision, color blindness, or age‑related vision impairment can read content easily. WCAG guidelines define minimum contrast ratios to help designers and developers create inclusive interfaces.

  • AA – Normal text: contrast ratio of at least 4.5:1
  • AA – Large text: at least 3:1 (large = 18px bold or 24px regular)
  • AAA – Normal text: at least 7:1
  • AAA – Large text: at least 4.5:1
These ratios ensure legibility for different text sizes. Large text typically needs less contrast because its size helps readability.

The ratio is based on the relative luminance (L) of the two colors: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance. Relative luminance is defined by the WCAG sRGB formula, using linearized RGB values. This tool uses the exact formula to produce accurate ratios.

Each cell displays the actual color combination (sample “Aa”) and a badge showing the contrast ratio with a pass/fail icon for AA normal text. The badge color indicates: green check = passes AA normal, red cross = fails. Hover over the badge or the cell to see detailed WCAG level compliance (AA/AAA for normal and large text).

Absolutely! Add as many colors as you like (we recommend 3–12 for a readable grid). The tool generates a full cross‑matrix, letting you evaluate every foreground against every background in your palette.

Pure black (#000) on pure white (#fff) yields a ratio of 21:1, which passes all levels. However, if you use a slightly lighter black (e.g., #333) or a darker white, the ratio drops quickly. Even small adjustments to color can affect compliance. Use this grid to find the exact values that maintain accessibility.
🔧 Related Tools