This tool builds a full contrast grid for a small palette so you can check every text-on-background combination for accessibility at once. Paste up to eight hex colours and it tests each colour as text on every other colour as a background, showing the exact WCAG ratio and an AA/AAA pass-or-fail label in each cell. It is built for designers and developers verifying that a palette meets accessibility requirements.
Why a grid instead of individual pair checks
Most contrast checkers test one pair of colours at a time. That works when you have a specific combination in mind, but a brand palette of five or six colours creates dozens of possible text/background pairings — and it’s common for some of those combinations to appear unexpectedly in the real product (for example, when a chip or badge appears on a card that uses a secondary brand colour as its background).
The grid approach reverses the workflow: rather than checking each combination you think might appear, it shows you every combination at once. You can immediately see which colour pairings are safe to use anywhere, which only work for large text, and which should never be combined. This surfaces the risky pairings you didn’t think to check.
How the WCAG contrast formula works
For each cell, the tool converts the two colours to their relative luminance using the official WCAG formula. The steps:
- Normalise each channel: divide the R, G, and B values (0–255) by 255.
- Linearise (remove gamma): values ≤ 0.03928 are divided by 12.92; values above use
((c + 0.055) / 1.055) ^ 2.4. - Weight and sum: luminance L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear.
With both luminances, the contrast ratio is:
ratio = (L_lighter + 0.05) / (L_darker + 0.05)The 0.05 flare term models ambient light, and the lighter-over-darker ordering ensures the result is always ≥ 1:1. Maximum ratio is 21:1 (pure black on pure white).
WCAG thresholds explained
| Ratio | Level | Applies to |
|---|---|---|
| ≥ 7:1 | AAA | Normal-weight text at standard sizes |
| ≥ 4.5:1 | AA | Normal-weight text at standard sizes |
| ≥ 3:1 | AA Large | Text at 18pt+ (or 14pt+ bold), UI components, focus indicators |
| Below 3:1 | Fail | Not compliant at any WCAG level |
The “Large” category in WCAG applies to text that is at least 18 point (roughly 24px) in regular weight, or 14 point (roughly 18.67px) in bold. Large text is given more latitude because it is inherently more legible at lower contrast.
Note that WCAG 2.x contrast rules apply to text content and UI component states. Purely decorative images and disabled form controls are exempt.
Reading and using the grid output
The diagonal of the grid (colour on itself) always shows 1:1 and fails — an obvious result. The grid is symmetric: the ratio of colour A on colour B equals the ratio of colour B on colour A, because the formula always puts the lighter luminance on top. The cell just shows the ratio for that pair regardless of which is text and which is background.
When reading the grid:
- AAA cells — safe for any text at any size under WCAG 2.x
- AA cells — safe for normal body text; comfortable for most reading situations
- AA Lg cells — only acceptable for large or bold headlines; do not use for body copy, labels, or captions
- Fail cells — avoid these combinations for any content that a user needs to read
Practical tips for palette design
- Dark grays (#333–#555) on white or near-white almost always pass AA and often AAA.
- Mid-range colours (#777–#999) on white are the most likely to fail; they are often used as placeholder text but require careful contrast checking.
- Brand accent colours at full saturation frequently fail on white backgrounds — check before using them as text or interactive element borders.
- If you need a colour to work on multiple backgrounds, the grid instantly shows which backgrounds it’s safe on and which are risky.
All calculations use the official WCAG 2.1 relative-luminance formula and run entirely in your browser — nothing is uploaded.