What is a color contrast grid?

A color contrast grid is a matrix that pairs every colour in a palette against every other colour and shows the WCAG contrast ratio for each combination. Instead of checking one foreground and background at a time, you see the whole palette scored at once, which makes it obvious which text/background pairings are safe to use and which fail accessibility requirements.

What contrast ratio do I need to pass WCAG?

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text to meet level AA. To reach the stricter AAA level you need 7:1 for normal text and 4.5:1 for large text. Large text means roughly 18.66px bold or 24px and above. This grid shows both the AA and AAA result for each pair so you can target whichever level your project needs.

How is the contrast ratio calculated?

The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colours. Relative luminance is computed by linearising each sRGB channel and weighting them 0.2126 red, 0.7152 green and 0.0722 blue, exactly as defined in WCAG 2.1. The result ranges from 1:1 (identical colours) to 21:1 (pure black on pure white).

What colour formats can I paste?

You can paste 6-digit and 3-digit hex (with or without the # prefix), 8-digit hex with alpha (the alpha is ignored for contrast), rgb() and rgba() values, and common CSS colour names such as navy, teal or crimson. Mix formats freely and separate them with new lines, commas, semicolons or spaces.

Does this tool consider colour blindness?

WCAG contrast ratios are based on luminance, not hue, so a passing ratio already helps many users with colour vision deficiencies because it guarantees a brightness difference. However contrast alone does not catch every issue — never rely on colour as the only way to convey meaning, and pair this tool with a dedicated colour-blindness simulator for a fuller check.

Is my palette uploaded anywhere?

No. Every contrast ratio is calculated in your browser with JavaScript, and your palette is saved only to this browser's local storage so it is still there when you come back. Nothing is sent to a server, which makes the tool safe for unreleased brand colours and works fully offline.

How many colours can I add?

You can add up to 16 colours. A 16-colour palette already produces 240 distinct foreground/background pairs, which is plenty for a design-system audit, and keeping the cap here keeps the matrix readable on screen and quick to scan.

Color Contrast Grid — Gera Tools

A color contrast grid takes a whole palette and scores every possible text-over-background combination against the WCAG 2.1 accessibility thresholds in a single matrix. Rather than testing one pairing at a time, you paste your brand or design-system colours once and instantly see which combinations are safe for body text, which only work at large sizes, and which fail outright.

It is built for designers and front-end developers who need to prove a palette is accessible, pick legible text colours for buttons and badges, or document the “allowed” combinations for a component library — all without sending a single colour to a server.

How it works

Paste your colours in any common format — hex such as #2563eb or the shorthand #28e, rgb(37, 99, 235), or plain CSS names like navy and crimson — one per line or comma-separated. The tool normalises each one to a hex value, drops duplicates, and builds an N×N table where each row is a background and each column is a text colour.

For every cell it computes the WCAG contrast ratio from the two colours’ relative luminances and compares it to the four official thresholds: 4.5:1 for AA normal text, 7:1 for AAA normal text, 3:1 for AA large text and 4.5:1 for AAA large text. Each cell shows the exact ratio plus a green badge when it passes for normal body text and a smaller L badge for large text. Hover any cell for a live preview of real words rendered in that exact pairing. A summary strip counts how many of the pairs clear AA and AAA so you can judge the palette at a glance.

Example

Suppose your palette is ink #0f172a, blue #2563eb, amber #f59e0b and white #ffffff. The grid immediately reveals that ink on white scores about 17.8:1 (AAA everywhere), white on blue scores about 5.2:1 (passes AA for normal text), but amber text on white only reaches roughly 1.9:1 — a clear fail you should never use for readable text. Switching amber to a background with dark ink text fixes it, and the matrix confirms the new pairing in real time.

Text	Background	Ratio	Normal	Large
`#0f172a`	`#ffffff`	17.8:1	AAA	AAA
`#ffffff`	`#2563eb`	5.2:1	AA	AAA
`#ffffff`	`#16a34a`	2.8:1	fail	fail
`#f59e0b`	`#ffffff`	1.9:1	fail	fail

Use Copy failing pairs to grab every sub-4.5:1 combination for a bug ticket, or Export CSV to drop the full scored matrix straight into your design-system documentation. Every figure is computed in your browser — nothing is uploaded or stored anywhere but this device.