colour tool
Colour contrast matrix
Paste 2 to 12 colours and this colour contrast matrix scores every pair against WCAG 2 in one grid, with a sample of each colour as text on each other colour. Below the grid it lists the pairs safe for body text and the pairs that pass for large text only.
Loading the tool…
- Runs on your device, nothing is uploaded
- Free, no sign in
- No watermark, no file limit
How it works
- 1
Paste the palette
Type or paste one colour per line, such as #2563EB, Brand blue. Lines it cannot read are listed and skipped.
- 2
Read the grid
Rows are the text colour and columns the background. Each cell shows Aa in those colours, the ratio and a grade.
- 3
Check the two lists
Pairs safe for body text are listed by ratio, highest first, then the pairs that pass for large text only.
- 4
Take the results
Copy the results as CSV, or download them, for a design review or an accessibility audit.
Why check every pair at once
A palette of six colours has fifteen possible pairs, and twelve colours have sixty six. Checking them two at a time misses the pairs nobody planned but somebody will eventually use: the brand blue on the warning amber, the muted grey on the tinted panel. The grid shows the whole palette in one view, so you can mark which pairs are allowed for text before the design system is handed over.
The thresholds in the grid
WCAG 2 success criterion 1.4.3 asks for 4.5 to 1 for normal text and 3 to 1 for large text at level AA, and 7 and 4.5 at level AAA. Large means at least 24 pixels, or about 18.7 pixels in bold. Interface parts such as borders, icons and focus rings need 3 to 1 under criterion 1.4.11. The badge in each cell grades the body text level, and says large only between 3 and 4.5.
Why each pair appears twice
The contrast ratio is symmetrical: dark text on a light background scores the same as light text on the same dark background. The grid still shows both, because the sample reads differently each way round, and a design often uses only one. The lists below count each pair once. Diagonal cells, a colour on itself, are marked same.
Theme colours on a form
The forms builder has 37 themes, 12 classic and 25 conversational, and a custom theme builder with a Colors tab. Before setting text, background and accent colours there, run them through the grid: question text and helper text on the background need 4.5 to 1, and the button label on the accent needs the same. Forms cannot take custom CSS, so the theme colours are where contrast is decided.
Limits worth knowing
The ratios are WCAG 2, not APCA, the perceptual measure proposed for WCAG 3, so dark mode pairs can score differently there. Large text thresholds are shown separately from body text. Up to 12 colours are checked. Nothing leaves this page: the palette is scored in your browser, nothing is uploaded and nothing is stored, ever.
Limits
- WCAG 2 ratios, not APCA. Large text thresholds, 3 to 1 for AA and 4.5 for AAA, are shown separately from body text.
- Up to 12 colours, which is 66 pairs; any more are left out with a message.
- Colours are treated as solid; any transparency in a pasted value is ignored.
What it does not do
- It does not suggest replacement colours. The contrast checker finds the nearest passing shade of one colour.
- It does not simulate colour vision. The colour blindness simulator does.
- It does not know which colours your design actually puts together; it scores every pair.
Questions people ask
Why do so few pairs pass in a typical brand palette?
Brand colours are usually chosen for character, and characterful colours tend to sit in the middle of the lightness range, where they contrast weakly with each other. Most passing pairs involve a near black or a near white. That is normal: give the palette one very dark and one very light neutral, and let those carry the text.
Does a pair that fails have to be removed from the palette?
No. A failing pair can still appear side by side as shapes, illustrations or decoration, as long as no text or essential icon depends on telling them apart. The grid is a list of permitted text pairings, not a list of colours to delete. Mark the pairs that fail and keep them away from words.
Is APCA going to replace these ratios?
APCA was proposed for WCAG 3, which is still a draft with no adoption date. Laws and procurement rules that cite accessibility today point at WCAG 2.1 or 2.2, so the ratio in this grid is the number an audit checks. APCA is worth reading for dark mode work, but do not rely on it for compliance yet.
How should I present the results to a client?
Download the CSV and keep only the pairs rated AA or AAA for body text; that list becomes the approved text pairings for the brand. Add the large only pairs as a second list for headings. Clients understand a short allowed list far better than a grid of sixty numbers, and designers can follow it without reopening the tool.
Can I paste colours straight from a design file?
Yes, as long as each value is a hex, rgb(), hsl(), oklch() or CSS name. Most design apps copy hex codes. Put one per line, or paste a single comma separated line of codes. Names are optional and make the lists easier to read. Any line the tool cannot read is shown above the grid.
Build a form in colours that pass
Take what you made here into forms.
Create a form with OneCraftMore tools like this
- Contrast checkerSet a text colour and a background and read the WCAG ratio on a live specimen, with a pass or fail attached to every size from 30px down to 13px.
- Colour blindness simulatorColour blindness simulator: see an image or a palette under protanopia, deuteranopia, tritanopia and achromatopsia side by side, on your own device.
- Colour palette generatorColour palette generator: pick one seed colour and get monochrome, analogous, triadic and split palettes with hex, RGB, HSL and a WCAG text check.
- Tints and shades generatorTints and shades generator: 10 lighter and 10 darker steps of any colour, with hex values and the contrast of black and white text on each.
- Complementary colour finderComplementary colour finder: enter a colour to get its complement, the two split complementary colours and an accent that passes WCAG contrast on it.
Background reading: the question page on this.
Written and checked by the OneCraft team. Last checked .